<template>
    <el-date-picker
        v-model="dataValue"
        v-if="isTimePickeArr.indexOf(format) <= '-1'"
        :format="format"
        :type="type"
        align="left"
        :value-format="valueFormat"
        :picker-options="dateOptions"
        :disabled="disabled"
        :editable="editable"
        :placeholder="placeholder"
        :size="size"
        @change="onChange"
        :popper-class="skinType === 'dark' ? 'listview-dark' : ''">
    </el-date-picker>
    <el-time-picker
        v-else
        v-model="dataValue"
        :size="size"
        :format="format"
        :type="type"
        align="left"
        :value-format="valueFormat"
        :picker-options="dateOptions"
        :disabled="disabled"
        :editable="editable"
        @change="onChange"
        :popper-class="skinType === 'dark' ? 'listview-dark' : ''">
    </el-time-picker>
</template>

<script>
    export default {
        name: "pl-date-picker",
        props: {
            format:{
                required:false,
                default:'yyyy-MM-dd'
            },
            type:{
                required: false,
                default: ""
            },
            value: {
                required: false,
                default: ""
            },
            valueFormat:{
                required:false,
                default:''
            },
            disabled:{
                required:false,
                default:false
            },
            editable:{
                required:false,
                default:false
            },
            maxDate:{
                required:false,
                default:''
            },
            minDate:{
                required:false,
                default:''
            },
            size:{
                required:false,
                default:'small'
            },
            placeholder:{
                required:false,
                default:'请输入日期'
            },
            isContainsMaxDate:{
                type:String,
                default:"1"
            }, //包含最大时间
            isContainsMinDate:{
                type:String,
                default:"1"
            },
            skinType: {type: String, default: ""},
        },
        data() {
            return {
                // 需要定义个内部变量接收传入的值，选择下拉框的时候改的也是这个值，如果不用内部变量接收的情况下，直接改传入的value的值会报警告
                dataValue: this.value,
                dateOptions: this.beginDate(),
                isTimePickeArr:["HH:mm:ss","HH:mm","HH"],
            };
        },
        watch: {
            value() {
                this.dataValue = this.value;
            },
            maxDate(){

            },
            minDate(){

            }
        },
        created() {
            this.initDataSelect();
        },

        methods: {

            /**
             * 加载数据字典下拉框
             */
            initDataSelect() {
                let vm = this;
            },
            onChange() {
                // 把值通过返回给父组件的值
                this.$emit('input', this.dataValue);
                this.$emit('change', this.dataValue);
            },
            clickDatePick(maxDate,minDate){
                let vm = this;
            },

            beginDate(){
                let vm = this;
                return {
                    disabledDate(time){
                        if(vm.maxDate && !vm.minDate){
                              if(vm.isContainsMaxDate == '1'){
                                  return time.getTime() >= new Date(vm.maxDate).getTime();
                              }else {
                                  return time.getTime() > new Date(vm.maxDate).getTime();
                              }
                        }else if(!vm.maxDate && vm.minDate){
                            if(vm.isContainsMinDate == '1'){
                                return time.getTime() <= new Date(vm.minDate).getTime() - 86400000;
                            }else {
                                return time.getTime() < new Date(vm.minDate).getTime();
                            }
                        }else if(vm.maxDate && vm.minDate){
                            if(vm.isContainsMaxDate == '1' && vm.isContainsMinDate == '1'){
                                return !(time.getTime() <= new Date(vm.maxDate).getTime() &&  time.getTime() >= (new Date(vm.minDate).getTime() - 86400000));
                            }else if(vm.isContainsMaxDate == '1' && vm.isContainsMinDate == '0') {
                                return !(time.getTime() <= new Date(vm.maxDate).getTime() && time.getTime() > (new Date(vm.minDate).getTime()));
                            }else if(vm.isContainsMaxDate == '0' && vm.isContainsMinDate == '1'){
                                return !(time.getTime() <= new Date(vm.maxDate).getTime()-86400000 &&  time.getTime() >= (new Date(vm.minDate).getTime() - 86400000));
                            }else if(vm.isContainsMaxDate == '0' && vm.isContainsMinDate == '0'){
                                return !(time.getTime() <= new Date(vm.maxDate).getTime()-86400000 &&  time.getTime() >= (new Date(vm.minDate).getTime()));
                            }
                        }
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>
