<template>
  <div class="box-main">
    <MomTable
      ref="MomTable"
      row-key="id"
      :columns="columns"
      :data-source="tableData"
      :query-param="queryParam"
      :query-param-item="queryParamItem"
      :action-buttons="actionButtons"
      :page.sync="page"
      :total="total"
      @search="searchPageData"
      @delete="handleDelete"
    >
      <div v-if="hasAuth('ROLE_MANAGEMENT:ADD')" slot="toolbar">
        <SelectUser
          ref="selectUser"
          :show-clear="false"
          :exclude-admin="'Y'"
          :default-selected-keys="allUserList"
          @confirm="getReturnData"
        >
          <div class="button-top-table">
            <a-button> <a-icon type="plus" /> {{ $t("ADD") }} </a-button>
          </div>
        </SelectUser>
      </div>
      <span slot="enableFlag" slot-scope="text, record">
        <span v-if="record.enableFlag == 'Y'" style="color: #0fd19c">{{
          getAttrValue(statusList, record.enableFlag)
        }}</span>
        <span v-else style="color: #d45f5f">{{
          getAttrValue(statusList, record.enableFlag)
        }}</span>
      </span>
      <span slot="sex" slot-scope="text">
        {{ getAttrValue(sexTypeList, text) }}
      </span>
      <span slot="userType" slot-scope="text">
        {{ getAttrValue(typeList, text) }}
      </span>
    </MomTable>
  </div>
</template>

<script>
import ApiConstant from "@/api/ApiConstant";
import SelectUser from "@/components/SelectUser";

export default {
  components: { SelectUser },
  data() {
    return {
      sexTypeList: [], // 用户性别列表
      statusList: [], // 用户状态列表
      typeList: [], // 用户类型列表
      tableData: [],
      page: 1, // 页码
      total: 20, // 每页个数
      title: "", // 弹框的标题
      dialogVisble: false, // 弹框的显示 隐藏
      params: {
        role_code: "",
      },
      // 查询的表单的配置项
      queryParam: {
        roleName: "",
        userName: "", // 用户名
        employeeNo: "", // 关联员工工号
        name: "", // 姓名
      },
      actionButtons: ["delete"],
      allUserList: [], // 当前角色下所有的用户列表
      sortParams: null,
    };
  },
  computed: {
    // 表格查询配置
    queryParamItem() {
      return {
        roleName: {
          label: this.$t("ROLE_NAME"), // 角色名称
          disabled: true,
        },
        userName: {
          label: this.$t("USER_NAME"), // 用户名
        },
        employeeNo: {
          label: this.$t("EMPLOYEE_NO"), // 员工工号
        },
        name: {
          label: this.$t("USER_REAL_NAME"), // 姓名
        },
      };
    },
    // 表格的配置项
    columns() {
      return [
        {
          dataIndex: "userName",
          title: () => this.$t("USER_NAME"),
          width: 120,
        },
        {
          dataIndex: "employeeNo",
          sorter: false,
          title: () => this.$t("EMPLOYEE_NO"),
          width: 120,
        },
        {
          dataIndex: "name",
          title: () => this.$t("USER_REAL_NAME"),
          width: 120,
        },
        {
          dataIndex: "sex",
          width: 88,
          sorter: false,
          title: () => this.$t("GENDER"),
          scopedSlots: { customRender: "sex" },
        },
        {
          dataIndex: "userType",
          sorter: false,
          title: () => this.$t("TYPE"),
          width: 125,
          scopedSlots: { customRender: "userType" },
        },
        {
          dataIndex: "enableFlag",
          width: 88,
          sorter: false,
          title: () => this.$t("STATUS"),
          scopedSlots: { customRender: "enableFlag" },
        },
        {
          dataIndex: "mobilePhone",
          sorter: false,
          title: () => this.$t("PHONE_NO"),
          width: 150,
        },
        {
          dataIndex: "deptName",
          title: () => this.$t("DEPARTMENT_NAME"),
          minWidth: 200,
        },
        {
          dataIndex: "postName",
          sorter: false,
          title: () => this.$t("POSITION_MAME"),
          width: 150,
        },
        {
          dataIndex: "updateBy",
          sorter: false,
          title: () => this.$t("UPDATE_BY"),
          width: 160,
        },
        {
          dataIndex: "updateTime",
          sorter: false,
          title: () => this.$t("UPDATE_TIME"),
          width: 168,
        },
      ];
    },
  },
  mounted() {
    this.queryParam.roleName = this.$route.query.roleName;
    this.initPageData();
    this.getAllUserList();
  },
  methods: {
    // 获取选择用户组件返回数据
    getReturnData(selectedRowKeys, selectedRows) {
      const arr = [];
      selectedRows?.forEach((item) => {
        arr.push(item.id);
      });
      this.$axios
        .post(`${ApiConstant.PREFIX_CORE}/api/sys/role/bind-user`, {
          roleId: this.$route.query.roleId,
          userIdList: arr,
        })
        .then((res) => {
          this.$refs.MomTable?.query();
          this.getAllUserList();
        });
    },
    // 获取数据字典
    initPageData() {
      Promise.all([
        this.getDictByCode("DIC:CORE:USER_TYPE"),
        this.getDictByCode("DIC:COMMON:ENABLE_FLAG"),
        this.getDictByCode("DIC:COMMON:SEX_TYPE"),
      ]).then(([typeRes, statusRes, sexTypeRes]) => {
        this.typeList = typeRes.data.data;
        this.statusList = statusRes.data.data;
        this.sexTypeList = sexTypeRes.data.data;
      });
    },
    // 后台分页查询
    searchPageData(params) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/role/user-search`, {
          params: {
            ...params,
            roleId: this.$route.query.roleId,
          },
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    getAllUserList() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/sys/role/user-list-all`, {
          params: { roleId: this.$route.query.roleId },
        })
        .then((res) => {
          this.allUserList = res.data.data.map((item) => item.userName);
        });
    },
    // 点击表格行内的删除
    handleDelete(row) {
      this.$confirm({
        title: this.$t("DELETE"),
        content: this.$t("DELETE_INFO"),
        okType: "warning",
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "close-circle",
        onOk: () => {
          const params = {
            roleId: this.$route.query.roleId,
            userIdList: [row.userId],
          };
          this.$axios
            .post(`${ApiConstant.PREFIX_CORE}/api/sys/role/unbind-user`, params)
            .then((res) => {
              this.$message.success(this.$t("SUBMITTED_FOR_DELETION"));
              this.$refs.MomTable?.query();
              this.getAllUserList();
            });
        },
      });
    },
  },
};
</script>
<style lang="less">
.icon-defult {
  font-weight: 600;
}
/deep/.ant-table td {
  white-space: nowrap;
}
</style>
