<template>
  <div class="page">
    <el-card :body-style="{ padding: '5px' }" style="margin-bottom:5px">
      <t-search :showButtons='showButtons' :search="search" @searchClick="searchClick" />
    </el-card>
    <el-card :body-style="{ padding: '5px' }">
      <t-table :showButtons='showButtons' :loading="loading" :tableData="tableData" :pagination="page"
        @getData="getData" @edit="edit" />
    </el-card>
    <add-dia :title="title" :form="form" :form2="form2" :rules="rules" :selectId="selectId" :addStatus="addStatus" @cancel="cancel"
      @getData="getData" />
  </div>
</template>
<script>
import {updateMarkEnable} from "@/api/jurisdiction/user.js";
  import tSearch from "./components/search";
  import tTable from "./components/table";
  import addDia from "./components/addDia";
  import {
    mapState,
    mapGetters,
    mapActions
  } from "vuex";
  import {
    clearObjValue, message
  } from "@/utils/common";
  export default {
    data() {
      return {
        search: {
          userChnName: "",
        },
        form: {
          username: "",
          userChnName: "",
          phone: "",
          email: "",
          markEnable: 1,
          level:'',
          idCard:''
        },
        form2: { // 读卡器
          username: "",
          userChnName: "",
          phone: "",
          email: "",
          markEnable: 1,
          level:'',
          idCard:''
        },
        params: {},
        title: "",
        selectId: null,
      };
    },
    computed: {
      ...mapState({
        tableData: (state) => state.operator.tableData,
        page: (state) => state.operator.page,
        rules: (state) => state.operator.rules,
        showButtons: (state) => state.operator.showButtons,
      }),
      loading: {
        get() {
          return this.$store.state.operator.loading;
        },
        set(val) {
          this.$store.state.operator.loading = val;
        }
      },
      addStatus: {
        get() {
          return this.$store.state.operator.addStatus;
        },
        set(val) {
          this.$store.state.operator.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:
            for (let key in this.form) {
              if (key != "markEnable") {
                this.form[key] = "";
              }
            }
            this.addStatus = true;
            this.title = "新增";
            break;
          case 4:
            updateMarkEnable().then((res)=>{
              if(res.code == 100){
                message('success','用户启用成功',3000);
                this.getData();
              }
            })
            break;
        }
      },
      //修改
      edit(item) {
        this.selectId = item.id;
        this.title = "编辑";
        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 = {
          userChnName: this.search.userChnName,
          page: this.page.pageNum,
          limit: this.page.pageSize,
        };
        this.loading = true;
        this.$store.dispatch("operator/getUsers", this.params).catch(err => {
          this.loading = false;
        });
      },
      cancel() {
        this.addStatus = false;
      },
    },
    created() {
      clearObjValue(this.showButtons)
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid"),
      }
      this.$store.dispatch("operator/getButtonList", btnData);
      this.getData();
    },
  };

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

</style>
