<template>
  <!--引用表格-->
  <BasicTable @register="registerTable" :rowSelection="rowSelection">
    <!--插槽:table标题-->
    <template #tableTitle>
      <c-button type="primary" @click="openDialog({})" preIcon="ant-design:plus-outlined"> 新增</c-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="batchHandleDelete">
              <Icon icon="ant-design:delete-outlined" />
              删除
            </a-menu-item>
          </a-menu>
        </template>
        <c-button
          >批量操作
          <Icon icon="mdi:chevron-down" />
        </c-button>
      </a-dropdown>
    </template>
    <!--操作栏-->
    <template #action="{ record }">
      <Space :size="0">
        <PermissionButton
          type="link"
          :tooltip="{
            title: '编辑'
          }"
          @click="openDialog(record)"
        >
          <AIcon type="EditOutlined" />
        </PermissionButton>
        <!--        <PermissionButton-->
        <!--          type="link"-->
        <!--          :tooltip="{-->
        <!--            title: record?.typeId === 'rabbitmq' ? '暂不支持管理功能' : getRowStatus(record) ? '管理' : '请先启用数据源',-->
        <!--          }"-->
        <!--          @click="() => router.push(`/iot/DataSource/Management?id=${record.id}`)"-->
        <!--          :disabled="record?.typeId === 'rabbitmq' || !getRowStatus(record)"-->
        <!--        >-->
        <!--          <j-aIcon type="icon-ziyuankuguanli" />-->
        <!--        </PermissionButton>-->
        <PermissionButton
          type="link"
          :popConfirm="{
            title: `确定要${getRowStatus(record) ? '禁用' : '启用'}吗？`,
            onConfirm: () => clickChangeStatus(record)
          }"
          :tooltip="{
            title: getRowStatus(record) ? '禁用' : '启用'
          }"
        >
          <JAIcon :type="getRowStatus(record) ? 'StopOutlined' : 'PlayCircleOutlined'" />
        </PermissionButton>
        <PermissionButton
          type="link"
          :tooltip="{
            title: getRowStatus(record) ? '请先禁用，再删除' : '删除'
          }"
          :danger="true"
          :popConfirm="{
            title: `确认删除`,
            onConfirm: () => handleDelete(record)
          }"
          :disabled="getRowStatus(record)"
        >
          <AIcon type="DeleteOutlined" />
        </PermissionButton>
      </Space>
    </template>
  </BasicTable>
  <EditDialog v-if="dialog.visible" @cancel="cancel" :data="dialog.selectItem" @confirm="refresh" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { BasicTable, useListPage, PermissionButton } from '@jdlinker/ui';
  import { columns, searchFormSchema } from './data';
  import { list, deleteOne, batchDelete, changeStatus } from './service';
  import EditDialog from './components/EditDialog.vue';
  import { onlyMessage } from '@jdlinker/utils';
  // @ts-ignore
  import { Space, AIcon } from 'linker-ui-components';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const dialog = reactive({
    visible: false,
    selectItem: {} as any
  });
  //注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      title: '数据源管理',
      api: list,
      columns,
      formConfig: {
        schemas: searchFormSchema
      },
      actionColumn: {
        width: 180
      }
    }
  });

  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

  const getRowStatus = (record: any) => {
    return record?.state === 'enabled';
  };
  // 打开编辑弹窗
  const openDialog = (record: any | {}) => {
    dialog.selectItem = { shareConfig: {}, ...record };
    dialog.visible = true;
  };

  const clickChangeStatus = (row: any) => {
    const status: any = row?.state === 'enabled' ? 'disabled' : 'enabled';
    changeStatus(row?.id as string, status).then(() => {
      onlyMessage('操作成功');
      refresh();
    });
  };
  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }
  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
  }

  // 刷新列表
  const refresh = () => {
    reload();
    dialog.visible = false;
    dialog.selectItem = {};
  };
  const cancel = () => {
    dialog.visible = false;
    dialog.selectItem = {};
  };

  /**
   * 操作栏
   */
  // function getTableAction(record) {
  //   return [
  //     {
  //       icon: 'clarity:note-edit-line',
  //       tooltip: '编辑',
  //       onClick: handleEdit.bind(null, record),
  //     },
  //     {
  //       icon: 'ant-design:delete-outlined',
  //       color: 'error',
  //       tooltip: '删除',
  //       popConfirm: {
  //         title: '是否确认删除',
  //         placement: 'left',
  //         confirm: handleDelete.bind(null, record),
  //       },
  //     },
  //   ];
  // }
</script>
<style lang="less" scoped>
  :deep(.ant-btn) {
    padding: 4px 10px;
  }
</style>
