<template>
  <div>
    <base-layout
      ref="baseLayout"
      :buttonList="buttonList"
      @onFuncBtn="onFuncBtn"
      :isPage="true"
      @pageChange="handlePageChange"
      :queryShow="false"
      :searchShow="false"
    >
      <div slot="main" slot-scope="{ tableHeight }">
        <base-table
          ref="baseTable"
          :showIndex="true"
          :tabLoading.sync="tabLoading"
          :tableData="tableData"
          :tableHeight="tableHeight"
          :tableColumn="tableColumnData"
          :funWidth="180"
          :funData="funData"
          @onFunc="onFunc"
          @onRowClick="handleShow"
        >
          <template v-slot:state="{ row }">
            <div style="width: 100%">
              <span v-if="row.state == '1'" style="color: #75c560">启用</span>
              <span v-else style="color: #f56c6c">停用</span>
            </div>
          </template>
        </base-table>
      </div>
    </base-layout>
    <right-dialog ref="rightDialog" @resetTable="resetTable"></right-dialog>
  </div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import rightDialog from "./rightDialog";
import configData from "./configData";
import { authApi } from "@/api/apis/auth";
export default {
  components: {
    baseLayout,
    baseTable,
    rightDialog,
  },
  data() {
    return {
      buttonList: [
        {
          menuName: "新增",
          icon: "el-icon-plus",
          btnFunction: "add",
        },
        {
          menuName: "刷新",
          icon: "el-icon-refresh",
        },
      ],
      funData: [
        {
          color: "#3CA2E1",
          text: "编辑",
        },
        {
          color: "#ff0000",
          text: "删除",
        },
      ],
      tabLoading: false,
      tableData: [],
      tableColumnData: configData.tableColumnData,
      pageModel: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化页面
    async init() {
      this.tabLoading = true;
      let params = {
        ...this.pageModel,
      };
      let res = await authApi("userService", "user", "queryList", "", params);
      this.tabLoading = false;
      if (res.status == "200") {
        this.tableData = res.attribute.list;
        this.$refs.baseLayout.setPageTotal(res.attribute.total);
      }
    },
    // 分页变化
    handlePageChange(val) {
      this.pageModel.pageNum = val.pageNum;
      this.pageModel.pageSize = val.pageSize;
      this.init();
    },
    onFuncBtn(btn) {
      this[btn.btnFunction]();
    },
    // 新增
    add() {
      this.$refs.rightDialog.openDialog("add");
    },
    // 重置表格数据
    resetTable() {
      this.pageModel.pageNum = 1;
      this.$refs.baseLayout.pageClear();
      this.init();
    },
    // 表格操作事件 编辑 删除
    onFunc(index, row) {
      // 编辑
      if (index == 0) {
        this.openLoading("detail")
        this.$refs.rightDialog.openDialog("edit", row);
      }
      // 删除
      if (index == 1) {
      this.$confirm("确认删除该内容吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.openLoading("del")
          this.deletePersonnel(row.id);
        })
        .catch(() => {
          this.$vmNews("取消操作", "info");
        });
      }
    },
    async deletePersonnel(id) {
      let params = {
        id: id,
      };
      let res = await authApi("userService", "user", "delectEntity", "", params);
      if (res.status == "200") {
        this.$vmNews("删除成功", "success");
        this.resetTable();
      }
    },
    // 查看
    handleShow(row) {
      this.openLoading("detail");
      this.$refs.rightDialog.openDialog("show", row);
    },
  },
};
</script>
<style scoped lang="scss"></style>
