<script setup lang="ts">
import { onMounted, reactive, ref, useTemplateRef, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

import { useRequest } from '@/hooks/request';
import { useUserInfoStore } from '@/stores/user-info';
import { t } from '@/i18n';
import { equipmentDetails, getDeviceParams, noPaginationDevicesList } from '@/api';
import { OperatePermission } from '@/utils/permission-type';

import BasicInformation from '../create-device/BasicInformation.vue';
import DetailedInformation from '../create-device/DetailedInformation.vue';
import GatewayParameters from '../create-device/GatewayParameters.vue';

import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import type {
  AllDevicesList,
  AssociatedGatewayParameters,
  ConfigureDeviceParameters,
  CustomParametersItem,
  DeviceParamGroup,
  EquipmentInformationForm,
} from '@/types';

interface EquipmentDetailsItem {
  deviceTypeName?: string;
  deviceName?: string;
  groupName?: string;
  brandName?: string;
  modelName?: string;
  chillerType?: string;
  productionDate?: string;
  powerRating: string;
  refrigerantType?: string;
  refrigerantDosage?: string;
  nominalCoolingcapacity?: string;
  nominalcalorificvalue?: string;
  nominalCopRefrigeration?: string;
  nominalCopHeating?: string;
  chilledWaterRatedFlow?: string;
  coolingWaterRatedFlow?: string;
  motorCoolingMethod?: string;
  copCorrectionFactor?: string;
  numberUnitCircuits?: string;
  singleLoopCompressor?: string;
  frequencyConversion?: string;
  ratedVoltage?: string;
  inflowTemperature?: string;
  waterOutletTemperature?: string;
  relativeHumidityTemperature?: string;
  fanNumber?: string;
  waterFlowRate?: string;
  coolingCapacity?: string;
  inletPipeDiameter?: string;
  outletPipeDiameter?: string;
  ratedFlow?: string;
  ratedHead?: string;
  ratedCurrent?: string;
  revolutions?: string;
  imgUrl?: string;
  runningStatus?: number;
  errorStatus?: number;
  deviceType?: number;
  mainGroupName: string;
}

const columns = [
  {
    title: t('createDevice.gatewaySerialNumber'),
    dataIndex: 'snCode',
    key: 'snCode',
    ellipsis: true,
  },
  {
    title: t('createDevice.gatewayModel'),
    dataIndex: 'modelName',
    key: 'modelName',
    ellipsis: true,
  },
  {
    title: t('createDevice.physicalInterface'),
    dataIndex: 'linkName',
    key: 'linkName',
    ellipsis: true,
  },
  {
    title: t('createDevice.groupNumber'),
    dataIndex: 'group',
    key: 'group',
    ellipsis: true,
  },

  {
    title: t('createDevice.parameters'),
    key: 'tags',
    ellipsis: true,
  },
];

const devColumns = [
  {
    title: t('createDevice.equipmentParameterCoding'),
    dataIndex: 'deviceParamCode',
    key: 'deviceParamCode',
    ellipsis: true,
  },
  {
    title: t('createDevice.equipmentParameterName'),
    dataIndex: 'deviceParamName',
    key: 'deviceParamName',
    ellipsis: true,
  },
  {
    title: t('createDevice.gatewayParameterEncoding'),
    dataIndex: 'gatewayParamCode',
    ellipsis: true,
  },
  {
    title: t('createDevice.gatewayParameterName'),
    dataIndex: 'gatewayParamName',
    ellipsis: true,
  },
  {
    title: t('setupProtocol.protocolParamFields.unit'),
    dataIndex: 'unit',
    ellipsis: true,
  },
  {
    title: t('createDevice.groupName'),
    dataIndex: 'groupName',
    key: 'groupName',
    ellipsis: true,
  },
  {
    title: t('createDevice.whetherProcessData'),
    dataIndex: 'isProcessData',
    key: 'isProcessData',
    ellipsis: true,
  },
];

const customizationColumns = [
  {
    title: t('createDevice.equipmentSequenceNumber'),
    dataIndex: 'index',
    key: 'index',
    ellipsis: true,
  },
  {
    title: t('createDevice.equipmentParameterCoding'),
    dataIndex: 'deviceParamCode',
    key: 'deviceParamCode',
    ellipsis: true,
  },
  {
    title: t('createDevice.equipmentParameterName'),
    dataIndex: 'deviceParamName',
    key: 'deviceParamName',
    ellipsis: true,
  },
  {
    title: t('createDevice.customFormula'),
    dataIndex: 'customFormula',
    key: 'customFormula',
    ellipsis: true,
  },
  {
    title: t('common.unit'),
    dataIndex: 'unit',
    key: 'unit',
    ellipsis: true,
  },
  {
    title: t('createDevice.keepDecimalPlaces'),
    dataIndex: 'decimalDigits',
    key: 'decimalDigits',
    ellipsis: true,
  },
  {
    title: t('createDevice.groupName'),
    dataIndex: 'groupName',
    key: 'groupName',
    ellipsis: true,
  },
  {
    title: t('createDevice.whetherProcessData'),
    dataIndex: 'isProcessData',
    key: 'isProcessData',
    ellipsis: true,
  },
];

const { booleanPermission } = useUserInfoStore();
const route = useRoute();
const { isLoading, handleRequest } = useRequest();
const router = useRouter();
const devicesList = ref<AllDevicesList[]>([]);
const parameterVerificationList = ref<DeviceParamGroup[]>([]);
const showTabs = ref<boolean>(false);
const gatewayList = ref<AssociatedGatewayParameters[]>([]);
const gatewayData = ref<ConfigureDeviceParameters[]>([]);
const gatewayRemoteData = ref<ConfigureDeviceParameters[]>([]);
const customizationData = ref<CustomParametersItem[]>([]);
const agreementListKey = ref<string>('monitoring');
const editorEquipmentOpen = ref<boolean>(false);
let deviceId: number;

const basicInformationRefs = ref<FormInstance>();
const detailedInformationRefs = ref<FormInstance>();

const detailedInformationRef = useTemplateRef('detailedInformation');
const gatewayParametersRef = useTemplateRef('gatewayParameters');

const rules: Record<string, Rule[]> = {
  deviceData: [{ required: true, message: t('createDevice.pleaseEquipmentGroup'), trigger: 'change' }],
  deviceType: [{ required: true, message: t('createDevice.pleaseDeviceType'), trigger: 'change' }],
  deviceName: [{ required: true, message: t('createDevice.pleaseDeviceName'), trigger: 'change' }],
};

const rulesDetails: Record<string, Rule[]> = {
  brand: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  model: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  productionDate: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  chillerType: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  powerRating: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  refrigerantType: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  nominalCoolingcapacity: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  nominalCopRefrigeration: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  motorCoolingMethod: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  numberUnitCircuits: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  singleLoopCompressor: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  frequencyConversion: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  ratedVoltage: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  inflowTemperature: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  waterOutletTemperature: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  relativeHumidityTemperature: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  fanNumber: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  waterFlowRate: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  coolingCapacity: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  inletPipeDiameter: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  outletPipeDiameter: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  ratedFlow: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  ratedHead: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  ratedCurrent: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  revolutions: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
};

const equipmentInformationForm = reactive<EquipmentInformationForm>({
  groupId: 0,
  deviceData: [],
  deviceType: undefined,
  deviceName: '',
  brand: undefined,
  model: undefined,
  productionDate: undefined,
  chillerType: undefined,
  powerRating: '',
  refrigerantType: undefined,
  refrigerantDosage: undefined,
  nominalCoolingcapacity: undefined,
  nominalcalorificvalue: undefined,
  nominalCopRefrigeration: undefined,
  nominalCopHeating: undefined,
  chilledWaterRatedFlow: undefined,
  coolingWaterRatedFlow: undefined,
  motorCoolingMethod: undefined,
  copCorrectionFactor: undefined,
  numberUnitCircuits: undefined,
  singleLoopCompressor: undefined,
  frequencyConversion: undefined,
  ratedVoltage: undefined,
  inflowTemperature: undefined,
  waterOutletTemperature: undefined,
  relativeHumidityTemperature: undefined,
  fanNumber: undefined,
  waterFlowRate: undefined,
  coolingCapacity: undefined,
  inletPipeDiameter: undefined,
  outletPipeDiameter: undefined,
  ratedFlow: undefined,
  ratedHead: undefined,
  ratedCurrent: undefined,
  revolutions: undefined,
  status: '',
  remarks: '',
  devId: 0,
  imgUrl: '',
  id: undefined,
});

const equipmentDetailsItem = ref<EquipmentDetailsItem>({
  deviceTypeName: '',
  deviceName: '',
  groupName: '',
  brandName: '',
  modelName: '',
  chillerType: '',
  productionDate: '',
  powerRating: '',
  refrigerantType: '',
  refrigerantDosage: '',
  nominalCoolingcapacity: '',
  nominalcalorificvalue: '',
  nominalCopRefrigeration: '',
  nominalCopHeating: '',
  chilledWaterRatedFlow: '',
  coolingWaterRatedFlow: '',
  motorCoolingMethod: '',
  copCorrectionFactor: '',
  numberUnitCircuits: '',
  singleLoopCompressor: '',
  frequencyConversion: '',
  ratedVoltage: '',
  inflowTemperature: '',
  waterOutletTemperature: '',
  relativeHumidityTemperature: '',
  fanNumber: '',
  waterFlowRate: '',
  coolingCapacity: '',
  inletPipeDiameter: '',
  outletPipeDiameter: '',
  ratedFlow: '',
  ratedHead: '',
  ratedCurrent: '',
  revolutions: '',
  imgUrl: '',
  runningStatus: 0,
  errorStatus: 0,
  deviceType: 0,
  mainGroupName: '',
});

const colorShow = (value: number | string) => {
  if (value) {
    return 'color:#666666';
  } else {
    return 'color:#F56C6C';
  }
};

const selectDeviceId = () => {
  router.push(`/device-manage/device-list/equipment-details/${deviceId}`);
};

const switchDevices = (value: number) => {
  router.push(`/device-manage/device-list/equipment-details/${getPreviousIdById(devicesList.value, deviceId, value)}`);
};

const getPreviousIdById = (array: AllDevicesList[], targetId: number, value: number) => {
  for (let i = 0; i < array.length; i++) {
    if (array[i].id === targetId) {
      return array[obtainSubscript(i, array.length, value)].id;
    }
  }
  return null;
};

const obtainSubscript = (i: number, length: number, value: number) => {
  if (value === 1) {
    if (i === 0) {
      return length - 1;
    }
    return i - 1;
  } else {
    if (i + 1 === length) {
      return 0;
    }
    return i + 1;
  }
};

const addSwitchTabs = () => {
  showTabs.value = !showTabs.value;
};

const switchTabs = (value: number) => {
  if (value === 1) {
    return !showTabs.value ? 'select-but details-but' : 'details-but';
  } else {
    return showTabs.value ? 'select-but details-but' : 'details-but';
  }
};

const obtainDeviceDetails = (value: boolean) => {
  if (route.params.id) {
    deviceId = Number(route.params.id);
  }

  handleRequest(async () => {
    const { deviceQueryVo, gatewayInfoVos, protocolParamDeviceInfoVos, protocolParamCustomDevVos } =
      await equipmentDetails(deviceId);
    const {
      brandName,
      deviceName,
      deviceType,
      deviceTypeName,
      errorStatus,
      groupName,
      imgUrl,
      modelName,
      productionDate,
      runningStatus,
      deviceDetail,
      mainGroupId,
      groupId,
      id,
      mainGroupName,
    } = deviceQueryVo;

    const {
      chillerType,
      powerRating,
      refrigerantType,
      refrigerantDosage,
      nominalCoolingcapacity,
      nominalcalorificvalue,
      nominalCopRefrigeration,
      nominalCopHeating,
      chilledWaterRatedFlow,
      coolingWaterRatedFlow,
      motorCoolingMethod,
      copCorrectionFactor,
      numberUnitCircuits,
      singleLoopCompressor,
      frequencyConversion,
      ratedVoltage,
      inflowTemperature,
      waterOutletTemperature,
      relativeHumidityTemperature,
      fanNumber,
      waterFlowRate,
      coolingCapacity,
      inletPipeDiameter,
      outletPipeDiameter,
      ratedFlow,
      ratedHead,
      ratedCurrent,
      revolutions,
    } = JSON.parse(deviceDetail);

    Object.assign(equipmentDetailsItem.value, {
      brandName,
      deviceName,
      deviceType,
      deviceTypeName,
      errorStatus,
      groupName,
      mainGroupName,
      imgUrl: import.meta.env.VITE_IMG_API + '/' + imgUrl,
      modelName,
      productionDate,
      runningStatus,
      chillerType,
      powerRating,
      refrigerantType,
      refrigerantDosage,
      nominalCoolingcapacity,
      nominalcalorificvalue,
      nominalCopRefrigeration,
      nominalCopHeating,
      chilledWaterRatedFlow,
      coolingWaterRatedFlow,
      motorCoolingMethod,
      copCorrectionFactor,
      numberUnitCircuits,
      singleLoopCompressor,
      frequencyConversion,
      ratedVoltage,
      inflowTemperature,
      waterOutletTemperature,
      relativeHumidityTemperature,
      fanNumber,
      waterFlowRate,
      coolingCapacity,
      inletPipeDiameter,
      outletPipeDiameter,
      ratedFlow,
      ratedHead,
      ratedCurrent,
      revolutions,
    });

    Object.assign(equipmentInformationForm, {
      deviceData: [mainGroupId, groupId],
      brand: brandName,
      model: modelName,
      deviceName,
      deviceType,
      productionDate: dayjs(productionDate, 'YYYY-MM-DD'),
      chillerType,
      powerRating,
      refrigerantType,
      refrigerantDosage,
      nominalCoolingcapacity,
      nominalcalorificvalue,
      nominalCopRefrigeration,
      nominalCopHeating,
      chilledWaterRatedFlow,
      coolingWaterRatedFlow,
      motorCoolingMethod,
      copCorrectionFactor,
      numberUnitCircuits,
      singleLoopCompressor,
      frequencyConversion,
      ratedVoltage,
      inflowTemperature,
      waterOutletTemperature,
      relativeHumidityTemperature,
      fanNumber,
      waterFlowRate,
      coolingCapacity,
      inletPipeDiameter,
      outletPipeDiameter,
      ratedFlow,
      ratedHead,
      ratedCurrent,
      revolutions,
      imgUrl,
      devId: id,
      id,
    });
    if (value) {
      gatewayData.value = [];
      gatewayRemoteData.value = [];
      if (gatewayInfoVos.length) {
        gatewayList.value = gatewayInfoVos;
      } else {
        gatewayList.value = [];
      }
      if (protocolParamDeviceInfoVos.length) {
        protocolParamDeviceInfoVos.forEach((item) => {
          if (item.readWriteTypeCode === 'read_only') {
            gatewayData.value.push(item);
          } else if (item.readWriteTypeCode === 'read_write') {
            gatewayRemoteData.value.push(item);
          }
        });
      } else {
        gatewayData.value = [];
      }
      if (protocolParamCustomDevVos.length) {
        customizationData.value = protocolParamCustomDevVos;
      } else {
        customizationData.value = [];
      }
      parameterVerificationList.value = await getDeviceParams(deviceId);
      devicesList.value = await noPaginationDevicesList();
    }
  });
};

const exceptionalReturn = (value: string | number | undefined) => {
  if (value) {
    return value;
  } else {
    return '-';
  }
};
const editorEquipment = () => {
  obtainDeviceDetails(false);
  editorEquipmentOpen.value = true;
};
const editorSubmit = async () => {
  try {
    const allTasks = [
      basicInformationRefs.value?.validate() || Promise.resolve(),
      detailedInformationRefs.value?.validate() || Promise.resolve(),
    ];

    await Promise.all(allTasks);
    await detailedInformationRef.value?.finish?.();
    await gatewayParametersRef.value?.finish?.();

    editorEquipmentOpen.value = false;
    obtainDeviceDetails(true);
  } catch (err) {
    if (err instanceof Error) {
      message.error(err.message);
    }
    console.log('存在验证未通过的表单');
  }
};

watch(
  () => route.params.id,
  () => {
    obtainDeviceDetails(true);
  },
);

onMounted(() => {
  obtainDeviceDetails(true);
});

const goBack = () => {
  if (route.query.from === 'deviceWorkStatus' && route.query.groupId) {
    router.push({
      path: `/ai-smart-ctrl/device-group/${route.query.groupId}`,
      query: {
        tab: 'deviceWorkStatus',
        deviceType: route.query.deviceType,
      },
    });

    return;
  }

  router.push('/device-manage/device-list');
};
</script>

<template>
  <ASpin :spinning="isLoading">
    <div>
      <AFlex justify="space-between">
        <AFlex align="center">
          <div class="return" @click="goBack">
            <SvgIcon name="left" />
          </div>

          <div class="description">{{ $t('deviceList.equipmentDetails') }}</div>
        </AFlex>
        <div>
          <ASelect
            class="devices-select"
            v-model:value="deviceId"
            :options="devicesList"
            :field-names="{ label: 'deviceName', value: 'id' }"
            :placeholder="$t('common.plzSelect')"
            @change="selectDeviceId"
          />
          <AButton class="default-button previous" @click="switchDevices(1)">{{ $t('common.previous') }}</AButton>
          <AButton class="default-button" @click="switchDevices(2)">{{ $t('common.next') }}</AButton>
        </div>
      </AFlex>
      <AFlex class="equipment-details">
        <img class="equipment-details-img" :src="equipmentDetailsItem.imgUrl" alt="" />
        <div>
          <span class="equipment-name">{{ equipmentDetailsItem.deviceName }}</span>
          <div>
            <AFlex align="center">
              <div class="equipment-status">{{ $t('deviceList.operatingStatus') }}</div>
              <div v-if="equipmentDetailsItem.runningStatus == 2" class="tag-style success">{{ $t('common.run') }}</div>
              <div v-else-if="equipmentDetailsItem.runningStatus == 1" class="tag-style failure">
                {{ $t('common.shutDown') }}
              </div>
              <div v-else-if="equipmentDetailsItem.runningStatus == 0" class="tag-style default">
                {{ $t('common.offline') }}
              </div>
              <div v-else>--</div>
              <div class="equipment-status equipment-status-left">{{ $t('deviceList.faultCondition') }}</div>
              <div v-if="equipmentDetailsItem.errorStatus == 0" class="tag-style success">
                {{ $t('envMonitor.normal') }}
              </div>
              <div v-else-if="equipmentDetailsItem.errorStatus == 1" class="tag-style failure failure-width">
                {{ $t('deviceList.equipmentFailure') }}
              </div>
              <div v-else>--</div>
            </AFlex>
          </div>
        </div>
      </AFlex>

      <AFlex justify="space-between" align="center">
        <AFlex>
          <div :class="switchTabs(1)" @click="addSwitchTabs">{{ $t('deviceList.realTimeMonitoring') }}</div>
          <div :class="switchTabs(2)" @click="addSwitchTabs">{{ $t('deviceList.basicInformation') }}</div>
        </AFlex>
        <div @click="editorEquipment" v-if="booleanPermission(OperatePermission.编辑设备)">
          <AFlex v-if="showTabs" align="center" class="pointer">
            <SvgIcon name="edit-o" />
            <div class="editor-style">{{ $t('common.editor') }}</div>
          </AFlex>
        </div>
      </AFlex>

      <div class="details-data" v-if="!showTabs">
        <div v-for="item in parameterVerificationList" :key="item.id">
          <AFlex align="center" class="dev-bottom">
            <div class="details-icon"></div>
            <div class="details-header-text">{{ item.deviceParamGroupName }}</div>
          </AFlex>
          <AFlex wrap="wrap">
            <div v-for="ite in item.valueVos" :key="ite.valueId" class="details-text text-width">
              <span class="text-wrap" :style="colorShow(ite.value)">{{ ite.paramName }}:</span>
              <span class="details-content-color text-wrap"> {{ ite.value }}{{ ite.value ? ite.unit : '' }} </span>
            </div>
          </AFlex>
        </div>
      </div>

      <div v-else class="details-data">
        <AFlex align="center" class="dev-bottom">
          <div class="details-icon"></div>
          <div class="details-header-text">{{ $t('common.basicInfo') }}</div>
        </AFlex>
        <AFlex class="details-text basic-information">
          <AFlex align="center" class="text-width">
            <span
              >{{ $t('createDevice.equipmentGroup') }}:
              <span class="details-content-color">{{
                equipmentDetailsItem.mainGroupName + '/' + equipmentDetailsItem.groupName
              }}</span></span
            >
          </AFlex>
          <AFlex align="center" class="text-width">
            <span
              >{{ $t('energyAnalysis.deviceType') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.deviceTypeName }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width">
            <span
              >{{ $t('createDevice.deviceName') }}:<span class="details-content-color">{{
                equipmentDetailsItem.deviceName
              }}</span>
            </span>
          </AFlex>
        </AFlex>

        <AFlex align="center" class="dev-bottom">
          <div class="details-icon"></div>
          <div class="details-header-text">{{ $t('createDevice.detailedInformation') }}</div>
        </AFlex>
        <AFlex wrap="wrap" class="details-text">
          <AFlex align="center" class="text-width">
            <span
              >{{ t('createDevice.brand') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.brandName }}</span></span
            >
          </AFlex>
          <AFlex align="center" class="text-width">
            <span
              >{{ t('createDevice.modelNumber') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.modelName }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width">
            <span
              >{{ t('createDevice.manufacturingDate') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.productionDate }}</span>
            </span>
          </AFlex>
          <AFlex
            align="center"
            class="text-width"
            v-if="
              equipmentDetailsItem.deviceType === 9 ||
              equipmentDetailsItem.deviceType === 11 ||
              equipmentDetailsItem.deviceType === 12
            "
          >
            <span
              >{{ t('createDevice.frequencyConversion') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.frequencyConversion }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.chillerType') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.chillerType }}</span>
            </span>
          </AFlex>
          <AFlex
            align="center"
            class="text-width"
            v-if="
              equipmentDetailsItem.deviceType === 2 ||
              equipmentDetailsItem.deviceType === 9 ||
              equipmentDetailsItem.deviceType === 11 ||
              equipmentDetailsItem.deviceType === 12
            "
          >
            <span
              >{{ t('createDevice.ratedPower') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.powerRating }}</span>
            </span>
          </AFlex>
          <AFlex
            align="center"
            class="text-width"
            v-if="equipmentDetailsItem.deviceType === 11 || equipmentDetailsItem.deviceType === 12"
          >
            <span
              >{{ t('createDevice.ratedFlow') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.ratedFlow }}</span>
            </span>
          </AFlex>
          <AFlex
            align="center"
            class="text-width"
            v-if="equipmentDetailsItem.deviceType === 11 || equipmentDetailsItem.deviceType === 12"
          >
            <span
              >{{ t('createDevice.ratedHead') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.ratedHead }}</span>
            </span>
          </AFlex>
          <AFlex
            align="center"
            class="text-width"
            v-if="equipmentDetailsItem.deviceType === 11 || equipmentDetailsItem.deviceType === 12"
          >
            <span
              >{{ t('createDevice.ratedVoltage') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.ratedVoltage }}</span>
            </span>
          </AFlex>
          <AFlex
            align="center"
            class="text-width"
            v-if="equipmentDetailsItem.deviceType === 11 || equipmentDetailsItem.deviceType === 12"
          >
            <span
              >{{ t('createDevice.ratedCurrent') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.ratedCurrent }}</span>
            </span>
          </AFlex>
          <AFlex
            align="center"
            class="text-width"
            v-if="equipmentDetailsItem.deviceType === 11 || equipmentDetailsItem.deviceType === 12"
          >
            <span
              >{{ t('createDevice.revolutions') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.revolutions }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 9">
            <span
              >{{ t('createDevice.inflowTemperature') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.inflowTemperature }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 9">
            <span
              >{{ t('createDevice.waterOutletTemperature') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.waterOutletTemperature }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 9">
            <span
              >{{ t('createDevice.relativeHumidityTemperature') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.relativeHumidityTemperature }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 9">
            <span
              >{{ t('createDevice.fanNumber') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.fanNumber }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 9">
            <span
              >{{ t('createDevice.waterFlowRate') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.waterFlowRate }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 9">
            <span
              >{{ t('createDevice.coolingCapacity') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.coolingCapacity }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 9">
            <span
              >{{ t('createDevice.inletPipeDiameter') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.inletPipeDiameter }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 9">
            <span
              >{{ t('createDevice.outletPipeDiameter') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.outletPipeDiameter }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.refrigerantType') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.refrigerantType }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.refrigerantDosage') }}:
              <span class="details-content-color">{{ exceptionalReturn(equipmentDetailsItem.refrigerantDosage) }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.nominalCoolingcapacity') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.nominalCoolingcapacity }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.nominalcalorificvalue') }}:
              <span class="details-content-color">{{
                exceptionalReturn(equipmentDetailsItem.nominalcalorificvalue)
              }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.nominalCopRefrigeration') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.nominalCopRefrigeration }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.nominalCopHeating') }}:
              <span class="details-content-color">{{ exceptionalReturn(equipmentDetailsItem.nominalCopHeating) }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.chilledWaterRatedFlow') }}:
              <span class="details-content-color">{{
                exceptionalReturn(equipmentDetailsItem.chilledWaterRatedFlow)
              }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.coolingWaterRatedFlow') }}:
              <span class="details-content-color">{{
                exceptionalReturn(equipmentDetailsItem.coolingWaterRatedFlow)
              }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.motorCoolingMethod') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.motorCoolingMethod }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.copCorrectionFactor') }}:
              <span class="details-content-color">{{
                exceptionalReturn(equipmentDetailsItem.copCorrectionFactor)
              }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.numberUnitCircuits') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.numberUnitCircuits }}</span>
            </span>
          </AFlex>
          <AFlex align="center" class="text-width" v-if="equipmentDetailsItem.deviceType === 2">
            <span
              >{{ t('createDevice.singleLoopCompressor') }}:
              <span class="details-content-color">{{ equipmentDetailsItem.singleLoopCompressor }}</span>
            </span>
          </AFlex>
        </AFlex>

        <AFlex align="center" class="dev-margin">
          <div class="details-icon"></div>
          <div class="details-header-text">{{ $t('createDevice.associationGatewayParameters') }}</div>
        </AFlex>
        <ATable :columns="columns" :data-source="gatewayList" :pagination="false" />

        <AFlex align="center" class="dev-margin">
          <div class="details-icon"></div>
          <div class="details-header-text">{{ $t('createDevice.configureDeviceParameters') }}</div>
        </AFlex>
        <ATabs v-model:active-key="agreementListKey">
          <ATabPane key="monitoring" :tab="t('createDevice.dataMonitoring')">
            <ATable :columns="devColumns" :data-source="gatewayData" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'isProcessData'">
                  {{ record.isProcessData ? t('common.yes') : t('common.no') }}
                </template>
              </template>
            </ATable>
          </ATabPane>
          <ATabPane key="remote" :tab="t('createDevice.remoteControl')" force-render>
            <ATable :columns="devColumns" :data-source="gatewayRemoteData" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'isProcessData'">
                  {{ record.isProcessData ? t('common.yes') : t('common.no') }}
                </template>
              </template>
            </ATable>
          </ATabPane>
        </ATabs>

        <AFlex align="center" class="dev-margin">
          <div class="details-icon"></div>
          <div class="details-header-text">{{ $t('createDevice.customizedMonitoringParameters') }}</div>
        </AFlex>
        <ATable :columns="customizationColumns" :data-source="customizationData" :pagination="false">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'index'">
              {{ index + 1 }}
            </template>
            <template v-if="column.key === 'isProcessData'">
              {{ record.isProcessData ? t('common.yes') : t('common.no') }}
            </template>
          </template>
        </ATable>
      </div>

      <AModal
        v-model:open="editorEquipmentOpen"
        :title="t('createDevice.basicInformationEditing')"
        width="1140px"
        :mask-closable="false"
        @ok="editorSubmit"
      >
        <AFlex align="center" class="dev-bottom">
          <div class="details-icon"></div>
          <div class="details-header-text">{{ $t('common.basicInfo') }}</div>
        </AFlex>
        <AForm
          ref="basicInformationRefs"
          class="alarm-modal"
          :label-col="{ span: 5 }"
          :model="equipmentInformationForm"
          label-align="left"
          :rules="rules"
        >
          <BasicInformation
            v-if="editorEquipmentOpen"
            :form="equipmentInformationForm"
            :steps="[]"
            :step-index="2"
            :go-to-step="() => {}"
          />
        </AForm>

        <AFlex align="center" class="dev-bottom">
          <div class="details-icon"></div>
          <div class="details-header-text">{{ $t('createDevice.detailedInformation') }}</div>
        </AFlex>

        <AForm
          ref="detailedInformationRefs"
          class="alarm-modal"
          layout="vertical"
          :model="equipmentInformationForm"
          label-align="left"
          :rules="rulesDetails"
        >
          <DetailedInformation
            v-if="editorEquipmentOpen"
            ref="detailedInformation"
            :form="equipmentInformationForm"
            :steps="[]"
            :step-index="2"
            :go-to-step="() => {}"
          />
          <AFlex align="center" class="dev-margin">
            <div class="details-icon"></div>
            <div class="details-header-text">{{ $t('createDevice.associationGatewayParameters') }}</div>
          </AFlex>
          <GatewayParameters
            v-if="editorEquipmentOpen"
            ref="gatewayParameters"
            :form="equipmentInformationForm"
            :steps="[]"
            :step-index="2"
            :go-to-step="() => {}"
          />
        </AForm>
      </AModal>
    </div>
  </ASpin>
</template>

<style lang="scss" scoped>
.text-wrap {
  display: inline-block;

  // width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

.text-width {
  width: 315px;
  margin-bottom: 16px;
}

.pointer {
  cursor: pointer;
}

.editor-style {
  margin-right: 26px;
  margin-left: 5px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #666;
  text-align: left;
}

.dev-margin {
  margin-top: 40px;
  margin-bottom: 16px;
}

.dev-bottom {
  margin-bottom: 16px;
}

.detailed-information {
  width: 100%;
  margin-bottom: 16px;
}

.basic-information {
  width: 100%;
  margin-bottom: 24px;
}

.div-bottom {
  margin-right: 120px;
  margin-bottom: 40px;
}

.details-text {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #666;
  text-align: left;
}

.details-content-color {
  margin-left: 5px;
  color: #333;
}

.return {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
}

.description {
  margin-left: 16px;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  color: rgb(0 0 0 / 85%);
  text-align: left;
}

.previous {
  margin: 0 16px;
}

.devices-select {
  width: 192px;
  border-radius: 4px;
}

.equipment-details {
  height: 160px;
  padding: 16px;
  margin-top: 22px;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 16px;
}

.equipment-details-img {
  width: 192px;
  height: 128px;
  margin-right: 24px;
  border-radius: 12px;
}

.equipment-name {
  display: inline-block;
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #333;
  text-align: left;
}

.tag-style {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: 12px;
  border-radius: 4px;
}

.success {
  width: 40px;
  color: #52c41a;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.failure {
  width: 40px;
  color: #f5222d;
  background: #fff1f0;
  border: 1px solid #ffa39e;
}

.failure-width {
  width: 64px;
}

.default {
  width: 40px;
  color: #666;
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
}

.equipment-status {
  margin-right: 12px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #000;
  text-align: left;
}

.equipment-status-left {
  margin-left: 40px;
}

.details-but {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 40px;
  margin-right: 16px;
  color: var(--antd-color-primary-hover);
  cursor: pointer;
  background: rgb(50 186 192 / 15%);
  border-radius: 8px;
}

.select-but {
  color: #fff;
  background: var(--antd-color-primary-hover);
}

.details-data {
  padding: 24px;
  margin-top: 16px;
  background: #fff;
  border-radius: 16px;
}

.details-icon {
  width: 2px;
  height: 16px;
  margin-right: 8px;
  background: var(--antd-color-primary-hover);
}

.details-header-text {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: #000;
  text-align: left;
}
</style>
