<template>
  <div class="part-box is-filter">
    <a-space class="filter-line" :size="12" wrap>
      <SelectRole
        v-model="searchModel.roleCode"
        placeholder="请选择"
        allow-clear
        prefix
      />
      <a-input
        v-model.trim="searchModel.loginName"
        placeholder="请输入"
        allow-clear
      >
        <template #prefix>账号</template>
      </a-input>
      <a-input v-model.trim="searchModel.name" placeholder="请输入" allow-clear>
        <template #prefix>用户名</template>
      </a-input>
      <a-button type="primary" @click="toPage(1)">查询</a-button>
    </a-space>
  </div>
  <div class="part-box">
    <a-space class="part-action" :size="12">
      <a-button type="primary" @click="toAdd(null)">新增</a-button>
    </a-space>

    <a-table
      class="page-table"
      :columns="columns"
      :data="dataList"
      :pagination="pagination"
      :scroll="{ x: 1200 }"
      :bordered="false"
    >
      <!-- <template #role="{ record }">
        {{ record.roleCode === 'ADMIN' ? '学校管理员' : '教学点管理员' }}
      </template> -->
      <template #action="{ record }">
        <a-button type="text" class="btn-primary" @click="toAdd(record)"
          >编辑</a-button
        >
        <a-button
          :class="record.enable ? 'btn-danger' : 'btn-primary'"
          type="text"
          @click="toEnable(record)"
          >{{ record.enable ? '禁用' : '启用' }}</a-button
        >
        <a-button type="text" class="btn-primary" @click="toReset(record)"
          >重置密码</a-button
        >
      </template>
    </a-table>

    <AddUserDialog
      v-if="showAddUserDialog"
      :cur-row="curRow"
      @close="showAddUserDialog = false"
      @success="
        () => {
          toPage(1);
          showAddUserDialog = false;
        }
      "
    />
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, computed, onMounted, watch } from 'vue';
  import { Message, TableColumnData } from '@arco-design/web-vue';
  import { getUserList, ableUser, resetUserPwd } from '@/api/order';
  import { TaskItem } from '@/api/types/order';
  import useTable from '@/hooks/table';
  import { useAppStore } from '@/store';
  import { modalConfirm } from '@/utils/arco';
  import AddUserDialog from './addUserDialog.vue';

  defineOptions({
    name: 'AccountManage',
  });

  const showAddUserDialog = ref(false);
  const appStore = useAppStore();
  appStore.setInfo({ breadcrumbs: ['系统设置', '账号管理'] });
  const curRow = ref<any>(null);
  const searchModel = reactive({
    roleCode: '',
    name: '',
    loginName: '',
  });

  const columns = computed<TableColumnData[]>(() => {
    return [
      {
        title: '账号',
        dataIndex: 'loginName',
      },
      {
        title: '用户名',
        dataIndex: 'name',
      },
      {
        title: '角色',
        dataIndex: 'roleName',
      },
      {
        title: '所属教学点',
        dataIndex: 'categoryName',
      },
      {
        title: '联系方式',
        dataIndex: 'mobile',
      },
      {
        title: '操作',
        slotName: 'action',
        width: 180,
        fixed: 'right',
        cellClass: 'action-column',
      },
    ];
  });
  const { dataList, pagination, toPage, getList } = useTable<{
    id: string;
    loginName: string;
    name: string;
    roleCode: string;
    categoryName: string;
    categoryId: string;
    mobile: string;
    enable: boolean;
  }>(getUserList, searchModel, true);

  const toAdd = (obj: any) => {
    curRow.value = obj || null;
    showAddUserDialog.value = true;
  };

  async function toEnable(row: any) {
    const action = row.enable ? '禁用' : '启用';
    const confirmRes = await modalConfirm(
      '提示',
      `确定要${action}用户【${row.name}】吗?`
    ).catch(() => false);
    if (confirmRes !== 'confirm') return;

    await ableUser({ id: row.id, enable: !row.enable });
    Message.success('操作成功！');
    getList();
  }

  async function toReset(row: any) {
    const confirmRes = await modalConfirm(
      '提示',
      `确定要重置账号【${row.loginName}】的密码吗?`
    ).catch(() => false);
    if (confirmRes !== 'confirm') return;
    await resetUserPwd({ id: row.id });
    Message.success('操作成功！');
    getList();
  }
</script>
