<template>
    <div
        :class="[
            $style.formItem,
            hasBorder&&$style.hasBorder,
            required&&!title&&$style.required,
            errorMsg&&$style.error,
            errorMsg&&errorPlacement
        ]"
        :style="{
            paddingLeft:titleWidth,
            paddingRight:suffixWidth
        }"
    >
        <p
            v-if="title.length>=1"
            :class="[$style.title,titlePosition==='center'&&$style.center]"
            :style="{width:titleWidth}"
        >
            <span>
                <span v-if="required" style="position:absolute; left:-10px;">*</span >
                {{getTitleText+"："}}
            </span>
        </p>
        <slot/>
        <span v-if="errorMsg" :class="[$style.errorMsg,'error-msg']" :style="{left:titleWidth}">
            <span>{{errorMsg}}</span>
        </span>
        <p v-if="suffix.length>=1" :class="$style.suffix">{{suffix}}</p>
        <p v-if="desc&&!errorMsg" :class="$style.desc">{{desc}}</p>
    </div>
</template>

<script>
    export default {
        name: "FormItem",
        props:{
            title:{
                type:String,
                default:''
            },
            suffix:{
                type:String,
                default:''
            },
            hasBorder:{
                type:Boolean
            },
            required:{
                type:Boolean
            },
            errorMsg:{
                type:String,
                default:''
            },
            desc:{
                type:String,
                default:''
            },
            errorPlacement:{
                type:String,
                default:'right'
            },
            labelWidth:{},
            titlePosition:{
                type:String,
                default:''
            }
        },
        computed:{
            titleWidth(){
                if(!!this.labelWidth){
                    return this.labelWidth;
                }
                return (this.title.length>=1?this.title.length+1:0)+'em';
            },
            suffixWidth(){
                return (this.suffix.length>=1?this.suffix.length+0.5:0)+'em';
            },
            getTitleText(){
                return this.title.replace(/^\s\s*/,'').replace(/\s\s*$/,'');
            }
        }
    }
</script>

<style module lang="scss">
    @value Required,Error,FormItemBorderColor from '../../cssInjection/stylization.scss';
    @import '../../cssInjection/cssLayout.scss';
    @import '../../cssInjection/cssFunction.scss';
    .formItem{
        margin-right: 28px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        font-size: 14px;
        &.hasBorder{
            border: 1PX solid FormItemBorderColor;
            border-radius: 4PX;
            padding: 5px 0;
            &.required{
                border-left: 2PX solid Required;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
        >*:not(:global(.cov-vue-date)){
            vertical-align: middle;
            line-height: 34px;
        }
        >.title{
            font-size: 1em;
            position: absolute;
            left: 0;
            top: 0;
            line-height: 2.5em;
            height: 2.5em;
            text-align: right;
            &.center{
                @extend %AbsoluteVerticalCenter;
            }
            >span{
                position: relative;
                >span{
                    color: Required;
                }
            }
        }
        >.suffix{
            font-size: 1em;
            @extend %AbsoluteVerticalCenter;
            right: 0;
        }
        >.desc{
            @extend %AbsoluteVerticalCenter;
            left: 100%;
            font-size: 14px;
            color: #878787;
            white-space: nowrap;
            margin-left: 10px;
        }
        &.error{
            label,:global(.datePicker) input{
                border-color: Error !important;
            }
            input{
                @include InputPlaceholderStyle(Error);
            }
        }
        position: relative;
        .errorMsg{
            >span{
                font-size: 0.9em;
                padding-left: 0.5em;
            }
        }
        &:global(.right){

        }
        &:global(.bottom){
            .errorMsg{
                position: absolute;
                top: 100%;
                line-height: 1.5em;
                height: 1.5em;
            }
        }
        &:global(.bottom-block){
            margin-bottom: 1.5em;
            .errorMsg{
                position: absolute;
                top: 100%;
                line-height: 1.5em;
                height: 1.5em;
            }
        }
        :global(.error){
            @extend %AbsoluteVerticalCenter;
            left: 100%;
            white-space: nowrap;
            margin-left: 1em;
        }
    }
</style>