<script lang="ts" setup>
  import { ref } from 'vue';
  import { EdgeDeviceItemType, EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema } from './config';
  import { edgeDeviceDeleteDistribution, edgeDevicePage } from '/@/api/edgeManage/edgeInstance';
  import { useModal } from '/@/components/Modal';
  import { EdgeDeviceDistribution } from '../EdgeDeviceDistribution';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useRoute } from 'vue-router';
  import { useGo } from '/@/hooks/web/usePage';
  import { PageWrapper } from '/@/components/Page';

  defineEmits(['register']);

  defineProps({
    recordData: {
      type: Object as PropType<EdgeInstanceItemType>,
      default: () => {},
    },
  });

  const route = useRoute();

  const edgeId = ref(route.params?.id as string);

  const go = useGo();

  const { createMessage } = useMessage();

  const [registerEdgeDeviceDistributionModal, { openModal }] = useModal();

  const handleEventIsDistribution = () => {
    openModal(true, {
      record: 1,
    });
  };

  const handleEventIsCancelDistribution = async (record: EdgeDeviceItemType) => {
    await edgeDeviceDeleteDistribution(edgeId.value as string, record.id.id);
    createMessage.success('取消分配成功');
    reload();
  };

  const [registerTable, { reload }] = useTable({
    title: '边缘设备',
    columns,
    api: async ({ page, pageSize, textSearch }) => {
      const res = await edgeDevicePage(
        {
          page: page - 1 < 0 ? 0 : page - 1,
          pageSize,
          textSearch,
        },
        edgeId.value as string
      );
      return {
        total: res?.totalElements,
        items: res?.data,
      };
    },
    formConfig: {
      labelWidth: 100,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showIndexColumn: false,
    clickToRowSelect: false,
    showTableSetting: true,
    bordered: true,
    rowKey: 'name',
    actionColumn: {
      width: 140,
      title: '操作',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const handleEventIsSuccess = () => reload();

  function goBack() {
    go('/edge/edge_detail/' + edgeId.value);
  }

  function handleGoDeviceDetail(record: Recordable) {
    go(`/edge/edge_device/edge_device_detail/${record?.id?.id}/${edgeId.value}`);
  }
</script>

<template>
  <PageWrapper :title="`边缘设备`" contentBackground @back="goBack">
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleEventIsDistribution"> 分配设备 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '详情',
              icon: 'ant-design:eye-outlined',
              onClick: handleGoDeviceDetail.bind(null, record),
            },
            {
              label: '取消分配',
              icon: 'mdi:account-arrow-left',
              onClick: handleEventIsCancelDistribution.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <EdgeDeviceDistribution
      @register="registerEdgeDeviceDistributionModal"
      :edgeId="edgeId"
      @success="handleEventIsSuccess"
    />
  </PageWrapper>
</template>

<style lang="less" scoped></style>