<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="t('common.assignDevices')"
    :canFullscreen="false"
    centered
    :minHeight="300"
    @ok="handleEventIsDistribution"
    @cancel="handleEventIsCancel"
    :okText="t('common.assign')"
  >
    <div class="!flex items-center gap-5">
      <BasicForm @register="register" class="device-picker" />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { createPickerSearch } from '/@/utils/pickerSearch';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicForm, useForm } from '/@/components/Form';
  import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
  import { findDictItemByCode } from '/@/api/system/dict';
  import { getOrganizationList } from '/@/api/system/system';
  import { DictEnum } from '/@/enums/dictEnum';
  import { copyTransFun } from '/@/utils/fnUtils';
  import { edgeDeviceDistribution } from '/@/api/edgeManage/edgeInstance';

  const { t } = useI18n();

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

  const { createMessage } = useMessage();

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

  const [registerModal, { closeModal }] = useModalInner(() => {
    resetFields();
  });

  const [register, { resetFields, validate, setFieldsValue }] = useForm({
    schemas: [
      {
        field: 'deviceType',
        component: 'ApiSelect',
        label: t('common.deviceTypeText'),
        required: true,
        componentProps: () => {
          return {
            api: findDictItemByCode,
            params: {
              dictCode: DictEnum.DEVICE_TYPE,
            },
            labelField: 'itemText',
            valueField: 'itemValue',
            ...createPickerSearch(),
            onChange() {
              setFieldsValue({ deviceId: [] });
            },
          };
        },
      },
      {
        field: 'organizationId',
        component: 'ApiTreeSelect',
        label: t('common.organizationId'),
        required: true,
        componentProps: () => {
          return {
            api: async () => {
              try {
                const data = await getOrganizationList();
                copyTransFun(data as any);
                return data;
              } catch (error) {
                console.error(error);
                return [];
              }
            },
            labelField: 'name',
            valueField: 'id',
            childField: 'children',
            dropdownStyle: { maxHeight: '300px' },
            getPopupContainer: () => document.body,
            onChange() {
              setFieldsValue({ deviceId: [] });
            },
          };
        },
      },
      {
        field: 'deviceId',
        label: t('common.device'),
        required: true,
        component: 'ApiSelect',
        componentProps: ({ formModel }) => {
          const deviceType = Reflect.get(formModel, 'deviceType');
          const organizationId = Reflect.get(formModel, 'organizationId');
          return {
            api: async () => {
              try {
                if (!organizationId) return [];
                const result = await getMeetTheConditionsDevice({
                  deviceType,
                  organizationId,
                  isEdgeDistribution: true,
                  edgeId: props.edgeId,
                  // isExcludeEdge: true,
                  isExcludeCloud: true,
                });
                return result.map((item) => ({
                  ...item,
                  value: item.tbDeviceId,
                  label: item.alias || item.name,
                }));
              } catch (error) {
                return [];
              }
            },
            mode: 'multiple',
            ...createPickerSearch(),
          };
        },
      },
    ],
    showActionButtonGroup: false,
  });

  const handleEventIsDistribution = async () => {
    if (!props.edgeId) return;
    const value = await validate();
    if (!value) return;
    console.warn(value['deviceId']);
    for (let item of value['deviceId']) await edgeDeviceDistribution(props?.edgeId, item);
    createMessage.success(t('common.assignSuccessful'));
    handleEventIsCancel();
    emits('success');
  };

  const handleEventIsCancel = () => {
    closeModal();
  };
</script>

<style lang="less" scoped>
  .device-picker {
    :deep(.ant-row) {
      width: 100%;
    }

    :deep(.ant-form-item-control-input-content) {
      div > div {
        width: 100%;
      }
    }
  }
</style>