<template>
  <div class="user-manage">
    <qm-low-form :params="searchParams" :fields="searchFields"></qm-low-form>
    <a-table :data-source="tableData" :columns="columns" size="middle" bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <qm-button type="link">启用</qm-button>
          <qm-button type="link">禁用</qm-button>
          <qm-button type="link" @click="resetPwd(record)">重置密码</qm-button>
        </template>
      </template>
    </a-table>
    <AddUserDialog v-model="showAddDialog" v-if="showAddDialog"></AddUserDialog>
    <ResetPasswordDialog
      v-model="showResetPwdDialog"
      v-if="showResetPwdDialog"
      :cur-row="curRow"
    ></ResetPasswordDialog>
  </div>
</template>
<script name="UserManage" lang="ts" setup>
import { ref } from "vue";
import AddUserDialog from "./AddUserDialog.vue";
import ResetPasswordDialog from "./ResetPasswordDialog.vue";
import type { TableColumnsType } from "@qmth/ui";
//todo 入参名
const searchParams = ref({
  a: "",
});
const searchFields = ref([
  {
    prop: "a",
    type: "select",
    colSpan: 3,
    label: "角色",
  },
  {
    type: "buttons",
    colSpan: 5,
    children: [
      {
        attrs: {
          type: "default",
        },
        text: "查询",
      },
      {
        text: "新增用户",
        onClick: () => {
          showAddDialog.value = true;
        },
      },
    ],
  },
]);

const tableData = ref([{ a: 1, b: 2, c: 3 }]);
const columns: TableColumnsType = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 100,
    customRender: ({ index }) => `${index + 1}`,
  },
  {
    title: "角色",
    dataIndex: "a",
  },
  {
    title: "账号",
    dataIndex: "b",
  },
  {
    title: "状态",
    dataIndex: "c",
  },
  {
    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;
};
</script>
<style lang="less" scoped>
.user-manage {
  padding: 0 20px 20px 20px;
}
</style>
