<template>
  <a-card class="container">
    <!-- 设备表单 -->
    <a-spin :loading="loading" style="width: 100%;height: auto;" :tip="$t('global.loading')">
      <a-form ref="formRef" :model="formData" :rules="formRule" auto-label-width>
        <a-space direction="vertical" :size="16">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-divider orientation="left">{{ $t('power.energy.device.deviceInfo') }}</a-divider>
              <!-- 设备名称 -->
              <a-form-item field="deviceName" :label="$t('power.energy.device.name')"
                           :validate-trigger="['change', 'blur', 'input']">
                <a-input v-model="formData.deviceName" allow-clear/>
              </a-form-item>

              <!-- 设备编号 -->
              <a-form-item field="deviceSn" class="star-from-item" :label="$t('power.energy.device.logicalCode')"
                           :validate-trigger="['change', 'blur', 'input']">
                <a-input disabled v-model="formData.deviceSn" allow-clear/>
              </a-form-item>

              <!-- 电站类型 -->
              <!-- <a-form-item field="stationType" label="电站类型">
              <a-select v-model="formData.stationType" placeholder="请选择电站类型" allow-clear>
                <a-option v-for="dict in sys_station_type" :key="dict.value" :label="dict.label"
                  :value="dict.value"></a-option>
              </a-select>
            </a-form-item> -->

              <!-- 用能类型 -->
              <a-form-item field="electricType" :label="$t('power.energy.device.type')">
                <a-select v-model="formData.electricType" :placeholder="$t('power.energy.device.selectType')"
                          allow-clear>
                  <a-option v-for="dict in sys_electric_type" :key="dict.value" :label="dict.label"
                            :value="Number(dict.value)"></a-option>
                </a-select>
              </a-form-item>

              <!-- 通讯设备 -->
              <a-form-item field="comDeviceId" :label="$t('power.energy.device.communication')">
                <!-- <a-tree-select allow-search v-model="formData.comDeviceId" :data="channelDeviceTreeData"
                placeholder="请选择通讯设备" allow-clear @change="handleChannelDeviceChange"
                @clear="handleChannelDeviceClear"></a-tree-select>
                </a-select> -->
                <a-select v-model="formData.comDeviceId" :options="channelDeviceData" @clear="handleChannelDeviceClear"
                          @change="handleChannelDeviceChange"
                          :placeholder="$t('power.energy.device.selectCommunication')" allow-clear
                          :fieldNames="{ value: 'id', label: 'deviceName' }">
                </a-select>
              </a-form-item>

              <!-- 设备地址-->
              <a-form-item v-show="formData.connectModel == 'MODBUSTCP' || formData.connectModel == 'MODBUSRTU'"
                           field="sbdz" :label="$t('power.energy.device.address')">
                <a-input v-model="formData.sbdz" allow-clear/>
              </a-form-item>

              <!-- 设备表号 -->
              <a-form-item v-if="formData.connectModel == 'DLT645' || formData.connectModel == 'TianGang'"
                           field="meterNumber" :label="$t('power.energy.device.deviceNum')">
                <a-input v-model="formData.meterNumber" allow-clear/>
              </a-form-item>

              <!-- 设备类型 -->
              <a-form-item field="proType" :label="$t('power.energy.device.deviceType')">
                <a-tree-select allow-search v-model="formData.proType" :data="deviceTypeData"
                               :placeholder="$t('power.energy.device.selectDeviceType')"
                               :fieldNames="{
                    key: 'id', title: 'groupName', children: 'children'
                  }" allow-clear></a-tree-select>
              </a-form-item>

              <!-- 设备分组 -->
              <a-form-item field="groupId" :label="$t('power.energy.device.deviceGroup')">
                <a-tree-select allow-search v-model="formData.groupId" :data="deviceGroupData"
                               :placeholder="$t('power.energy.device.selectDeviceGroup')"
                               :fieldNames="{
                    key: 'id', title: 'groupName', children: 'children'
                  }" allow-clear></a-tree-select>
              </a-form-item>

              <!-- 生产厂家 -->
              <a-form-item field="proFactory" :label="$t('power.energy.device.manufacturer')">
                <a-tree-select allow-search v-model="formData.proFactory" :data="companyData"
                               :placeholder="$t('power.energy.device.selectManufacturer')"
                               allow-clear :field-names="{ key: 'id', title: 'companyName' }"></a-tree-select>
              </a-form-item>

              <!-- 产品型号 -->
              <a-form-item field="proModel" :label="$t('power.energy.device.model')"
                           :validate-trigger="['change', 'blur', 'input']">
                <a-input v-model="formData.proModel" allow-clear/>
              </a-form-item>

              <!-- 产品版本 -->
              <a-form-item field="proVer" :label="$t('power.energy.device.version')"
                           :validate-trigger="['change', 'blur', 'input']">
                <a-input v-model="formData.proVer" allow-clear/>
              </a-form-item>

              <!-- 购买价格 -->
              <a-form-item field="buyPrice" :label="$t('power.energy.device.price')"
                           :validate-trigger="['change', 'blur', 'input']">
                <a-input-number v-model="formData.buyPrice" allow-clear :placeholder="$t('power.energy.device.pleaseNum')">
                  <template #append>
                    {{ $t('power.energy.device.priceUnit') }}
                  </template>
                </a-input-number>
              </a-form-item>

              <!-- 产品sn号 -->
              <a-form-item field="proSn" :label="$t('power.energy.device.sn')"
                           :validate-trigger="['change', 'blur', 'input']">
                <a-input v-model="formData.proSn" allow-clear/>
              </a-form-item>

              <!-- 安规国家 -->
              <a-form-item field="agStandard" :label="$t('power.energy.device.country')"
                           :validate-trigger="['change', 'blur', 'input']">
                <a-input v-model="formData.agStandard" allow-clear/>
              </a-form-item>

              <!-- 额定电压 -->
              <a-form-item field="ratedVol" :label="$t('power.energy.device.ratedVoltage')">
                <a-select v-model="formData.ratedVol" :placeholder="$t('power.energy.device.selectRatedVoltage')"
                          allow-clear>
                  <a-option v-for="dict in sys_rated_vol" :key="dict.value" :label="dict.label"
                            :value="Number(dict.value)"></a-option>
                </a-select>
              </a-form-item>

              <!-- 额定电流 -->
              <a-form-item field="ratedEle" :label="$t('power.energy.device.ratedCurrent')">
                <a-input-number v-model="formData.ratedEle" allow-clear
                                :placeholder="$t('power.energy.device.pleaseNum')">
                  <template #append>
                    A
                  </template>
                </a-input-number>
              </a-form-item>

              <!-- 额定功率 -->
              <a-form-item field="ratedPower" :label="$t('pv.device.ratedPower')">
                <a-input-number v-model="formData.ratedPower" allow-clear
                                :placeholder="$t('power.energy.device.pleaseNum')">
                  <template #append>
                    KW
                  </template>
                </a-input-number>
              </a-form-item>

              <!-- 电流负载率 -->
              <a-form-item field="eleLoadRate" :label="$t('power.energy.device.currentLoadRate')">
                <a-input-number v-model="formData.eleLoadRate" allow-clear
                                :placeholder="$t('power.energy.device.pleaseNum')">
                  <template #append>
                    %
                  </template>
                </a-input-number>
              </a-form-item>

              <!-- 是否关口表 -->
<!--              <a-form-item field="isPass" :label="$t('power.energy.device.isClose')">-->
<!--                <a-switch :checked-value="1" :unchecked-value="0" v-model="formData.isPass"/>-->
<!--              </a-form-item>-->

              <!-- 电能质量分析 -->
<!--              <a-form-item field="isAnalysisEnergy" :label="$t('power.energy.device.qualityScore')">-->
<!--                <a-switch :checked-value="1" :unchecked-value="0" v-model="formData.isAnalysisEnergy"/>-->
<!--              </a-form-item>-->

              <!-- 启用状态 -->
              <a-form-item field="stopFlag" :label="$t('global.status')">
                <a-switch :checked-value="0" :unchecked-value="1" v-model="formData.stopFlag"></a-switch>
              </a-form-item>

              <!--连接超时-->
              <a-form-item field="timeout" :label="$t('pv.device.activation')">
                <a-input-number v-model="formData.timeout" allow-clear
                                :placeholder="$t('power.energy.device.pleaseNum')">
                  <template #append>
                    秒
                  </template>
                </a-input-number>
                <template #extra>
                <span>
                  <i class="icon" :style="{ color: 'rgb(var(--primary-6))' }"><icon-exclamation-circle-fill/></i>
                  连接超时时间要稍高于数据上传间隔
                </span>
                </template>
              </a-form-item>
              <!--备注-->
              <a-form-item field="remark" :label="$t('power.energy.device.descr')">
                <a-textarea v-model="formData.remark" allow-clear :max-length="200" :auto-size="true"
                            :show-word-limit="true"
                            :placeholder="$t('menu.diagram.project.power.list.remarksPlaceholder')"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <!-- 光伏设备 -->
              <div v-if="formData.stationType == 2">
                <a-divider orientation="left">{{ $t('pv.device.pvDevice') }}</a-divider>
                <a-form-item hide-label>
                  <a-alert>逆变器设备请认真填写以下数据，用于发电性能分析</a-alert>
                </a-form-item>
                <!-- 组件容量 -->
                <a-form-item field="ratedVolume" label="组件容量">
                  <a-input-number v-model="formData.ratedVolume" allow-clear placeholder="请输入数字">
                    <template #append>
                      KWP
                    </template>
                  </a-input-number>
                </a-form-item>

                <!-- 方位角度 -->
                <a-form-item field="azimuth" label="方位角度">
                  <a-input-number v-model="formData.azimuth" allow-clear placeholder="请输入数字">
                    <template #append>
                      °
                    </template>
                  </a-input-number>
                </a-form-item>

                <!-- 组件倾角 -->
                <a-form-item field="dipAngle" label="组件倾角">
                  <a-input-number v-model="formData.dipAngle" allow-clear placeholder="请输入数字">
                    <template #append>
                      °
                    </template>
                  </a-input-number>
                </a-form-item>

                <!-- 生产日期 -->
                <a-form-item field="manufactureDate" label="生产日期">
                  <a-date-picker v-model="formData.manufactureDate" placeholder="请选择生产日期"/>
                </a-form-item>

                <!-- 使用年限  -->
                <a-form-item field="useLife" label="使用年限">
                  <a-input-number v-model="formData.useLife">
                    <template #append>
                      年
                    </template>
                  </a-input-number>
                </a-form-item>

                <!-- 性能衰减 -->
                <a-form-item field="attenuationRate" label="性能衰减">
                  <a-input-number v-model="formData.attenuationRate" allow-clear placeholder="请输入数字">
                    <template #append>
                      %
                    </template>
                  </a-input-number>
                </a-form-item>
              </div>
              <!-- 用电设备 -->
<!--              <div v-if="formData.stationType == 1">-->
<!--                <a-divider orientation="left" style="margin-top: 40px">{{ $t('pv.device.billing') }}</a-divider>-->
<!--                <a-form-item hide-label>-->
<!--                  <a-alert>远程抄表请填写以下数据，用于计算并扣费</a-alert>-->
<!--                </a-form-item>-->
<!--                &lt;!&ndash; 抄表变量  &ndash;&gt;-->
<!--                <a-form-item field="readingVar" label="抄表变量">-->
<!--                  <a-input-number v-model="formData.readingVar"/>-->
<!--                </a-form-item>-->

<!--                &lt;!&ndash; DTU端口  &ndash;&gt;-->
<!--                <a-form-item field="dtuCmd" label="DTU端口">-->
<!--                  <a-input-number v-model="formData.dtuCmd"/>-->
<!--                </a-form-item>-->

<!--                 <a-form-item field="bindUserId" label="绑定用户">-->
<!--                <a-input-number v-model="formData.bindUserId" />-->
<!--              </a-form-item>-->

<!--              <a-form-item field="chargingType" label="付费模式">-->
<!--                <a-select v-model="formData.chargingType" placeholder="请选择付费模式" allow-clear>-->
<!--                  <a-option value="1">此处动态加载数据</a-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->

<!--              <a-form-item field="ruleId" label="付费规则">-->
<!--                <a-select v-model="formData.ruleId" placeholder="请选择付费规则" allow-clear>-->
<!--                  <a-option value="1">此处动态加载数据</a-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->

<!--              <a-form-item field="checkoutType" label="付费周期">-->
<!--                <a-select v-model="formData.checkoutType" placeholder="请选择付费周期" allow-clear>-->
<!--                  <a-option value="1">此处动态加载数据</a-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--              </div>-->

              <div v-if="formData.stationType == 2">
                <a-divider orientation="left" style="margin-top: 40px">{{ $t('pv.device.associated') }}</a-divider>
                <a-form-item hide-label>
                  <a-alert>汇流箱、并网柜请选择关联设备，用于展示连接关系</a-alert>
                </a-form-item>
                <a-form-item hide-label>
                  <a-button type="primary" @click="handleDeviceAdd">添加设备</a-button>
                </a-form-item>
                <a-table row-key="id" :bordered="{ wrapper: true, cell: true }"
                         :columns="(chooseTabColumns as TableColumnData[])" :data="chooseRenderData"
                         :pagination="false">
                  <template #operate="{ record }">
                    <a-button size="small" type="primary" status="danger"
                              @click="handleDeviceDelete(record)">移除
                    </a-button>
                  </template>
                </a-table>
              </div>
            </a-col>
          </a-row>
        </a-space>
        <div class="actions">
          <a-space>
            <a-button type="primary" status="danger" @click="onCancleClick">{{ $t('global.cancel') }}</a-button>
            <a-button type="primary" :loading="submitLoading" @click="onSubmitClick">{{ $t('global.save') }}</a-button>
          </a-space>
        </div>
      </a-form>
    </a-spin>

    <!-- 选择设备弹框 -->
    <a-modal width="600px" :visible="modalModel.visible" :footer="false" title-align="start" title="选择设备"
             @cancel="handleModalClose">
      <a-form :model="modalModel.serarchModel" auto-label-width>
        <a-row>
          <a-col>
            <a-form-item field="groupId" label="设备分组">
              <a-tree-select allow-search v-model="modalModel.serarchModel.groupId" :data="deviceGroupData"
                             @change="handleCatalogIdChange" placeholder="请选择设备分组"
                             :fieldNames="{ key: 'id', title: 'groupName', children: 'children' }"
                             allow-clear></a-tree-select>
            </a-form-item>
          </a-col>
          <a-col>

            <a-table height="300px" row-key="id" :bordered="{ wrapper: true, cell: true }"
                     :columns="(tabColumns as TableColumnData[])" :data="modalModel.renderData"
                     @page-change="onPageChange"
                     :pagination="pagination" @page-size-change="onPageSizeChange">
              <template #operate="{ record }">
                <a-button size="small" type="primary" @click="handleDeviceChoose(record)">添加</a-button>
              </template>
            </a-table>
            <!-- <div style="text-align: center">
              <a-button @click="handleDeviceChoose" :disabled="modalModel.renderData.length == 0" type="primary"
                style="margin-top: 20px;">添加选中设备</a-button>
            </div> -->
          </a-col>
        </a-row>
      </a-form>
    </a-modal>

  </a-card>
</template>
<script setup lang="ts">
import {FormInstance, TreeNodeData, TableColumnData, TableRowSelection} from '@arco-design/web-vue';
import {notification} from "@/hooks/my-design";
import {computed, getCurrentInstance, onMounted, reactive, ref} from 'vue';
import useLoading from '@/hooks/loading';
import {listGroupAll} from '@/api/system/group';
import {listCompanyAll} from '@/api/system/company';
import {handleTreeNodeData} from '@/utils/ruoyi';
import {listChannelDeviceAll} from '@/api/pv/channel/device';
import {StationTypeEnum, addDevice, getDevice, listDevice, updateDevice} from '@/api/system/device';
import {BasePagination} from '@/api/common';
import {useRouter, useRoute} from 'vue-router'
import {debounce} from 'lodash';

const defaultProp = defineProps({
  stationType: {
    type: Number,
    default: StationTypeEnum.power,
  },
  mapId: {
    type: Number,
    default: 0
  }
})

const router = useRouter()
//事件
const emits = defineEmits(['success', 'cancle'])
//组件参数
const props = ref<any>({
  bizId: 0,
  groupName: '',
})
//******* 这里编写动态获取下拉列表 start ******
const proxy = getCurrentInstance()?.appContext.config.globalProperties;
const {
  sys_electric_type,
  sys_rated_vol,
} = proxy?.useDict(
    "sys_electric_type",
    "sys_rated_vol",
);
//******* 这里编写动态获取下拉列表 end ******
//通讯设备
const channelDeviceData = ref<any>([]);
const channelDeviceTreeData = ref<TreeNodeData[]>([]);
// 当前选中的通讯设备
const channelDeviceCheck = ref<String>(undefined);
//设备类型
const deviceTypeData = ref<any>([]);
//设备分组
const deviceGroupData = ref<any>([]);
//生产厂家
const companyData = ref<any>([]);
//加载中
const {loading, setLoading} = useLoading();
//表单实例
const formRef = ref<FormInstance>();
const submitLoading = ref<boolean>(false);
//生成表单模型
const generateFormModel = () => {
  return {
    id: 0,
    entId: undefined,
    deptId: undefined,
    stationType: defaultProp.stationType,
    electricType: 1,
    channelId: undefined,
    channelSn: undefined,
    channelName: undefined,
    comDeviceId: undefined,
    comDeviceSn: undefined,
    deviceName: undefined,
    deviceSn: undefined,
    groupId: undefined,
    groupName: "",
    isPass: 0,
    proFactory: undefined,
    proType: undefined,
    proVer: undefined,
    buyPrice: undefined,
    proSn: undefined,
    proModel: undefined,
    agStandard: undefined,
    ratedVol: 0.22,
    ratedEle: undefined,
    ratedPower: undefined,
    eleLoadRate: undefined,
    isAnalysisEnergy: 0,
    monitorId: undefined,
    electricAttribute: undefined,
    temperatureAttribute: undefined,
    ortherAttribute: undefined,
    isReading: undefined,
    ratedVolume: undefined,
    azimuth: undefined,
    dipAngle: undefined,
    manufactureDate: undefined,
    useLife: undefined,
    attenuationRate: undefined,
    readingVar: undefined,
    dtuCmd: undefined,
    bindUserId: 0,
    chargingType: 0,
    ruleId: 0,
    checkoutType: 0,
    stopFlag: 0,
    remark: "",
    varIds: [] as number[],
    sbdz: undefined, //设备地址
    meterNumber: undefined, //设备表号
    connectModel: '-', //通讯设备
    timeout: 300, //连接超时
  };
};

//表单模型
const formData = ref(generateFormModel());

//选中的设备列表
const chooseRenderData = ref<any>([]);
//表单规则
const formRule = {
  deviceName: [{required: true, message: "请输入设备名称"}],
  electricType: [{required: true, message: "请选择用能类型"}],
  comDeviceId: [{required: true, message: "请选择通讯设备"}],
  proType: [{required: true, message: "请选择设备类型"}],
  groupId: [{required: true, message: "请选择设备分组"}],
}
//添加设备-多选
const selectedKeys = new Set<number>();
const rowSelection: TableRowSelection = reactive({
  type: "checkbox",
  showCheckedAll: true
});
//设置表格列
const tabColumns = computed<TableColumnData[]>(() => [
  {
    title: "设备名称",
    dataIndex: "deviceName",
    align: 'center',
    width: 200
  }, {
    title: "设备编号",
    dataIndex: "deviceSn",
    align: 'center',
    width: 200
  },
  {
    title: "操作",
    dataIndex: "operate",
    slotName: 'operate',
    width: 100,
    align: 'center'
  }
]);
//设置表格列
const chooseTabColumns = computed<TableColumnData[]>(() => [
  {
    title: "设备名称",
    dataIndex: "deviceName",
    align: 'center',
    width: 200
  }, {
    title: "设备编号",
    dataIndex: "deviceSn",
    align: 'center',
    width: 200
  }, {
    title: "操作",
    dataIndex: "operate",
    slotName: 'operate',
    width: 100,
    align: 'center'
  }
]);
//生成弹框模型
const generateModalModel = () => {
  return {
    visible: false,
    //搜索条件
    serarchModel: {
      groupId: "",
      stationType: defaultProp.stationType,
    },
    //表格数据
    renderData: []
  }
}
//弹框模型
const modalModel = ref(generateModalModel());
//表格分页参数
const pagination: any = reactive({...BasePagination()});
// pagination.pageSize = 5;
// pagination.pageSizeOptions.unshift(5);


/**
 * 选择设备分组改变
 */
const handleCatalogIdChange = async () => {
  await fetchDeviceData();
}

/**
 * 添加设备
 */
const handleDeviceAdd = async () => {
  modalModel.value = generateModalModel();
  modalModel.value.visible = true;
  pagination.current = 1;
  await fetchDeviceData();
}

/**
 * 添加设备
 */
const handleModalClose = () => {
  console.log("handleModalClose");
  modalModel.value = generateModalModel();
  // selectedKeys.value.clear();
}

/**
 * 设备选中
 */
const handleDeviceChoose = (record: any) => {
  try {
    // console.log("selectedKeys", selectedKeys.value);
    // if (!selectedKeys.value || selectedKeys.value.length <= 0) {
    //   notification({ code: 201, msg: "请选择要添加的数据" })
    //   return;
    // }
    // formData.value.varIds = selectedKeys;
    if (!selectedKeys.has(record.id)) {
      selectedKeys.add(record.id);
      chooseRenderData.value.push(record);
      formData.value.varIds = Array.from(selectedKeys);
      record.isAdd = true;
    }
  } catch (error) {

  }
}
const handleDeviceDelete = (record: any) => {
  selectedKeys.delete(record.id);
  chooseRenderData.value = chooseRenderData.value.filter((item: any) => item.id !== record.id);
  formData.value.varIds = Array.from(selectedKeys);
}

/**
 * 保存
 */
const onSubmitClick = debounce(
    async () => {
      if (submitLoading.value) {
        return;
      }
      submitLoading.value = true;
      try {
        const validate = await formRef.value?.validate();
        if (!validate) {
          let result;
          if (formData.value.id == 0) {
            formData.value.groupName = props.value.groupName;
            result = await addDevice(formData.value);
          } else {
            result = await updateDevice(formData.value);
          }
          notification(result);
          if (result.code == 200) {
            back()
          }
        }
      } catch (e) {

      } finally {
        submitLoading.value = false;
      }
    }, 1000
)

/**
 * 取消
 */
const onCancleClick = () => {
  back()
}

/**
 * 通讯设备选择的时候
 */
const handleChannelDeviceChange = (val: any) => {
  const findData = channelDeviceData.value.find((item: any) => item.id === val)
  if (findData) {
    formData.value.comDeviceId = findData.id;
    formData.value.comDeviceSn = findData.deviceSn;
    formData.value.channelId = findData.channelId;
    formData.value.channelSn = findData.channelSn;
    formData.value.channelName = findData.channelName;
    formData.value.connectModel = findData.connectModel;
    // console.log('选中connectModel==', formData.value.connectModel)
  }
}

/**
 * 通讯设备选择的时候
 */
const handleChannelDeviceClear = () => {
  formData.value.comDeviceId = undefined;
  formData.value.comDeviceSn = undefined;
}

/**
 * 获取设备类型
 */
const fetchDeviceTypeData = async () => {
  try {
    const res = await listGroupAll({mapId: 4});
    if (res.code == 200) {
      deviceTypeData.value = res.data;
    }
  } catch (ex) {
    console.error("添加设备-获取设备类型失败", ex)
  }
}

/**
 * 获取设备分组
 */
const fetchDeviceGroupData = async () => {
  try {
    const res = await listGroupAll({mapId: defaultProp.mapId, stationType: defaultProp.stationType});
    if (res.code == 200) {
      deviceGroupData.value = res.data;
    }
  } catch (ex) {
    console.error("添加设备-获取设备分组失败", ex)
  }
}

/**
 * 获取公司
 */
const fetchCompanyData = async () => {
  try {
    const res = await listCompanyAll({companyGroup: 1});
    if (res.code == 200) {
      companyData.value = res.data;
      // companyData.value = handleTreeNodeData(res.data, "id", "companyName");
    }
  } catch (ex) {
    console.error("添加设备-获取生产厂家失败", ex)
  }
}


/**
 * 获取设备明细
 */
const fetchDeviceInfoData = async () => {
  if (props.value.bizId && props.value.bizId > 0) {
    setLoading(true);
    try {
      const res = await getDevice(props.value.bizId);
      if (res.code == 200) {
        const detailData = channelDeviceData.value.find((item: any) => item.channelId === res.data.channelId)
        // console.log('当前详情内容==', res.data)
        formData.value = res.data;
        formData.value.connectModel = detailData.connectModel;
      }
    } catch (ex) {
      console.error("添加设备-获取设备信息失败", ex)
    } finally {
      setLoading(false);
    }
  }
}

/**
 * 获取设备列表
 */
const fetchDeviceData = async () => {
  try {
    const res: any = await listDevice({
      pageSize: pagination.pageSize,
      pageNum: pagination.current, ...modalModel.value.serarchModel
    });
    if (res.code == 200) {
      removeEmptyChildren(res.rows);
      modalModel.value.renderData = res.rows;
      pagination.total = res.total;
    }
  } catch (ex) {
    console.error("添加设备-获取设备信息失败", ex)
  } finally {
  }
}

//表格页码发生变化
const onPageChange = async (val: number) => {
  pagination.current = val;
  await fetchDeviceData();
}

//表格每页数量发生变化
const onPageSizeChange = async (val: number) => {
  pagination.pageSize = val;
  await fetchDeviceData();
}
/**
 * 获取通讯设备
 */
const fetchChannelDevice = async () => {
  try {
    const res = await listChannelDeviceAll({});
    if (res.code == 200) {
      channelDeviceData.value = res.data;
      // console.log('通讯设备==', channelDeviceData.value)
    }
  } catch (error) {

  }
}

/**
 * 删除空数据
 * @param data
 */
const removeEmptyChildren = (data: any) => {
  data.forEach((item: any, index: number) => {
    if (item.children && item.children.length === 0) {
      delete data[index].children;
    } else if (item.children) {
      removeEmptyChildren(item.children);
    }
  });
}


/**
 * 返回上一级页面
 */
const back = () => {
  router.push({
    path: router.currentRoute.value.query.redirect as string,
  });
}


/**
 * 获取所有数据
 */
const fetchAllData = async () => {
  await Promise.all([
    //获取通讯设备
    fetchChannelDevice(),
    //获取设备类型
    fetchDeviceTypeData(),
    //获取设备分组
    fetchDeviceGroupData(),
    //获取生产厂家
    fetchCompanyData(),
    //获取设备详情
    fetchDeviceInfoData()
  ]);
}
/**
 * 首次渲染
 */
onMounted(async () => {
  props.value = {
    // stationType: router.currentRoute.value.query.stationType,
    groupName: router.currentRoute.value.query.groupName,
    bizId: router.currentRoute.value.query.bizId
  }
  formData.value = generateFormModel();
  // formData.value.stationType = props.value.stationType;
  setLoading(true);
  try {
    await fetchAllData();
  } catch (error) {

  } finally {
    setLoading(false);
  }
})
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 40px 20px;
  overflow: hidden;
}

.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  padding: 14px 20px 14px 0;
  background: var(--color-bg-2);
  text-align: right;
  box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
}

:deep(.arco-divider-horizontal) {
  border-bottom: 1px solid var(--color-neutral-6);
}

.star-from-item {
  :deep(.arco-form-item-label)::before {
    content: '*';
    color: red;
    position: relative;
    left: -2px;
    top: 2px;
    font-weight: bold;
  }
}
</style>