<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1450px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
      style="width: 1400px; height: 600px; overflow: scroll"
    >
      <div class="form-section">
        <div class="section-title">基本信息</div>
        <div class="base_box">
          <el-row :gutter="20">
            <el-col :sm="12" :md="6">
              <el-form-item label="设备编码" prop="deviceNumber">
                <el-input
                  v-model="formData.deviceNumber"
                  placeholder="请输入设备编码"
                  @blur="generateQRCode"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="设备名称" prop="deviceName">
                <el-input v-model="formData.deviceName" placeholder="请输入设备名称" />
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="设备类别" prop="deviceCategoryId">
                <el-tree-select
                  v-model="formData.deviceCategoryId"
                  :data="categoryTree"
                  :props="{ ...defaultProps, label: 'categoryName' }"
                  check-strictly
                  node-key="id"
                  placeholder="请选择"
                  clearable
                  filterable
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="标准型号" prop="model">
                <el-input v-model="formData.model" placeholder="请输入标准型号" />
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="规格型号" prop="specificationModel">
                <el-input v-model="formData.specificationModel" placeholder="请输入规格型号" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="计量单位" prop="unit">
                <el-input v-model="formData.unit" placeholder="请输入计量单位" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="设备序列号" prop="serialNumber">
                <el-input v-model="formData.serialNumber" placeholder="请输入序列号" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="设备来源" prop="deviceSource">
                <el-select
                  v-model="formData.deviceSource"
                  placeholder="请选择设备来源"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in getStrDictOptions(DICT_TYPE.DEVICE_SOURCE)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="购置日期" prop="purchaseDate">
                <el-date-picker
                  v-model="formData.purchaseDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="选择购置日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="所属公司" prop="deviceCompany">
                <el-tree-select
                  v-model="formData.deviceCompany"
                  :data="conpanyOption"
                  :props="defaultProps"
                  check-strictly
                  node-key="id"
                  placeholder="请选择所属公司"
                  filterable
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="所属部门" prop="deviceDept">
                <el-tree-select
                  v-model="formData.deviceDept"
                  :data="deptTree"
                  :props="defaultProps"
                  check-strictly
                  node-key="id"
                  placeholder="请选择所属部门"
                  filterable
                />
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="采购金额" prop="purchaseAmount">
                <el-input v-model="formData.purchaseAmount" placeholder="请输入采购金额" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="设备负责人" prop="responsible">
                <el-input v-model="formData.responsible" placeholder="请输入设备负责人" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="使用公司" prop="usageCompany">
                <el-tree-select
                  v-model="formData.usageCompany"
                  :data="conpanyOption"
                  :props="defaultProps"
                  check-strictly
                  node-key="id"
                  placeholder="请选择使用公司"
                  filterable
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="使用部门" prop="usageDept">
                <el-tree-select
                  v-model="formData.usageDept"
                  :data="deptTree"
                  :props="defaultProps"
                  check-strictly
                  node-key="id"
                  placeholder="请选择使用部门"
                  filterable
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="使用人" prop="usageUser">
                <el-input v-model="formData.usageUser" placeholder="请输入使用人" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="使用期限(月)" prop="usageMonthNum">
                <el-input
                  v-model.number="formData.usageMonthNum"
                  placeholder="请输入使用期限(月)"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="功能位置" prop="usageLocation">
                <el-tree-select
                  v-model="formData.usageLocation"
                  :data="locationTree"
                  :props="{ ...defaultProps, label: 'locationName' }"
                  check-strictly
                  node-key="id"
                  placeholder="请选择位置"
                  clearable
                  filterable
                />
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="设备状态" prop="deviceStatus">
                <el-select v-model="formData.deviceStatus">
                  <el-option
                    v-for="dict in getStrDictOptions(DICT_TYPE.DEVICE_STATUS)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="使用状态" prop="usageStatus">
                <el-select v-model="formData.usageStatus">
                  <el-option
                    v-for="dict in getStrDictOptions(DICT_TYPE.USAGE_STATUS)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="form-section">
        <div class="section-title">主设备/供应商信息</div>
        <div class="base_box">
          <el-row :gutter="20">
            <!-- <el-col :sm="24" :md="24">
              <el-divider class="label_divider" content-position="left">
                主设备/供应商信息
              </el-divider>
            </el-col> -->
            <el-col :sm="12" :md="6">
              <el-form-item label="主设备编码" prop="mainDeviceNumber">
                <el-select
                  v-model="formData.mainDeviceNumber"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词搜索设备"
                  :remote-method="searchDevice"
                  :loading="deviceSearchLoading"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in deviceOptions"
                    :key="item.id"
                    :label="`${item.deviceNumber} - ${item.deviceName}`"
                    :value="item.deviceNumber"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="资产编号" prop="assetNumber">
                <el-input v-model="formData.assetNumber" placeholder="请输入资产编号" />
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="设备等级" prop="deviceLevel">
                <el-select v-model="formData.deviceLevel">
                  <el-option
                    v-for="dict in getStrDictOptions(DICT_TYPE.DEVICE_LEVEL)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="设备类型" prop="deviceType">
                <el-select
                  v-model="formData.deviceType"
                  placeholder="请选择设备类型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in getStrDictOptions(DICT_TYPE.DEVICE_TYPE)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="供应商编码" prop="supplierCode">
                <el-input v-model="formData.supplierCode" placeholder="请输入供应商编码" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="供应商名称" prop="supplierName">
                <el-input v-model="formData.supplierName" placeholder="请输入供应商名称" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="品牌" prop="brand">
                <el-input v-model="formData.brand" placeholder="请输入品牌" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="生产编号" prop="productionNumber">
                <el-input v-model="formData.productionNumber" placeholder="请输入生产编号" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="入账方式" prop="accountingMethod">
                <el-select
                  v-model="formData.accountingMethod"
                  placeholder="请选择入账方式"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in getStrDictOptions(DICT_TYPE.ACCOUNTING_METHOD)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :sm="12" :md="6">
              <el-form-item label="启用日期" prop="commissioningDate">
                <el-date-picker
                  v-model="formData.commissioningDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="选择启用日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="保修期至" prop="warrantyPeriod">
                <el-date-picker
                  v-model="formData.warrantyPeriod"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="选择保修期至"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :md="6">
              <el-form-item label="预计报废日期" prop="scrapDate">
                <el-date-picker
                  v-model="formData.scrapDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="选择预计报废日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="form-section">
        <div class="section-title">设备/技术参数</div>
        <el-row :gutter="20">
          <el-col :sm="12" :md="6">
            <el-form-item label="技术参数" prop="technicalParameters">
              <el-input v-model="formData.technicalParameters" placeholder="请输入技术参数" />
            </el-form-item>
          </el-col>

          <el-col :sm="12" :md="6">
            <el-form-item label="功率" prop="power">
              <el-input v-model="formData.power" placeholder="请输入功率" />
            </el-form-item>
          </el-col>
          <el-col :sm="12" :md="6">
            <el-form-item label="重量" prop="weight">
              <el-input v-model="formData.weight" placeholder="请输入重量" />
            </el-form-item>
          </el-col>
          <el-col :sm="12" :md="6">
            <el-form-item label="体积" prop="volume">
              <el-input v-model="formData.volume" placeholder="请输入体积" />
            </el-form-item>
          </el-col>
          <el-col :sm="12" :md="6">
            <el-form-item label="温度" prop="temperature">
              <el-input v-model="formData.temperature" placeholder="请输入温度" />
            </el-form-item>
          </el-col>
          <el-col :sm="12" :md="6">
            <el-form-item label="湿度" prop="humidity">
              <el-input v-model="formData.humidity" placeholder="请输入湿度" />
            </el-form-item>
          </el-col>

          <!--          <el-col :sm="12" :md="6">
            <el-form-item label="电子标签码" prop="electronicTagCode">
              <div class="qrcode-container">
                <div v-if="qrcodeDataUrl" class="qrcode-preview">
                  <img :src="qrcodeDataUrl" alt="设备二维码" style="width: 80px; height: 80px;" />
                </div>
                <div v-else class="qrcode-placeholder">
                  <span>请输入设备编码后自动生成</span>
                </div>
              </div>
            </el-form-item>
          </el-col>-->

          <el-col :sm="12" :md="6">
            <el-form-item label="标签" prop="tips">
              <el-input v-model="formData.tips" placeholder="请输入标签" />
            </el-form-item>
          </el-col>

          <el-col :sm="12" :md="6">
            <el-form-item label="存放地点" prop="stockLocation">
              <el-input v-model="formData.stockLocation" placeholder="请输入存放地点" />
            </el-form-item>
          </el-col>

          <el-col :sm="12" :md="6">
            <el-form-item label="收货单号" prop="stockInOrderNum">
              <el-input v-model="formData.stockInOrderNum" placeholder="请输入入库/收货单号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.remark"
                placeholder="请输入备注"
                type="textarea"
                :rows="3"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="设备图片" prop="deviceImgList">
              <UploadImgs v-model="deviceImgList" class="min-w-80px" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="form-section">
        <div class="section-title">维保信息</div>
        <el-row :gutter="20">
          <el-col :sm="12" :md="6">
            <el-form-item label="维保供应商" prop="maintainSupplierName">
              <el-input v-model="formData.maintainSupplierName" placeholder="请输入维保供应商" />
            </el-form-item>
          </el-col>

          <el-col :sm="12" :md="6">
            <el-form-item label="维保联系电话" prop="maintainSupplierPhone">
              <el-input v-model="formData.maintainSupplierPhone" placeholder="请输入维保联系电话" />
            </el-form-item>
          </el-col>

          <el-col :sm="12" :md="6">
            <el-form-item label="维保负责人" prop="maintainSupplierResponsible">
              <el-input
                v-model="formData.maintainSupplierResponsible"
                placeholder="请输入维保负责人"
              />
            </el-form-item>
          </el-col>

          <el-col :sm="12" :md="6">
            <el-form-item label="维保到期时间" prop="maintainExpireTime">
              <el-date-picker
                v-model="formData.maintainExpireTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择维保到期时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="维保说明" prop="maintainRemark">
              <el-input
                v-model="formData.maintainRemark"
                placeholder="请输入维保说明"
                type="textarea"
                :rows="3"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 子表的表单 -->
      <div class="form-section">
        <div class="section-title">设备资料</div>
        <el-tabs v-model="subTabsName">
          <el-tab-pane label="设备资料" name="deviceFiles">
            <DeviceFilesForm ref="deviceFilesFormRef" :device-id="formData.id" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { InfoApi } from '@/api/device/info'
import * as FormApi from '@/api/bpm/form'
import { CategoryApi } from '@/api/device/category'
import { LocationApi } from '@/api/device/location'
import * as DeptApi from '@/api/system/dept'
import { defaultProps, handleTree } from '@/utils/tree'
import QRCode from 'qrcode'
import DeviceFilesForm from './components/DeviceFilesForm.vue'

/** 设备基本信息 表单 */
defineOptions({ name: 'InfoForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const deviceSearchLoading = ref(false) // 设备搜索加载状态
const deviceOptions = ref<any[]>([]) // 设备选项
const qrcodeDataUrl = ref('') // 二维码数据URL

const formData = ref({
  id: undefined,
  deviceNumber: undefined,
  deviceName: undefined,
  deviceCover: undefined,
  deviceImg: '',
  assetNumber: undefined,
  serialNumber: undefined,
  deviceCategoryId: undefined,
  deviceStatus: undefined,
  deviceSpecial: undefined,
  usageStatus: undefined,
  brand: undefined,
  model: undefined,
  deviceLevel: undefined,
  deviceDept: undefined,
  usageLocation: undefined,
  supplierCode: undefined,
  supplierName: undefined,
  productionNumber: undefined,
  deviceType: undefined,
  deviceSource: undefined,
  purchaseDate: undefined,
  purchaseAmount: undefined,
  commissioningDate: undefined,
  warrantyPeriod: undefined,
  scrapDate: undefined,
  technicalParameters: undefined,
  unit: undefined,
  power: undefined,
  weight: undefined,
  volume: undefined,
  temperature: undefined,
  humidity: undefined,
  specificationModel: undefined,
  accountingMethod: undefined,
  electronicTagCode: '',
  remark: undefined,
  responsible: undefined,
  mainDeviceNumber: undefined,
  tips: undefined,
  stockLocation: undefined,
  deviceCompany: undefined,
  usageCompany: undefined,
  usageDept: undefined,
  usageUser: undefined,
  usageMonthNum: undefined,
  stockInOrderNum: undefined,
  maintainSupplierName: undefined,
  maintainSupplierPhone: undefined,
  maintainSupplierResponsible: undefined,
  maintainExpireTime: undefined,
  maintainRemark: undefined
})
const deviceImgList = ref([])
const formRules = reactive({
  deviceNumber: [{ required: true, message: '设备编码不能为空', trigger: 'blur' }],
  deviceName: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
  assetNumber: [{ required: true, message: '资产编号不能为空', trigger: 'blur' }],
  deviceCategoryId: [{ required: true, message: '设备类别不能为空', trigger: 'blur' }],
  deviceDept: [{ required: true, message: '设备部门不能为空', trigger: 'blur' }],
  purchaseDate: [{ required: true, message: '购置日期不能为空', trigger: 'blur' }],
  usageLocation: [{ required: true, message: '设备位置不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

const categoryTree = ref() // 树形结构
const locationTree = ref() // 树形结构
const deptTree = ref<Tree[]>([]) // 树形结构
const conpanyOption = ref([]) // 树形结构

/** 子表的表单 */
const subTabsName = ref('deviceFiles')
const deviceFilesFormRef = ref()

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type

  await Promise.all([
    getCategoryTree(),
    getLocationTree(),
    (deptTree.value = handleTree(await DeptApi.getSimpleDeptList())),
    (conpanyOption.value = await FormApi.getCompany())
  ])

  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await InfoApi.getInfo(id)
      // 将deviceImg 属性不为空时 以数组方式 赋值给 deviceImgList
      deviceImgList.value = formData.value.deviceImg ? formData.value.deviceImg.split(',') : []

      // 如果已有设备编码，生成二维码
      // if (formData.value.deviceNumber) {
      //   generateQRCode()
      // }
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 生成二维码 */
const generateQRCode = async () => {
  if (!formData.value.deviceNumber) {
    qrcodeDataUrl.value = ''
    return
  }

  try {
    // 生成二维码
    qrcodeDataUrl.value = await QRCode.toDataURL(formData.value.deviceNumber, {
      width: 200,
      margin: 1,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })

    // 存储二维码数据到electronicTagCode字段
    formData.value.electronicTagCode = qrcodeDataUrl.value
  } catch (err) {
    console.error('生成二维码失败:', err)
    message.error('生成二维码失败')
  }
}

/** 搜索设备 */
const searchDevice = async (query: string) => {
  if (!query) {
    deviceOptions.value = []
    return
  }

  deviceSearchLoading.value = true
  try {
    // 调用API搜索设备
    const response = await InfoApi.getInfoPage({
      pageSize: 10,
      pageNo: 1,
      // deviceNumber: query,
      deviceName: query
    })

    deviceOptions.value = response.list || []
  } catch (error) {
    console.error('搜索设备失败:', error)
    deviceOptions.value = []
  } finally {
    deviceSearchLoading.value = false
  }
}

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 将deviceImgList 数组以字符串方式 赋值给 deviceImg
  if (deviceImgList.value) {
    formData.value.deviceCover = deviceImgList.value[0]
    formData.value.deviceImg = deviceImgList.value.join(',')
  }
  // 校验表单
  await formRef.value.validate()

  // 校验子表单
  try {
    await deviceFilesFormRef.value?.validate()
  } catch (e) {
    subTabsName.value = 'deviceFiles'
    return
  }

  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as Info
    // 拼接子表的数据
    data.deviceFilesList = deviceFilesFormRef.value?.getData()

    if (formType.value === 'create') {
      await InfoApi.createInfo(data)
      message.success(t('common.createSuccess'))
    } else {
      await InfoApi.updateInfo(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    deviceNumber: undefined,
    deviceName: undefined,
    deviceCover: undefined,
    deviceImg: undefined,
    assetNumber: undefined,
    serialNumber: undefined,
    deviceCategoryId: undefined,
    deviceStatus: undefined,
    deviceSpecial: undefined,
    usageStatus: undefined,
    brand: undefined,
    model: undefined,
    deviceLevel: undefined,
    deviceDept: undefined,
    usageLocation: undefined,
    supplierCode: undefined,
    supplierName: undefined,
    productionNumber: undefined,
    deviceType: undefined,
    deviceSource: undefined,
    purchaseDate: undefined,
    purchaseAmount: undefined,
    commissioningDate: undefined,
    warrantyPeriod: undefined,
    scrapDate: undefined,
    technicalParameters: undefined,
    unit: undefined,
    power: undefined,
    weight: undefined,
    volume: undefined,
    temperature: undefined,
    humidity: undefined,
    specificationModel: undefined,
    accountingMethod: undefined,
    electronicTagCode: undefined,
    remark: undefined,
    responsible: undefined,
    mainDeviceNumber: undefined,
    tips: undefined,
    stockLocation: undefined,
    deviceCompany: undefined,
    usageCompany: undefined,
    usageDept: undefined,
    usageUser: undefined,
    usageMonthNum: undefined,
    stockInOrderNum: undefined,
    maintainSupplierName: undefined,
    maintainSupplierPhone: undefined,
    maintainSupplierResponsible: undefined,
    maintainExpireTime: undefined,
    maintainRemark: undefined
  }
  qrcodeDataUrl.value = ''
  formRef.value?.resetFields()
}

/** 获得设备类别树 */
const getCategoryTree = async () => {
  const data = await CategoryApi.getCategoryList()
  categoryTree.value = handleTree(data, 'id', 'parentId')
}
/** 获得设备位置树 */
const getLocationTree = async () => {
  const data = await LocationApi.getLocationList()
  locationTree.value = handleTree(data, 'id', 'parentId')
}
</script>

<style scoped>
.form-section {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #409eff;
  margin-bottom: 15px;
  padding-left: 5px;
  border-left: 3px solid #409eff;
}

.el-divider {
  margin: 10px 0;
}

.el-form-item {
  margin-bottom: 15px;
}

.qrcode-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  padding: 5px;
}

.qrcode-placeholder {
  color: #909399;
  font-size: 12px;
  text-align: center;
}

:deep(.max-dialog .el-dialog) {
  max-width: 100%;
  height: 100vh;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

:deep(.max-dialog .el-dialog__body) {
  flex: 1;
  overflow: hidden;
  padding: 0;
}
.label_title_box {
  margin-bottom: 20px;
  font-weight: 700;
  margin-left: 30px;
}
.label_divider {
  margin-bottom: 20px;
}
/* .base_box {
  border: 2px solid #999;
  padding: 20px;
} */
</style>
