<template>
    <div
        :class="$style.line"
        :style="getStyle"
    />
</template>

<script>
    export default {
        name: "MyLine",
        props:{
            dir:{
                type:String,
                default:'horizontal'
            },
            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:'#EEEEEE'
            }
        },
        computed:{
            getStyle(){
                let style={};
                switch(this.dir){
                    case 'horizontal':
                        style={
                            width:'100%',
                            height:'1PX'
                        };
                        break;
                    case 'vertical':
                        style={
                            width:'1PX',
                            height:'100%'
                        };
                        break;
                    default:
                        style={
                            display:'none'
                        };
                        break;
                }
                return {
                    backgroundColor:this.color,
                    ...style
                };
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';

    .line {
        flex: none !important;
        &.ver{
            width: 100%;
            height: 1PX;
            max-height: 1PX;
        }
        &.hor{
            width: 1PX;
            max-width: 1PX;
            height: 100%;
        }
    }
</style>