<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="30%"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm">
      <!-- 模板选择 -->
      <template #templateId="{ model }">
        <span style="display: none">{{ getFieldOrg(model['organizationId']) }}</span>
        <Select
          v-model:value="model['templateId']"
          placeholder="请选择模板"
          style="width: 100%"
          :options="
            selectTemplateOptions?.filter((item) => item.platform === model['platform']) || []
          "
          @change="handleTemplateChange"
          v-bind="createPickerSearch()"
          :disabled="templateDisabled"
        />
      </template>
      <!-- 产品选择 -->
      <template #productIds="{ model }">
        <SelectDeviceProfile
          v-if="model['templateId']"
          ref="selectDeviceProfileRef"
          :selectOptions="selectOptions"
          :organizationId="model?.['organizationId']"
        />
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, Ref, onMounted, nextTick, watch } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { Select } from 'ant-design-vue';
  import { formSchema, PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from './center.data';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { useMessage } from '/@/hooks/web/useMessage';
  import {
    saveOrUpdateConfigurationCenter,
    getPage,
  } from '/@/api/configuration/center/configurationCenter';
  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
  import { buildUUID } from '/@/utils/uuid';
  import SelectDeviceProfile from './components/SelectDeviceProfile.vue';
  import { createPickerSearch } from '/@/utils/pickerSearch';
  import type { queryPageParams } from '/@/api/configuration/center/model/configurationCenterModal';
  import { getDeviceProfile } from '/@/api/alarm/position';

  export default defineComponent({
    name: 'ConfigurationDrawer',
    components: { BasicDrawer, BasicForm, SelectDeviceProfile, Select },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const isUpdate = ref(true);

      const selectDeviceProfileRef = ref<InstanceType<typeof SelectDeviceProfile>>();

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

      const updateEnableTemplate = async (enable: number, disabled: boolean) => {
        await setFieldsValue({
          enableTemplate: enable,
        });
        await updateSchema({
          field: 'enableTemplate',
          componentProps: ({ formActionType }) => {
            return {
              disabled,
              checkedValue: 1,
              unCheckedValue: 0,
              checkedChildren: '开',
              unCheckedChildren: '关',
              onChange: () => {
                formActionType.setFieldsValue({
                  productIds: [],
                  templateId: null,
                  productId: undefined,
                });
              },
            };
          },
        });
        await updateSchema({
          field: 'organizationId',
          componentProps: () => {
            return {
              disabled,
            };
          },
        });
      };

      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        await nextTick();
        await resetFields();
        setDrawerProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;
        selectDeviceProfileRef.value?.retValue();
        await updateEnableTemplate(0, false);
        templateDisabled.value = false;
        if (unref(isUpdate)) {
          if (data.record.thumbnail) {
            data.record.thumbnail = [
              { uid: buildUUID(), name: 'name', url: data.record.thumbnail } as FileItem,
            ];
          }
          if (data.record.organizationDTO) {
            organizationIdStr.value = data.record['organizationId'];
            await setFieldsValue(data.record);
          } else {
            Reflect.deleteProperty(data.record, 'organizationId');
            await setFieldsValue(data.record);
          }
          // 业务 编辑如果有templateId 则启用模板开关禁用,模板不能选择，产品和设备可以选择
          if (Reflect.get(data.record, 'templateId')) {
            await updateEnableTemplate(1, true);
            templateDisabled.value = true;
            //回显产品和设备
            const { productAndDevice } = data.record;
            selectOptions.value = productAndDevice?.map((item) => ({
              label: item.name,
              value: item.profileId,
            }));
            selectDeviceProfileRef.value?.setValue(productAndDevice);
          } else {
            const productAndDevice = data.record['productAndDevice'];
            setFieldsValue({
              productId: productAndDevice?.map((item) => item.profileId),
            });
          }
        }
      });

      //新增修改
      const templateDisabled = ref(false);
      onMounted(() => {
        getTemplate(
          {
            page: 1,
            pageSize: 30,
          },
          null
        );
      });

      const selectTemplateOptions: Ref<any[]> = ref([]);

      const organizationIdStr = ref('');

      const getFieldOrg = (org: string) => (organizationIdStr.value = org);

      watch(
        () => organizationIdStr.value,
        (newValue) => {
          getTemplate(
            {
              page: 1,
              pageSize: 30,
            },
            newValue
          );
          if (!isUpdate.value) {
            setFieldsValue({
              templateId: null,
            });
          }
        }
      );

      const getTemplate = async (params: queryPageParams, organizationId) => {
        const { items } = await getPage({ ...params, isTemplate: 1, organizationId });
        selectTemplateOptions.value = items.map((item) => ({
          ...item,
          label: item.name,
          value: item.id,
        }));
      };
      const selectOptions: Ref<any[]> = ref([]);

      const handleTemplateChange = async (_, option) => {
        clearValidate('templateId');
        const { productAndDevice } = option;
        setFieldsValue({ platform: option?.platform });
        await nextTick();
        // 赋值
        selectDeviceProfileRef.value?.setFieldsValue(
          productAndDevice?.map((item) => ({
            label: item.profileName || item.name,
            value: item.profileId,
            transportType: item?.transportType,
            deviceType: item?.deviceType,
          }))
        );
      };
      //

      const getTitle = computed(() => (!unref(isUpdate) ? '新增组态中心' : '编辑组态中心'));

      const getDefaultContent = (platform: Platform) => {
        if (platform === Platform.PC) {
          return PC_DEFAULT_CONTENT;
        }
        return PHONE_DEFAULT_CONTENT;
      };

      // 获取产品
      const getCurrentAllProduct = async (products: string[]) => {
        const resp = (await getDeviceProfile()) as any;
        if (!resp) return;
        const values = resp?.map((item) => ({
          name: item.name,
          profileId: item.id,
          deviceType: item.deviceType,
          transportType: item.transportType,
        }));
        return values.filter((item) => products?.includes(item.profileId));
      };

      async function handleSubmit() {
        try {
          const { createMessage } = useMessage();
          const values = await validate();
          if (!values) return;
          const selectDevice = selectDeviceProfileRef.value?.getSelectDevice();
          if (values['enableTemplate'] === 1) {
            if (!values['templateId']) return createMessage.error('未选择模板');
            // 业务 启用模板，产品和设备必填
            if (values['templateId']) {
              values.templateId = values['templateId'];
              if (Array.isArray(selectDevice) && selectDevice.length == 0)
                return createMessage.error('您已经选择了模板，但产品或者设备未选择');
              if (
                selectDevice?.some(
                  (item) =>
                    !item.name ||
                    item.deviceList.includes('' || undefined) ||
                    item.deviceList.length == 0
                )
              ) {
                return createMessage.error('您已经选择了模板，但产品或者设备未选择');
              }
              values.productAndDevice = selectDevice;
            }
          } else {
            const { productId } = values;
            values.productAndDevice = await getCurrentAllProduct(productId);
            Reflect.deleteProperty(values, 'productId');
          }
          if (Reflect.has(values, 'thumbnail')) {
            const file = (values.thumbnail || []).at(0) || {};
            values.thumbnail = file.url || null;
          }
          setDrawerProps({ confirmLoading: true });
          let saveMessage = '添加成功';
          let updateMessage = '修改成功';
          values.defaultContent = getDefaultContent(values.platform);
          await saveOrUpdateConfigurationCenter(values, unref(isUpdate));
          closeDrawer();
          emit('success');
          createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
        } finally {
          setDrawerProps({ confirmLoading: false });
        }
      }

      return {
        getTitle,
        registerDrawer,
        registerForm,
        handleSubmit,
        selectOptions,
        selectTemplateOptions,
        handleTemplateChange,
        createPickerSearch,
        selectDeviceProfileRef,
        templateDisabled,
        getFieldOrg,
      };
    },
  });
</script>