<template>
    <el-container>
        <!--单个时间 start-->
        <div v-if="!isRange" class="date-picker-single">
            <!--日期-->
            <el-date-picker v-if="type != 'timePicker'" v-model="formData[formKey]"
                            :type="type" :value-format="datePattern" align="center"
                            :clearable="clearable" placeholder="选择日期" :disabled='disabled'
                            :style="{'width':getControlWidth()}" :popper-class="skinType === 'dark' ? 'listview-dark' : ''">
            </el-date-picker>
            <!--时间-->
            <el-time-picker v-if="type == 'timePicker'" v-model="formData[formKey]"
                            :format="datePattern" :value-format="datePattern" :clearable="clearable"
                            placeholder="选择时间" :disabled='disabled'
                            :style="{'width':getControlWidth()}" :popper-class="skinType === 'dark' ? 'listview-dark' : ''">
            </el-time-picker>
        </div>
        <!--单个时间 end-->

        <div v-if="isRange" class="date-picker-multiple">
            <div v-if="type != 'timePicker'" class="date">
                <el-date-picker v-model="formData[formKey][0]" :type="type" :value-format="datePattern" align="center"
                                :clearable="clearable" placeholder="开始日期" @change="changeDateEnd()"
                                :style="{'width':getControlWidth()}" :popper-class="skinType === 'dark' ? 'listview-dark' : ''">
                </el-date-picker> -
                <el-date-picker v-model="formData[formKey][1]" :type="type" :value-format="datePattern" align="center"
                                :clearable="clearable" :picker-options="datePickerOptions" placeholder="结束日期"
                                :style="{'width':getControlWidth()}" :popper-class="skinType === 'dark' ? 'listview-dark' : ''">
                </el-date-picker>
            </div>

            <div v-if="type == 'timePicker'" class="time">
                <el-time-picker v-model="formData[formKey][0]" :format="datePattern" :value-format="datePattern"
                                :clearable="clearable" placeholder="开始时间" @change="changeDateEnd()"
                                :style="{'width':getControlWidth()}" :popper-class="skinType === 'dark' ? 'listview-dark' : ''">
                </el-time-picker> -
                <el-time-picker v-model="formData[formKey][1]" :format="datePattern" :value-format="datePattern"
                                :clearable="clearable" placeholder="结束时间" :picker-options="{selectableRange:'17:00:00 - 23:00:00'}"
                                :style="{'width':getControlWidth()}" :popper-class="skinType === 'dark' ? 'listview-dark' : ''">
                </el-time-picker>
            </div>
        </div>
    </el-container>
</template>

<script>
    export default {
        name: "pl-date-time-picker",
        props:{
            isRange:{type:Boolean,default:false},//是否是区间
            type:{type:String,default: "",require:true},//日期时间控件类型
            formData:{type:Object,default:() => {return {};}},//绑定值对象
            formKey:{type:String,default:"",require: true},//绑定值对应的键
            datePattern:{type:String,default:""},//日期时间格式
            clearable:{type:Boolean,default:true},//是否可清除
            searchBoxWidth:{type:String,default:"",require: false},//搜索框宽度
            disabled:{type:Boolean,default:false},
            skinType: {type: String, default: ""},
        },
        data(){
            return {
                datePickerOptions:{},
                timePickerOptions:{},
            }
        },

        created(){
            this.setDatePicker();
            this.setTimePicker();
        },

        methods:{
            setDatePicker(){
                let vm = this;
                vm.datePickerOptions = {
                    disabledDate(time) {
                        let timeStr = vm.DATE_UTIL.formaterDateOrTime(time,vm.datePattern);
                        return timeStr < vm.formData[vm.formKey][0];
                    }
                }
            },

            setTimePicker(){
                let time="";
                if( this.formData[this.formKey] != undefined){
                    time=this.formData[this.formKey][0];
                }
                if(this.datePattern == 'HH:mm'){
                    time += ":00 - 23:59:00";
                }else if(this.datePattern == 'HH'){
                    time += ":00:00 - 23:00:00";
                }
                this.timePickerOptions = {
                    selectableRange: time
                };
            },

            changeDateEnd(){
                if(this.formData[this.formKey][0] > this.formData[this.formKey][1]){
                    let arr = [this.formData[this.formKey][0],""];
                    this.$set(this.formData,this.formKey,arr);
                }

                if(this.type == 'timePicker'){
                    this.setTimePicker();
                }
            },
            getControlWidth(){
                let width = "218px";
                if(this.searchBoxWidth){
                    width = this.searchBoxWidth+'px';
                    return width;
                }

                if((this.datePattern || "").toUpperCase() == 'YYYY-MM-DD'
                    || (this.datePattern || "").toUpperCase() == 'YYYY-MM'
                    || (this.datePattern || "").toUpperCase() == 'YYYY'){
                    width = '140px';
                }
                return  width;
            }
        }

    }
</script>

<style scoped>

</style>
