<template>
  <!-- 弹窗内容区域 -->
  <div class="app-container" style="height: calc(100vh - 84px); overflow-y: unset">
    <div class="page-header">
      <div>
        <i
          class="el-icon-arrow-left goBack-btn"
          @click="goBack"
          style="border-color: transparent; color: #2CBAB2; background: transparent; padding-left: 0; padding-right: 0"
        >返回</i
        >
      </div>
    </div>

    <el-form
      label-width="110px"
      ref="formRef"
      style="padding: 12px; overflow-y: auto; height: calc(100vh - 180px); width: 100%"
      label-position="right"
      :model="form"
      v-loading="isLoading"
    >
      <div style="display: flex; padding-bottom: 5px">
        <div style="width: 5px; background-color: #34E2C7; margin-right: 10px"></div>
        基础信息
      </div>
      <el-row :gutter="24" style="padding-top: 10px">
        <el-col :span="6">
          <el-form-item label="专业" prop="major">
            <el-input v-model="form.major" placeholder="专业" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工序" prop="process">
            <el-input v-model="form.process" placeholder="工序" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装备类目" prop="category">
            <el-input v-model="form.category" placeholder="装备类目" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装备名称" prop="name">
            <el-input v-model="form.name" placeholder="装备名称" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="规格型号" prop="specificationModel">
            <el-input v-model="form.specificationModel" placeholder="规格型号" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资产原值(万元)" prop="originalValue">
            <el-input v-model="form.originalValue" placeholder="资产原值(万元)" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资产净值(万元)" prop="value">
            <el-input v-model="form.value" placeholder="资产净值(万元)" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生产厂家" prop="manufacturer">
            <el-input v-model="form.manufacturer" placeholder="生产厂家" readonly/>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="出厂日期" prop="productionDate">
            <el-input v-model="form.productionDate" placeholder="出厂日期" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下次维保日期" prop="nextMaintenanceDate">
            <el-input v-model="form.nextMaintenanceDate" placeholder="下次维保日期" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装备原始编码" prop="originalCode">
            <el-input clearable maxlength="20" placeholder="装备原始编码" v-model="form.originalCode" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最大使用年限" prop="maxServiceLifeYears">
            <el-input clearable maxlength="20" placeholder="最大使用年限" v-model="form.maxServiceLifeYears" readonly/>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="6">
          <el-form-item label="管理模式" prop="manageType">
            <el-input v-model="form.manageTypeName" placeholder="管理方式" readonly />
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row :gutter="24">
        <!-- <el-col :span="6">
          <el-form-item label="装备数量" prop="count">
            <el-input v-model="form.count" placeholder="装备数量" readonly />
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="计数单位" prop="unit">
            <el-input v-model="form.unit" placeholder="计数单位" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="采购日期" prop="purchaseDate">
            <el-input v-model="form.purchaseDate" placeholder="采购日期" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产权单位" prop="propertyUnit">
            <el-input v-model="form.propertyUnit" placeholder="产权单位" readonly/>
          </el-form-item>
        </el-col>
      </el-row>

      <div style="display: flex; padding-bottom: 10px">
        <div style="width: 5px; background-color: #34E2C7; margin-right: 10px"></div>
        特征属性
      </div>
      <el-row :gutter="24" style="padding-top: 10px">
        <el-col :span="6" v-for="(item, index) in form.propertyVoList" :key="index">
          <el-form-item :label="item.propertyName" prop="specialtyFeature">
            <el-input v-model="item.propertyValue" readonly/>
          </el-form-item>
        </el-col>
      </el-row>

      <div style="display: flex; padding-bottom: 10px">
        <div style="width: 5px; background-color: #34E2C7; margin-right: 10px"></div>
        装备图片
      </div>
      <el-row :gutter="24" style="padding-top: 10px">
        <el-col>
          <el-form-item>
            <div
              v-if="form.appearanceImages && form.appearanceImages.length > 0"
              style="display: flex; align-items: center; margin-bottom: 10px"
            >
              <div v-for="(item, index) in form.appearanceImages" :key="index">
                <el-image
                  :src="item.fileUrl"
                  alt=""
                  :preview-src-list="[item.fileUrl]"
                  style="width: 120px; height: 120px; margin-right: 10px"
                />
              </div>
            </div>
            <img
              v-else
              src="@/assets/images/no-img.png"
              alt=""
              style="width: 120px; height: 120px; margin-right: 10px"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div style="display: flex; padding-bottom: 10px">
        <div style="width: 5px; background-color: #34E2C7; margin-right: 10px"></div>
        相关证书
      </div>
      <el-row :gutter="24" style="padding-top: 10px">
        <el-col>
          <el-form-item label="合格证" prop="certificates">
            <div
              v-if="form.certificates && form.certificates.length > 0"
              style="display: flex; align-items: center; margin-bottom: 10px"
            >
              <div v-for="(item, index) in form.certificates" :key="index">
                <!-- 后缀如果包含 .pdf 显示pdf图标 -->
                <img
                  v-if="item.fileUrl && (item.fileUrl.includes('.pdf') || item.fileUrl.includes('.PDF'))"
                  style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
                  src="@/assets/images/pdf.png"
                  fit="fill"
                  @click="handleFile(item)"
                />
                <!-- 后缀如果包含 .word 显示 word图片 -->
                <img
                  v-else-if="
                    item.fileUrl &&
                    (item.fileUrl.includes('.doc') ||
                      item.fileUrl.includes('.docx') ||
                      item.fileUrl.includes('.DOC') ||
                      item.fileUrl.includes('.DOCX'))
                  "
                  style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
                  src="@/assets/images/word.png"
                  fit="fill"
                  @click="handleFile(item)"
                />
                <el-image
                  v-else
                  :src="item.fileUrl"
                  alt=""
                  :preview-src-list="[item.fileUrl]"
                  style="width: 120px; height: 120px; margin-right: 10px"
                />
              </div>
            </div>
            <img
              v-else
              src="@/assets/images/no-img.png"
              alt=""
              style="width: 120px; height: 120px; margin-right: 10px"
            />
          </el-form-item>

          <el-form-item label="检测证书" prop="inspectionReports">
            <div
              v-if="form.inspectionReports && form.inspectionReports.length > 0"
              style="display: flex; align-items: center; margin-bottom: 10px"
            >
              <div v-for="(item, index) in form.inspectionReports" :key="index">
                <!-- 后缀如果包含 .pdf 显示pdf图标 -->
                <img
                  v-if="item.fileUrl && (item.fileUrl.includes('.pdf') || item.fileUrl.includes('.PDF'))"
                  style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
                  src="@/assets/images/pdf.png"
                  fit="fill"
                  @click="handleFile(item)"
                />
                <!-- 后缀如果包含 .word 显示 word图片 -->
                <img
                  v-else-if="
                    item.fileUrl &&
                    (item.fileUrl.includes('.doc') ||
                      item.fileUrl.includes('.docx') ||
                      item.fileUrl.includes('.DOC') ||
                      item.fileUrl.includes('.DOCX'))
                  "
                  style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
                  src="@/assets/images/word.png"
                  fit="fill"
                  @click="handleFile(item)"
                />
                <el-image
                  v-else
                  :src="item.fileUrl"
                  alt=""
                  :preview-src-list="[item.fileUrl]"
                  style="width: 120px; height: 120px; margin-right: 10px"
                />
              </div>
            </div>
            <img
              v-else
              src="@/assets/images/no-img.png"
              alt=""
              style="width: 120px; height: 120px; margin-right: 10px"
            />
          </el-form-item>

          <el-form-item label="采购发票" prop="purchaseInvoices">
            <div
              v-if="form.purchaseInvoices && form.purchaseInvoices.length > 0"
              style="display: flex; align-items: center; margin-bottom: 10px"
            >
              <div v-for="(item, index) in form.purchaseInvoices" :key="index">
                <!-- 后缀如果包含 .pdf 显示pdf图标 -->
                <img
                  v-if="item.fileUrl && (item.fileUrl.includes('.pdf') || item.fileUrl.includes('.PDF'))"
                  style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
                  src="@/assets/images/pdf.png"
                  fit="fill"
                  @click="handleFile(item)"
                />
                <!-- 后缀如果包含 .word 显示 word图片 -->
                <img
                  v-else-if="
                    item.fileUrl &&
                    (item.fileUrl.includes('.doc') ||
                      item.fileUrl.includes('.docx') ||
                      item.fileUrl.includes('.DOC') ||
                      item.fileUrl.includes('.DOCX'))
                  "
                  style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
                  src="@/assets/images/word.png"
                  fit="fill"
                  @click="handleFile(item)"
                />
                <el-image
                  v-else
                  :src="item.fileUrl"
                  alt=""
                  :preview-src-list="[item.fileUrl]"
                  style="width: 120px; height: 120px; margin-right: 10px"
                />
              </div>
            </div>
            <img
              v-else
              src="@/assets/images/no-img.png"
              alt=""
              style="width: 120px; height: 120px; margin-right: 10px"
            />
          </el-form-item>

          <el-form-item label="装备二维码" prop="">
            <div class="qrcode-box" style="width: 150px;height: 150px">
              <QrcodeGenerator
                ref="qr3"
                :value="dialogRow"
                errorCorrectionLevel="H"
                :size="150"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getDeviceApi } from '@/api/EquipmentEntryApply'

export default {
  name: 'EquipmentDetails',
  data() {
    return {
      isLoading: false,
      dialogRow: '',
      form: {
        deviceTypeList: [], // 装备类型列表
        appearanceImages: [], // 展示图
        certificates: [], // 合格证
        inspectionReports: [], // 检测证书
        purchaseInvoices: [] // 采购发票
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      try {
        this.isLoading = true
        const res = await getDeviceApi(this.$route.query.id)
        if (res.data) {
          let row = res.data
          const propertyList = row.propertyVoList || []
          const property = propertyList
            // 过滤条件：item 存在 且 propertyValue 有值（避免空值干扰）
            .filter(item => item && item.propertyValue)
            // 拼接单个属性为 "名称:值" 格式
            .map(item => `${item.propertyName}:${item.propertyValue}`)
            // 用分隔符连接（推荐用中文逗号/竖线，可自定义）
            .join(',')
          //3.装备小类，，6.生产厂家，7.出厂日期，8.特征属性
// 单行写法（用\n）
          this.dialogRow =
            `装备名称:${row.name}\r\n` +
            `装备编码:${row.code}\r\n` +
            `规格型号:${row.specificationModel}\r\n` +
            `产权单位:${row.propertyUnit}\r\n` +
            `装备小类:${row.subCategory}\r\n` +
            `生产厂家:${row.manufacturer}\r\n` +
            `出厂日期:${row.productionDate}\r\n` +
            `特征属性:{${property}}`
          this.$nextTick(() => {
            this.$refs.qr3?.refreshQrcode()
          })
        }
        this.form = res.data
        this.form.process = this.form.mainProcess + '>' + this.form.subProcess
        this.form.category =
          this.form.mainCategory + '>' + this.form.subCategory + (this.form.branch ? '>' + this.form.branch : '')
        this.form.manageTypeName = this.form.manageType === 0 ? '编码' : '数量'
      } catch (error) {
        console.log('🚀 ~ getInfo ~ error:', error)
      } finally {
        this.isLoading = false
      }
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    handleFile(item) {
      window.open(item.fileUrl, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  font-size: 18px;
  border-bottom: 1px solid #e6e6e6;
  justify-content: space-between;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    margin-left: 15px;
    color: #303133;
  }
}

.dialog-content {
  padding: 10px 0;
  min-height: 200px; // 确保有足够高度
}

.goBack-btn:hover {
  cursor: pointer;
  color: #33b5a0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px; // 按钮间距
}

/* 紧凑表单行距 */
::v-deep .el-form-item {
  margin-bottom: 16px;
}
</style>
