<template>
        <div class="input-date" :class="data.prepend||data.prependIcon?'el-input--prefix':data.appendIcon||data.append?'el-input--suffix':'' "  >
      <div  class="el-input-group__prepend" v-if='data.prepend'>{{data.prepend}}</div>
        <div  class="el-input-group__prepend" v-else-if="data.prependIcon">
            <el-button :icon="data.prependIcon" />
        </div>
        <el-date-picker type="daterange" v-model='parent.formModel[data.id]' :picker-options="pickerOptions" :range-separator="data.rangeSeparator||'~'" value-format="yyyy/MM/DD" start-placeholder="开始日期" end-placeholder="结束日期" size="large" @change="change" />
        <div  class="el-input-group__append"  v-if="data.appendIcon">
            <el-button :icon="data.appendIcon" />
        </div>
        <div class="el-input-group__append" v-else-if="data.append">
            {{data.append}}
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: {
            type: Object
        },
        validator: {
            type: Function
        },
        forms: {
            type: Object
        },
        _p:{
            type: Object
        }
    },
    data(){
        return {
            parent: this._p,
            pickerOptions:{
                disabledDate:(time) =>{
                    if(this.data.max){
                        return time.getTime() > new Date(this.data.max).getTime();
                    }
                    if(this.data.min){
                        return time.getTime() < new Date(this.data.min).getTime();
                    }
                    return false
                }
            }
        }
    },
    methods:{
        change(){
            if(this.data.change){
                this.data.change(this.parent.formModel[this.data.id])
            }
        }
    }
}
</script>

<style lang="less" scoped>
.input-date{
    &.el-input--prefix{
        :deep(.el-input__wrapper){
            border-radius: 0 4px 4px 0;
        }
    }
    /deep/ .el-input__inner{
        height:40px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
     &.el-input--suffix{
        :deep(.el-input__wrapper){
            border-radius: 0 4px 4px 0;
        }
    }
    .el-input-group__prepend,.el-input-group__append{
        --el-input-border-color:#dcdfe6;
        min-width:56px;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    :deep(.el-cascader){
        .el-input--suffix,.el-input .el-input__inner,.el-input{
            height:100%;
        }
    }
}
</style>
