<script lang="ts" setup>
  import { CSSProperties, h, 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 { Badge } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import { useI18n } from '/@/hooks/web/useI18n';

  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 { t } = useI18n();

  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(t('edge.instance.message.cancelAssignSuccess'));
    reload();
  };

  const AlarmDetailActionButton = ({ hasAlarm }: { hasAlarm?: boolean }) =>
    h(
      Badge,
      { offset: [0, -5] },
      {
        default: () => h('span', { style: { color: '#377dff' } }, t('edge.instance.text.detail')),
        count: () =>
          h(
            'div',
            {
              style: {
                visibility: hasAlarm ? 'visible' : 'hidden',
                width: '14px',
                height: '14px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                border: '1px solid #f46161',
                borderRadius: '50%',
              } as CSSProperties,
            },
            h(Icon, { icon: 'mdi:bell-warning', color: '#f46161', size: 12 })
          ),
      }
    );

  const [registerTable, { reload }] = useTable({
    title: t('edge.instance.text.edgeDevice'),
    columns,
    api: async ({ page, pageSize, textSearch }) => {
      const res = await edgeDevicePage(
        {
          page: page - 1 < 0 ? 0 : page - 1,
          pageSize,
          textSearch,
          sortProperty: 'createdTime',
          sortOrder: 'DESC',
        },
        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: t('edge.instance.text.action'),
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const handleEventIsSuccess = () => reload();

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

<template>
  <BasicTable :clickToRowSelect="false" @register="registerTable">
    <template #toolbar>
      <a-button type="primary" @click="handleEventIsDistribution">
        {{ t('edge.instance.action.assignDevice') }}
      </a-button>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            // label: '详情',
            label: AlarmDetailActionButton({ hasAlarm: !!record.alarmStatus }),
            icon: 'ant-design:eye-outlined',
            onClick: handleGoDeviceDetail.bind(null, record),
          },
          {
            label: t('edge.instance.action.cancelAssign'),
            icon: 'mdi:account-arrow-left',
            onClick: handleEventIsCancelDistribution.bind(null, record),
          },
        ]"
      />
    </template>
  </BasicTable>
  <EdgeDeviceDistribution
    @register="registerEdgeDeviceDistributionModal"
    :edgeId="edgeId"
    @success="handleEventIsSuccess"
  />
</template>

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