<template>
  <div class="user-manage">
    <qm-low-form :params="params" :fields="fields"></qm-low-form>
    <a-table
      :data-source="dataList"
      :columns="columns"
      size="middle"
      bordered
      :loading="loading"
      :pagination="pagination"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'enable'">
          <a-tag :bordered="false" color="success" v-if="record[column.key]"
            >启用</a-tag
          >
          <a-tag :bordered="false" color="error" v-if="!record[column.key]"
            >禁用</a-tag
          >
        </template>
        <template v-if="column.key === 'operation'">
          <qm-button
            type="link"
            :disabled="record.enable"
            @click="toggleStatus(record, true)"
            >启用</qm-button
          >
          <qm-button
            type="link"
            :disabled="!record.enable"
            @click="toggleStatus(record, false)"
            >禁用</qm-button
          >
          <qm-button type="link" @click="resetPwd(record)">重置密码</qm-button>
        </template>
      </template>
    </a-table>
    <AddUserDialog
      v-model="showAddDialog"
      v-if="showAddDialog"
      @success="toPage(1)"
    ></AddUserDialog>
    <ResetPasswordDialog
      v-model="showResetPwdDialog"
      v-if="showResetPwdDialog"
      :cur-row="curRow"
      @success="toPage(1)"
    ></ResetPasswordDialog>
  </div>
</template>
<script name="UserManage" lang="ts" setup>
import { ref, reactive } from "vue";
import AddUserDialog from "./AddUserDialog.vue";
import ResetPasswordDialog from "./ResetPasswordDialog.vue";
import type { TableColumnsType } from "@qmth/ui";
import useTable from "@/hooks/useTable";
import { getUserList } from "@/ap/baseDataConfig";
import { toggleUserStatus } from "@/ap/baseDataConfig";
import { ROLES, enum2Options } from "@/constants/enums";
const params = reactive({
  role: "",
});
const fields = ref([
  {
    prop: "role",
    type: "select",
    colSpan: 3,
    label: "角色",
    attrs: {
      options: enum2Options(ROLES),
      allowClear: true,
    },
  },
  {
    type: "buttons",
    colSpan: 5,
    children: [
      {
        attrs: {
          type: "default",
        },
        text: "查询",
        onClick: () => {
          toPage(1);
        },
      },
      {
        text: "新增用户",
        onClick: () => {
          showAddDialog.value = true;
        },
      },
    ],
  },
]);
const { dataList, pagination, loading, getList, toPage } = useTable(
  getUserList,
  params,
  true
);
const columns: TableColumnsType = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 100,
    customRender: ({ index }) => `${index + 1}`,
  },
  {
    title: "角色",
    dataIndex: "roleName",
  },
  {
    title: "账号",
    dataIndex: "loginName",
  },
  {
    title: "状态",
    dataIndex: "enable",
    key: "enable",
  },
  {
    title: "操作",
    key: "operation",
    width: 300,
  },
];

const showAddDialog = ref(false);
const curRow = ref();
const showResetPwdDialog = ref(false);
const resetPwd = (record: any) => {
  curRow.value = record;
  showResetPwdDialog.value = true;
};
const toggleStatus = (row: any, status: boolean) => {
  let str = status ? "启用" : "禁用";
  window.$confirm({
    title: "系统提示",
    content: `确认${str}该用户吗？`,
    onOk() {
      toggleUserStatus({ userId: row.id, enable: status }).then((res: any) => {
        window.$message.success("操作成功");
        toPage(1);
      });
    },
    onCancel() {
      console.log("Cancel");
    },
  });
};
</script>
<style lang="less" scoped>
.user-manage {
  padding: 0 20px 20px 20px;
}
</style>
