<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="tenantAdminDrawer"
    showFooter
    title="租户管理员"
    width="60%"
    @ok="handleSubmit"
  >
    <BasicTable
      @register="tenantAdminTable"
    >
      <template #toolbar>
        <a-button type="primary" @click="handleCreateTenantAdmin">新增租户管理员</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label:'短信激活',
              icon: 'ant-design:send-outlined',
              tooltip:'发送激活短信',
              ifShow:record.phoneNumber!=null&& !record.hasPassword,
              onClick: handleSendMsg.bind(null, record),
            },
            {
              label:'清除密码',
              icon: 'ant-design:clear-outlined',
              tooltip:'清除密码',
              ifShow: record.hasPassword,
              onClick: handleResetPassword.bind(null, record),
            },
             {
               label:'编辑',
               icon: 'clarity:note-edit-line',
               tooltip:'编辑',
               onClick: handleEdit.bind(null, record),
            },
             {
               label:'删除',
               icon: 'ant-design:delete-outlined',
               tooltip:'删除',
               color: 'error',
               popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
      <template #status="{ record }">
        <Tag
          :color="record.userStatusEnum==='NORMAL'?'green':(record.userStatusEnum==='DISABLED'?'red':'orange')">
          {{
            record.userStatusEnum === 'NORMAL' ? '正常' : (record.userStatusEnum === 'DISABLED' ? '已禁用' : '已过期')
          }}
        </Tag>
      </template>
    </BasicTable>
    <TenantAdminFormDrawer @register="tenantAdminFormDrawer" @success="handleSuccess"/>
  </BasicDrawer>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
import {BasicDrawer, useDrawer, useDrawerInner} from '/@/components/Drawer';
import {BasicColumn, BasicTable, TableAction, useTable} from '/@/components/Table';
import {
  deleteTenantAdmin,
  getTenantAdminPage,
  resetPassword,
  sendMessageOrEmail
} from "/@/api/tenant/tenantApi";
import {Tag} from 'ant-design-vue';
import TenantAdminFormDrawer from "./TenantAdminFormDrawer.vue"
import {MessageTypeEnum, SendResetPasswordEmailMsg} from "/@/api/tenant/tenantInfo";
import {useMessage} from "/@/hooks/web/useMessage";
import {RoleEnum} from "/@/enums/roleEnum";
export default defineComponent({
  name: 'TenantAdminDrawer',
  components: {
    BasicDrawer, BasicTable, TenantAdminFormDrawer, Tag, TableAction
  },
  setup() {
    const{createMessage} =useMessage();
    const [tenantAdminFormDrawer, {openDrawer: openTenantAdminFormDrawer}] = useDrawer();

    function handleCreateTenantAdmin() {
      openTenantAdminFormDrawer(true, {
        isUpdate: false,
        tenantCode: tenantCode
      });
    }

    function handleEdit(record: Recordable) {
      openTenantAdminFormDrawer(true, {
        isUpdate: true,
        record,
        tenantCode: tenantCode
      });
    }

    function handleDelete(record: Recordable) {
      deleteTenantAdmin([record.id]);
      createMessage.success("删除成功");
      handleSuccess();
    }

    function handleResetPassword(record: Recordable) {
      resetPassword(record.id);
      createMessage.success("清空密码成功");
      handleSuccess();
    }
    function handleSendMsg(record: Recordable) {
      const req = new SendResetPasswordEmailMsg(record.id, MessageTypeEnum.PHONE_MESSAGE)
      sendMessageOrEmail(req).then(()=>{
        createMessage.success("短信发送成功");
        handleSuccess();
      });
    }


    const tenantAdminColumns = [
      {
        title: '用户名',
        dataIndex: 'username',
        width: 50,
      },
      {
        title: '真实名字',
        dataIndex: 'realName',
        width: 50,
      },
      {
        title: '电话号码',
        dataIndex: 'phoneNumber',
        width: 50,
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        width: 70,
      },
      {
        title: '状态',
        dataIndex: 'userStatus',
        width: 30,
        slots: {customRender: 'status'},
      },
    ];
    const tenantCode = ref("");
    const [tenantAdminTable, {reload}] = useTable({
      api: getTenantAdminPage,
      columns: tenantAdminColumns as BasicColumn[],
      showTableSetting: true,
      bordered: true,
      showIndexColumn: false,
      searchInfo: {
        tenantCode: tenantCode,
        roleType: RoleEnum.ROLE_TENANT_ADMIN
      },
      actionColumn: {
        width: 100,
        title: '操作',
        dataIndex: 'action',
        slots: {customRender: 'action'},
        fixed: undefined,
      },
      tableSetting: {
        redo: true,
        size: false,
        setting: false
      }
    });
    //默认传递页面数据
    const [tenantAdminDrawer, {closeDrawer}] = useDrawerInner(async (data) => {
      tenantCode.value = data.record.tenantCode;
      await reload();
    });

    //提交按钮
    async function handleSubmit() {
      closeDrawer();//关闭侧框
    }

    function handleSuccess() {
      reload();
    }

    return {
      tenantAdminDrawer,
      handleCreateTenantAdmin,
      handleSubmit,
      tenantAdminTable,
      tenantCode,
      tenantAdminFormDrawer,
      handleSuccess,
      handleEdit,
      handleDelete,
      handleResetPassword,
      handleSendMsg

    };
  },
});
</script>