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

  import { MainPage } from '/@/components/MainPage';
  import HandleInterface from '/@/views/authorization/components/interface/HandleInterface.vue';
  import {
    authorizeClassItemDeleteApi,
    authorizeClassItemListApi,
  } from '/@/api/authorize/interface';

  const route = useRoute();

  onMounted(() => {
    classId.value = Number(route.query.id);
    initTableData();
  });

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

  const tableLoading = ref(false);

  const classId = ref<number>(0);

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

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

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

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

  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="updateBtn(record)">编辑</Button>
          <Button type="link" style="color: red" @click="deleteBtn(record)">删除</Button>
        </template>
      </template>
    </MainPage>
    <HandleInterface ref="handleInterfaceRef" @initTableData="initTableData" />
  </div>
</template>
