<template>
  <div class="picker-container" :style="{'width':width,'height':height,'line-height':height}">
    <span class="label" v-if="label&&labelOption.length==0"
          :style="{'width':labelWidth,'height':height,'line-height':height}"><span v-if="required"
                                                                                   style="color: #FF7457;">*&nbsp;</span>{{label}}</span>
    <el-dropdown v-if="label&&labelOption.length>0" class="label"
                 :style="{'width':labelWidth,'height':height,'line-height':height}">
      <span class="el-dropdown-link" :style="{'width':labelWidth,'height':height,'line-height':height}">
        {{label}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item,index) in labelOption" :key="index">{{item.value?item.label:item}}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-date-picker
      :class="{'autoWidth':label}"
      :value="value"
      @input="onInput"
      @change="change"
      :type="type"
      :style="{width:label?'calc( 100% - '+labelWidth+')':'100%','height':height,'line-height':height}"
      :picker-options="pickerOptionsComputed"
      :placeholder="placeholder"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :clearable="clearable"
      :default-time="defaultTime"
      :value-format="valueFormat"
      :arrow-control="arrowControl"
      align="right">
    </el-date-picker>
  </div>
</template>

<script>
    export default {
        name: "index",
        props: {
            defaultTime:{
                type:Array,
                default() {
                    return ['00:00:00','23:59:59'];
                }
            },
            clearable:{
                type:Boolean,
                default:false
            },
            placeholder:{
                type:String,
                default:'选择时间'
            },
            valueFormat:{
                type:String,
                default:''
            },
            type:{
                type:String,
                default:''
            },
            value: {},
            defaultValue: {},
            //label下拉框的选项
            labelOption: {
                type: Array,
                default() {
                    return []
                }
            },
            //标签
            label: {
                type: String,
                default: ""
            },
            //标签宽度
            labelWidth: {
                type: String,
                default: "100px"
            },
            //宽度
            width: {
                type: String,
                default: '100%'
            },
            //高度
            height: {
                type: String,
                default: '36px'
            },
            //是否必填
            required: {
                type: Boolean,
                default: false
            },
            //是否必填
            arrowControl: {
                type: Boolean,
                default: false
            },
            pickerOptions: {},
        },
        methods: {
            onInput(v) {
                this.$emit('input',v)
            },
            change(v){
                this.$emit('change',v)
            },
        },
        watch:{
            pickerOptions:{
                immediate:true,
                deep:true,
                handler(){
                    console.log(this.pickerOptions)
                    if(this.pickerOptions!=undefined&&this.pickerOptions.minTime){
                        console.log(111)
                    }
                }
            }
        },
        computed:{
            //拦截传入的便捷日期配置，判断是否 日期时间选择器类型&&有便捷日期配置&&有范围限制属性
            pickerOptionsComputed(){
                if(this.type=='datetime'&&this.pickerOptions!=undefined&&this.pickerOptions.minTime){
                    //深拷贝配置，对时间进行限制
                    var obj=Object.assign({},this.pickerOptions);
                    obj.disabledDate=(time)=>{
                        return time.getTime()+1000*60*60*24-1 < this.pickerOptions.minTime.getTime();
                    }
                    return obj
                }else{
                    return this.pickerOptions
                }
            },

        },
        data() {
            return {
            };
        }
    }
</script>

<style scoped lang="scss">
  .picker-container {
    vertical-align: top;
    font-size: 0;
  }

  .label {
    display: inline-block;
    font-size: 14px;
    text-align: right;
    padding-right: 12px;
    box-sizing: border-box;
    vertical-align: top;

    /deep/ {
      .el-icon--right {
        margin-left: 2px;
      }
    }
  }

  .el-input__inner {
    height: 100%;
    line-height: 100%;
  }

  /deep/ {
    /*.el-date-editor .el-range-separator{*/
    /*  line-height: 80%;*/
    /*}*/
    .el-date-editor .el-range-input, .el-date-editor .el-range-separator {
      font-size: 12px;
    }
    .el-input__inner {
      height: 100%;
      line-height: 100%;
    }
    .el-input {
      height: 100%;
      line-height: 100%;
    }
  }
</style>
