<template>
  <div class="search">
    <el-form :inline="true" :model="searchParams" size="small">
      <template v-if="type == 1 || type == 2">
        <el-form-item label="一级指标:">
          <el-select
            filterable
            clearable
            v-model="searchParams.quota1"
            @change="getQuota2List(searchParams.quota1)"
            placeholder="请选择一级指标"
          >
            <el-option
              v-for="(item, index) of quota1"
              :key="index"
              :label="item.quota1"
              :value="item.quota1"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级指标:">
          <el-select
            filterable
            clearable
            v-model="searchParams.quota2"
            placeholder="请选择二级指标"
          >
            <el-option
              v-for="(item, index) of quota2"
              :key="index"
              :label="item.quota2"
              :value="item.quota2"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template v-if="type == 3">
        <el-form-item label="考核指标:">
          <el-select
            filterable
            clearable
            v-model="searchParams.quota"
            placeholder="请选择考核目标"
          >
            <el-option
              v-for="(item, index) of quota"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="考核内容:">
        <el-input
          placeholder="请输入考核内容"
          clearable
          v-model="searchParams.content"
        ></el-input>
      </el-form-item>
      <template v-if="type == 3">
        <el-form-item label="牵头单位:">
          <el-input
            placeholder="请输入牵头单位"
            v-model="searchParams.leaderUnit"
          ></el-input>
        </el-form-item>
      </template>
      <el-form-item label="牵头部门:">
        <treeselect
          :disable-branch-nodes="true"
          v-model="searchParams.leaderDept"
          :options="formatDep"
          placeholder="请选择牵头部门"
          :defaultExpandLevel="1"
          :normalizer="
            (d) => {
              return {
                id: d.id,
                label: d.name,
                children:
                  d.children && d.children.length > 0 ? d.children : undefined,
              };
            }
          "
        />
      </el-form-item>
      <el-form-item label="配合部门:">
        <treeselect
          :disable-branch-nodes="true"
          v-model="searchParams.cooperateDept"
          :options="formatDep"
          placeholder="请选择配合部门"
          :defaultExpandLevel="1"
          :normalizer="
            (d) => {
              return {
                id: d.id,
                label: d.name,
                children:
                  d.children && d.children.length > 0 ? d.children : undefined,
              };
            }
          "
        />
      </el-form-item>
      <el-button type="primary" size="small" @click="search">查询</el-button>
      <el-button
        type="default"
        size="small"
        @click="
          clear();
          search();
        "
        >清空</el-button
      >
    </el-form>
  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect"; // 下拉树
import { mapGetters, mapActions } from "vuex";
export default {
  props: {
    type: {
      type: Number,
      default() {
        return 1;
      },
    },
  },
  components: {
    Treeselect,
  },
  data() {
    return {
      searchParams: {
        quota1: "",
        quota2: "",
        leaderDept: undefined,
        cooperateDept: undefined,
        quota: "",
        content: "",
        leaderUnit: "",
      },
    };
  },
  created() {
    this.getQuota1List(this.type);
    this.getDepartment(1);
    this.getQuotaList();
  },
  methods: {
    ...mapActions({
      getQuota1List: "base/getQuota1List",
      getQuota2List: "base/getQuota2List",
      getDepartment: "base/getDepartment",
      getQuotaList: "base/getQuotaList",
    }),
    clear() {
      this.searchParams = {
        quota1: "",
        quota2: "",
        leaderDept: undefined,
        cooperateDept: undefined,
        quota: "",
        content: "",
        leaderUnit: "",
      };
    },
    search() {
      this.$emit("search:task", this.searchParams);
    },
  },
  computed: {
    ...mapGetters(["quota1", "quota2", "formatDep", "quota"]),
  },
  watch: {
    "searchParams.quota1"(val) {
      if (!val) {
        this.$store.commit("base/SET_QUOTAL2", []);
        this.$set(this.searchParams, "quota2", "");
      }
    },
  },
};
</script>

<style scoped>
</style>