<template>
    <div
        :class="$style.triangle"
        :style="{
            borderWidth:dirToWidth,
            borderColor:dirToColor,
        }"
    >
        <slot/>
    </div>
</template>

<script>
    export default {
        name: "Triangle",
        props:{
            direction:{
                type:String,
                default:'top'
            },
            width:{
                type:Number,
                default:10
            },
            height:{
                type:Number,
                default:6
            },
            color:{
                type:String,
                validator:function(v){
                    let hex=new RegExp(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/),
                        rgba=new RegExp(/^[rR][gG][Bb][Aa]?[\(]((2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?(0\.\d{1,2}|1|0)?[\)]{1}$/);
                    return hex.test(v)||rgba.test(v);
                },
                default:'#000'
            }
        },
        computed:{
            dirToWidth(){
                var halfWidth=this.width/2,
                    top=0,
                    bottom=0,
                    left=0,
                    right=0;
                switch(this.direction){
                    case 'bottom':top=this.height;left=right=halfWidth;break;
                    case 'left':right=this.height;top=bottom=halfWidth;break;
                    case 'right':left=this.height;top=bottom=halfWidth;break;
                    case 'top':
                    default:
                        bottom=this.height;left=right=halfWidth;break;
                }
                return `${top}PX ${right}PX ${bottom}PX ${left}PX`;
            },
            dirToColor(){
                var top,bottom,left,right;
                top=bottom=left=right='rgba(0,0,0,0)';
                switch(this.direction){
                    case 'bottom':top=this.color;break;
                    case 'left':right=this.color;break;
                    case 'right':left=this.color;break;
                    case 'top':
                    default:
                        bottom=this.color;break;
                }
                return `${top} ${right} ${bottom} ${left}`;
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';
    .triangle {
        box-sizing: content-box;
        width: 0;
        height: 0;
        border-style: solid;
        position: relative;
    }
</style>