<template>
  <div class="page-filter">
    <el-form inline :model="searchQuery" ref="searchQuery" :size="size">
      <!-- <el-row :gutter="10"> -->
        <template v-for="item in getConfigList()">
        <!-- <el-col  v-for="item in getConfigList()" :key="item.label"> -->
          <el-form-item
            v-if="item.type !== 'button'"
            :prop="item.value"
            :key="item.label"
            
            :label="!item.hideLabel ? item.label : '' "
            :label-width="!item.hideLabel ? (item.labelWidth ? item.labelWidth : '80px') : '0px'"
          >
            <!--选择框-->
            <el-select
              v-if="item.type === 'select'"
              v-model="searchQuery[item.value]"
              :placeholder="getPlaceholder(item)"
              :clearable="item.clearable === false ? item.clearable : true"
              :filterable="item.filterable === false ? item.filterable : true"
              @change="handleEvent(item.event)">
              <el-option
                v-for="(childItem, childIndex) in listTypeInfo[item.list]"
                :key="childIndex"
                :label="childItem.key"
                :value="childItem.value">
              </el-option>
            </el-select>
						<!--级联选择框-->
						<el-cascader
              ref="elcascader"
							v-if="item.type === 'cascader'"
						  :props="cascaderProps"
              :clearable="item.clearable === false ? item.clearable : true"
              @change="handleChange"
              :show-all-levels="false"
              v-model="searchQuery[item.value]"
						/>
            <!--输入框-->
            <el-input
              v-if="item.type === 'input'"
              :type="item.type"
              v-model.trim="searchQuery[item.value]"
              :placeholder="getPlaceholder(item)"
              :clearable="item.clearable === false ? item.clearable : true"
              @focus="handleEvent(item.event)">
            </el-input>
            <!--日期选择框-->
            <el-date-picker
              v-if="item.type === 'date'"
              v-model="searchQuery[item.value]"
              value-format="yyyy-MM-dd"
              :picker-options="item.datePickerOptions ? (item.datePickerOptions === 'pickerOptionsStart' ? pickerOptionsStart : pickerOptionsEnd) : datePickerOptions"
              :type="item.dateType"
              :clearable="item.clearable === false ? item.clearable : true"
              :placeholder="getPlaceholder(item)"
              @focus="handleEvent(item.event)"
            />
          </el-form-item>
          <template v-else>
            <el-form-item label-width="0px" :key="item.label">
              <!--按钮-->
              <el-button
                :type="item.btType"
                :icon="item.icon"
                :size="item.size"
                v-has="item.has ? item.has : ''"
                @click="handleClick(item.event)">
                {{ item.label }}
              </el-button>
            </el-form-item>
          </template>
        <!-- </el-col> -->
      <!-- </el-row> -->
      </template>
    </el-form>
  </div>
</template>

<script>
export default{
  name:'PageFilter',
  props:{
    //相关列表
    listTypeInfo:{
      type:Object,
      default: ()=>{
        return {}
      }
    },
    //过滤器列表
    filterList:{
      type:Array,
      default: ()=>{
        return []
      }
    },
    //表单尺寸
    size:{
      type: String,
      default: 'medium'
    },
    //参数
    query:{
      type:Object,
      default: ()=>{
        return {}
      }
    },
    //label宽度
    labelWidth:{
      type:String,
      default: '80px'
    }
  },
  data(){
    return{
      //时间相关设置
      datePickerOptions: {
        disabledDate (time) {
          //大于当前的时间都不能选 (+十分钟让点击此刻的时候可以选择到当前时间)
          return time.getTime() > +new Date() + 1000 * 600 * 1
        }
      },
      pickerOptionsStart:{
        //结束时间不能大于开始时间
        disabledDate: time => {
          if(this.searchQuery.endDate){
            return time.getTime() >  new Date(this.searchQuery.endDate).getTime();
          }
        }
      },
      pickerOptionsEnd:{
        disabledDate: time => {
          return time.getTime() < new Date(this.searchQuery.startDate).getTime();
        }
      },
      searchQuery:{},
      flag:'inner', // 内 inner  外outside
			cascaderProps:{
			  checkStrictly:true,
			  lazy:true
			}
    }
  },
  watch:{
    searchQuery:{
      handler:function(val){
        // 传入参数修改，不派发
        if (this.flag === 'outside') {
          this.flag = 'inner'
          return
        }
        //修改传入进来的参数
        this.$emit('update:query', { ...this.query, ...val })
      },
      deep:true
    },
    query(val){
      this.flag = 'outside' // 标识为传入参数修改
      this.searchQuery = val
    },
  },
  mounted(){
    this.initParams()
    setInterval(function() {
      NodeList.prototype.forEach = Array.prototype.forEach
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
  },
  methods:{
    //初始化过滤参数
    initParams(){
      const obj = {}
      for(const key in this.query){
        // if(this.query[key]){
          obj[key] = this.query[key]
        // }
      }
      this.searchQuery = obj
    },
    //获取列表
    getConfigList(){
      return this.filterList.filter(item =>!item.hasOwnProperty('show')||(item.show&&item.hasOwnProperty('show')))
    },
    //获取placeholder显示
    getPlaceholder(row){
      let placeholder
      let type = row.type
      switch(type){
        case 'input': case 'textarea':
          placeholder = `请输入${row.label}`
          break
        case 'select': case 'date': case 'time': case 'treeselect':
          placeholder = `请选择${row.label}`
          break
        default:
          placeholder = row.label
      }
      return placeholder
    },
    //派发按钮点击事件
    handleClick(event){
      this.$emit('handleClick', event)
    },
    //绑定相关事件
    handleEvent(){
      this.$emit('handleEvent', event)
    },
    handleChange(val){
      if(val){
        this.searchQuery.user_dept = val[val.length-1]
      }else{
        this.$delete(this.searchQuery,'user_dept')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-cascader-panel{
    .el-radio__inner{
      border: 0px;
    }
    .el-radio__input.is-checked .el-radio__inner{
      background:none;
    }
    .el-radio{
      height: 100%;
      width: 150px;
      position: absolute;
      z-index: 10;
    }
  }
  /deep/ .el-icon-date:before{
    color: #fff;
  }
</style>