<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { Button, Tooltip, Modal, message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';

  import { MainPage } from '/@/components/MainPage';
  import { authorizeClassDeleteApi, authorizeClassListApi } from '/@/api/authorize/class';
  import HandleClass from '/@/views/authorization/components/class/HandleClass.vue';

  const router = useRouter();

  onMounted(() => {
    initTableData();
  });

  const tableData = ref<any[]>([]);

  const tableLoading = ref(false);

  const initTableData = async () => {
    try {
      tableLoading.value = true;
      const res = await authorizeClassListApi({});
      tableData.value = res;
      tableLoading.value = false;
    } catch (e) {
      console.log(e);
      tableLoading.value = false;
    }
  };

  const columns = [
    { title: '接口分类名称', dataIndex: 'name', key: 'name', visible: true },
    { title: '接口分类排序', dataIndex: 'sort', key: 'sort', visible: true },
    // {
    //   title: '备注',
    //   key: 'note',
    //   width: '240px',
    //   visible: true,
    // },
    {
      title: '操作',
      fixed: 'right',
      key: 'action',
      width: '260px',
      visible: true,
    },
  ];

  const deleteBtn = (row: any) => {
    Modal.confirm({
      title: '系统提示',
      content: `确定要删除接口分类${row.name}吗？`,
      okText: '是否提交',
      onOk: async () => {
        try {
          const res = await authorizeClassDeleteApi(row.id);
          console.log(res);
          message.success('删除成功');
          initTableData();
        } catch (e) {
          console.log(e);
        }
      },
    });
  };

  const handleClassRef = ref();
  const updateBtn = (row) => {
    handleClassRef.value.open(row);
  };

  const detailBtn = (row: any) => {
    router.push({ path: `/authorization/interface`, query: { id: row.id } });
  };

  const selectedRowKeys = ref([]);

  const onSelectChange = (newSelectedRowKeys) => {
    console.log(newSelectedRowKeys);
  };
</script>

<template>
  <div>
    <MainPage
      :columns="columns"
      name="接口分类管理"
      :tableData="tableData"
      @refresh="initTableData"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :scroll="{ x: 'max-content' }"
      rowKey="id"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #searchForm>
        <Button type="primary" style="margin: 0 5px" @click="updateBtn({})">新增</Button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'note'">
          <Tooltip>
            <template #title>{{ record?.tsReason }}</template>
            <div class="two-overflow">{{ record?.tsReason }}</div>
          </Tooltip>
        </template>
        <template v-else-if="column.key === 'action'">
          <Button type="link" @click="detailBtn(record)">接口</Button>
          <Button type="link" @click="updateBtn(record)">编辑</Button>
          <Button type="link" style="color: red" @click="deleteBtn(record)">删除</Button>
        </template>
      </template>
    </MainPage>
    <HandleClass ref="handleClassRef" @initTableData="initTableData" />
  </div>
</template>
