<template>
<!-- 部门管理 -->
  <div class="page">
    <el-card :body-style="{ padding: '5px' }" style="margin-bottom:5px">
      <t-search :search="search" @searchClick="searchClick" />
    </el-card>
    <el-card :body-style="{ padding: '5px' }">
      <t-table :loading="loading" :tableData="tableData" :pagination="page"
        @getData="getData" @edit="edit" />
    </el-card>
    <add-dia :isEdit="isEdit" :form="form" :selectId="selectId" :addStatus="addStatus" @cancel="cancel"
      @getData="getData" />
  </div>
</template>
<script>
  import tSearch from "./components/search";
  import tTable from "./components/table";
  import addDia from "./components/addDia";
  import {
    mapState,
    mapGetters,
    mapActions
  } from "vuex";
  import {
    clearObjValue
  } from "@/utils/common";
  export default {
    data() {
      return {
        search: {
          deptname: "",
        },
        form: {
          deptname: "",
          deptcode: "",
          description: "",
        },
        params: {},
        isEdit:false, // 是否是编辑
        selectId: null,
      };
    },
    computed: {
      ...mapState({
        tableData: (state) => state.dept.tableData,
        page: (state) => state.dept.page,
      }),
      loading: {
        get() {
          return this.$store.state.dept.loading;
        },
        set(val) {
          this.$store.state.dept.loading = val;
        }
      },
      addStatus: {
        get() {
          return this.$store.state.dept.addStatus;
        },
        set(val) {
          this.$store.state.dept.addStatus = val;
        },
      },
    },
    components: {
      tSearch,
      tTable,
      addDia,
    },
    methods: {
      //search集合
      searchClick(val) {
        switch (val) {
          case 1: // 查询
            this.getData();
            break;
          case 2: // 重置
            clearObjValue(this.search);
            break;
          case 3: // 新增
            this.addStatus = true;
            this.isEdit = false;
            break;
        }
      },
      //修改
      edit(item) {
        this.selectId = item.id;
        this.isEdit = true;
        for (let key in this.form) {
          for (let index in item) {
            if (key === index) {
              this.form[key] = item[key];
            }
          }
        }
        this.addStatus = true;
      },
      //获取表格信息
      getData() {
        this.params = {
          deptname: this.search.deptname,
          page: this.page.pageNum,
          limit: this.page.pageSize,
        };
        this.loading = true;
        this.$store.dispatch("dept/GetDepts", this.params).catch(err => {
          this.loading = false;
        });
      },
      cancel() {
        this.addStatus = false;
      },
    },
    created() {
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid"),
      }
      this.getData();
    },
  };

</script>
<style lang="scss" scoped>
  .page {
    padding: 5px;
  }

</style>
