<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="将设备分配给边缘"
    :canFullscreen="false"
    centered
    :minHeight="300"
    @ok="handleEventIsDistribution"
    @cancel="handleEventIsCancel"
    okText="分配"
  >
    <div class="!flex items-center gap-5">
      <span>分配设备</span>
      <Select
        v-if="edgeId"
        placeholder="请选择设备"
        v-model:value="deviceIds"
        class="!w-1/2"
        :options="selectOptions"
        v-bind="createPickerSearch()"
        mode="multiple"
        allowClear
      />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { edgeDeviceDistribution } from '/@/api/edgeManage/edgeInstance';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { onMounted, ref } from 'vue';
  import { edgeDeviceDistributionPage } from '/@/api/edgeManage/edgeInstance';
  import { Select } from 'ant-design-vue';
  import { isArray } from '/@/utils/is';
  import { createPickerSearch } from '/@/utils/pickerSearch';

  const emits = defineEmits(['success', 'register']);

  const { createMessage } = useMessage();

  const props = defineProps({
    edgeId: {
      type: String,
      default: '',
    },
  });

  const [registerModal, { closeModal }] = useModalInner((data) => {
    const { _ } = data;
    deviceIds.value = [];
    handleGetDeviceDistributionList();
  });

  const selectOptions = ref<{ label: string; value: string }[]>([]);

  const deviceIds = ref<string[]>([]);

  const handleGetDeviceDistributionList = async () => {
    const { data } = await edgeDeviceDistributionPage({ page: 0, pageSize: 50 });
    selectOptions.value = data?.map((dataItem: Recordable) => ({
      label: dataItem.alias || dataItem.name,
      value: dataItem.id.id,
    })) as { label: string; value: string }[];
  };

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

  const handleEventIsDistribution = async () => {
    if (!props.edgeId) return;
    if (!deviceIds.value) return createMessage.error('请选择设备');
    if (isArray(deviceIds.value) && deviceIds.value.length === 0)
      return createMessage.error('请选择设备');
    for (let item of deviceIds.value) await edgeDeviceDistribution(props?.edgeId, item);
    createMessage.success('分配成功');
    handleEventIsCancel();
    emits('success');
    handleGetDeviceDistributionList();
  };

  const handleEventIsCancel = () => {
    deviceIds.value.length = 0;
    closeModal();
  };
</script>