<template>
  <div class="search">
    <el-form :inline="true" :model="searchParams" size="small">
      <el-form-item label="考核指标">
        <el-select v-model="searchParams.quota">
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="考核内容:">
        <el-input
          placeholder="请输入考核内容"
          clearable
          v-model="searchParams.content"
        ></el-input>
      </el-form-item>
      <el-form-item label="参与部门:">
        <treeselect
          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-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: {
        department:'',
        quota: "",
        content: "",
      },
    };
  },
  created() {
    this.getDepartment(1);
  },
  methods: {
    ...mapActions({
      getDepartment: "base/getDepartment",
    }),
    clear() {
      this.searchParams = {
        quota: "",
        content: "",
        department: "",
      };
    },
    search() {
      this.$emit("search:task", this.searchParams);
    },
  },
  computed: {
    ...mapGetters(["formatDep"]),
  },
};
</script>

<style scoped>

</style>