<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 HH:mm:ss"
            :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"
              :disabled="item.disabled"
              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>