<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :destroy-on-close="true"
    :title="t('video.configuration.createGBTText')"
    width="30%"
    @ok="handleSubmit"
    wrapClassName="camera-configration-drawer"
  >
    <BasicForm @register="registerForm">
      <!-- 表单设备通道插槽 -->
      <template #deviceChannelsSlot="{ model }">
        <span class="hidden">{{ handleSelectOrg(model['organizationId']) }}</span>
        <SelectDevice ref="selectDeviceRef" :selectOptions="selectDeviceOptions" />
      </template>
    </BasicForm>
  </BasicDrawer>
</template>

<script lang="ts" setup name="GBTDrawer">
  import { ref, nextTick, onMounted, watch } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getStreamingMediaList, createGPTPostApi } from '/@/api/camera/cameraManager';
  import SelectDevice from './SelectDevice.vue';
  import { formGBTSchema, GBT28181DeviceSelectMethod, StreamInterface } from '../config.data';
  import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
  import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
  import { isArray } from '/@/utils/is';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const emits = defineEmits(['success', 'register']);

  const streamConfigOptions = ref<StreamInterface[]>([]);

  const selectDeviceOptions = ref<StreamInterface[]>([]);

  const orgId = ref('');

  const selectDeviceRef = ref<InstanceType<typeof SelectDevice>>();

  const { createMessage } = useMessage();

  const [registerForm, { validate, resetFields }] = useForm({
    labelWidth: 120,
    schemas: formGBTSchema,
    showActionButtonGroup: false,
  });

  const getStreamingMediaLists = async () => {
    const rest = await getStreamingMediaList({});
    streamConfigOptions.value = rest?.map(({ host: label, id: value, type }) => ({
      label,
      value,
      type,
    }));
  };

  onMounted(() => getStreamingMediaLists());

  const handleSelectOrg = (e) => (orgId.value = e);

  const getDeviceListByOrg = async (organizationId) => {
    const values = await getMeetTheConditionsDevice({
      organizationId,
      transportType: TransportTypeEnum.GBT28181,
    });
    selectDeviceOptions.value = values
      ? values.map((item) => ({
          label: item.alias || item.name,
          value: item.tbDeviceId,
          id: item.id,
          deviceProfileId: item.deviceProfileId,
        }))
      : [];
  };

  watch(
    () => orgId.value,
    (newValue) => {
      if (newValue) {
        //获取设备
        selectDeviceRef.value?.resetValue();
        getDeviceListByOrg(newValue);
      }
    },
    {
      immediate: true,
    }
  );

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    await resetFields();
    await nextTick();
    selectDeviceRef.value?.resetValue();
    const { record } = data || {};
    // 批量新增不需要回显
    return record;
  });

  const errorMessage = (errorText) => {
    createMessage.error(errorText);
    throw Error(errorText);
  };

  //验证视频通道号
  const validateChannelNos = (gbtDeviceDTOS) => {
    if (isArray(gbtDeviceDTOS) && gbtDeviceDTOS.length == 0) {
      errorMessage(t('common.placeSelectDeviceChannelNumber'));
    }
    gbtDeviceDTOS.some((deviceDTO) => {
      const channelNo = deviceDTO['channelNos'];
      if (!channelNo || (isArray(channelNo) && channelNo.length == 0)) {
        errorMessage(t('common.placeSelectChannelNumber'));
      }
    });
  };

  const handleSubmit = async () => {
    try {
      setDrawerProps({ confirmLoading: true });
      const values = await validate();
      if (!values) return;
      let gbtDeviceDTOS: Recordable[] | null = null;
      if (values.allDevice === GBT28181DeviceSelectMethod.PARTIAL) {
        gbtDeviceDTOS = selectDeviceRef.value?.getDeviceChannels() as any as Recordable[];
        validateChannelNos(gbtDeviceDTOS);
      }
      const mergeValues = {
        ...values,
        accessMode: 2,
        gbtDeviceDTOS,
      };
      await createGPTPostApi(mergeValues);
      createMessage.success(t('common.batchAdditionSuccessful'));
      closeDrawer();
      emits('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  };
</script>

<style lang="less" scoped>
  .camera-configration-drawer {
    .ant-input-number {
      width: 100% !important;
    }
  }
</style>