<template>
  <!-- 修复标题模板字符串语法错误，规范属性顺序 -->
  <!-- 弹窗内容区域 -->
  <div class="app-container" style="height: calc(100vh - 84px)">
    <div class="page-header">
      <div>
        <i
          class="el-icon-arrow-left goBack-btn"
          @click="goBack"
          style="border-color: transparent; color: #00a288; background: transparent; padding-left: 0; padding-right: 0"
          >返回</i
        >
        <span class="page-title">{{ pageTitle }}</span>
      </div>
      <div class="dialog-footer" style="float: right">
        <el-button
          size="small"
          type="primary"
          @click="handleSubmit"
          v-if="!isAddVisible"
          :disabled="tableData.length === 0"
          >{{ submitButtonText }}
        </el-button>
      </div>
    </div>
    <!-- 查询条件 -->
    <el-form :model="queryParams" ref="queryFormRef" :inline="true" inline label-width="auto" size="small">
      <el-card class="search-box">
        <el-row>
          <el-form-item prop="orderCreateUser" label="申请人">
            <el-input
              clearable
              style="width: 200px"
              placeholder="请输入内容"
              v-model.trim="queryParams.orderCreateUser"
            />
          </el-form-item>
          <el-form-item label="申请时间" prop="orderCreateTime">
            <el-date-picker
              type="daterange"
              style="width: 200px"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              v-model="queryParams.orderCreateTime"
            />
          </el-form-item>

          <el-form-item label="审批状态" prop="status">
            <el-select clearable style="width: 200px" placeholder="请选择审批状态" v-model="queryParams.status">
              <el-option label="待审批" value="0" />
              <el-option label="已审批" value="1" />
              <el-option label="草稿" value="3" />
            </el-select>
          </el-form-item>

          <el-form-item prop="name" label="装备名称">
            <el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.name" />
          </el-form-item>

          <el-form-item prop="specificationModel" label="规格型号">
            <el-input
              clearable
              style="width: 200px"
              placeholder="请输入内容"
              v-model.trim="queryParams.specificationModel"
            />
          </el-form-item>

          <el-form-item prop="originalCode" label="装备原始编码">
            <el-input clearable style="width: 200px" placeholder="请输入内容" v-model.trim="queryParams.originalCode" />
          </el-form-item>

          <el-form-item prop="manufacturerId" label="生产厂家">
            <el-select v-model="queryParams.manufacturerId" placeholder="请选择生产厂家" clearable style="width: 200px">
              <el-option v-for="item in manufacturerList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item prop="productionDate" label="出厂日期">
            <el-date-picker
              type="daterange"
              style="width: 200px"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              v-model="queryParams.productionDate"
            />
          </el-form-item>

          <!--        <el-form-item prop="keyword" label="采购日期">
                    <el-date-picker
                      type="date"
                      style="width: 240px"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择采购日期"
                      v-model="queryParams.applyTime"
                    />
                  </el-form-item>-->

          <el-form-item prop="minBuyPrice" label="资产原值(万元)">
            <el-input clearable style="width: 95px" placeholder="请输入" v-model.trim="queryParams.minBuyPrice" />
          </el-form-item>
          <el-form-item prop="maxBuyPrice" label="-" style="margin-left: -6%">
            <el-input clearable style="width: 95px" placeholder="请输入" v-model.trim="queryParams.maxBuyPrice" />
          </el-form-item>

          <el-form-item style="float: right">
            <el-button icon="el-icon-search" type="primary" @click="queryTableList" size="mini"> 查询 </el-button>
            <el-button icon="el-icon-refresh" @click="resetTableList" size="mini"> 重置 </el-button>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right"> </el-col>
        </el-row>
      </el-card>
    </el-form>

    <el-card class="content-box">
      <el-row>
        <el-col :span="24" style="text-align: right">
          <el-button
            type="primary"
            size="mini"
            @click="equipmentDeployment"
            v-show="!isAddVisible"
          >
            新增装备
          </el-button>
          <el-button type="primary" size="mini" @click="handleImport" v-show="!isAddVisible"> 批量导入 </el-button>
          <el-button type="primary" size="mini" @click="handleImportImg" v-show="!isAddVisible">
            批量导入图片
          </el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: auto"
        show-overflow-tooltip
        :span-method="handleSpanMethod"
        border
        stripe
        height="546"
      >
        <el-table-column
          label="序号"
          align="center"
          width="55"
          type="index"
          :index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
        >
          <template slot="header" slot-scope="scope">
            <div>序号</div>
            <div>
              <i
                class="el-icon-circle-plus-outline"
                style="color: #48a089; font-size: 20px; cursor: pointer"
                @click="addList"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNumber"
          label="录入单号"
          align="center"
          show-overflow-tooltip
          column-key="orderNumber"
          min-width="200"
        />
        <el-table-column prop="major" label="专业" align="center" show-overflow-tooltip min-width="200px">
          <template slot-scope="{ row }">
            <span v-if="!row.isNew">{{ row.major }}</span>
            <el-select
              v-else
              v-model="row.major"
              placeholder="请选择专业"
              clearable
              filterable
              @change="(val) => majorChange(val, row)"
              style="width: 100%"
            >
              <el-option v-for="item in row.majorList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="工序" align="center" show-overflow-tooltip min-width="200px">
          <template slot-scope="{ row }">
            <span v-if="!row.isNew">{{ row.mainProcess }}{{ row.subProcess ? '>' + row.subProcess : '' }}</span>
            <el-cascader
              v-else
              v-model="row.process"
              placeholder="请选择工序"
              clearable
              filterable
              :options="row.processList"
              @change="(val) => processChange(val, row)"
              style="width: 100%"
            ></el-cascader>
          </template>
        </el-table-column>

        <el-table-column label="装备类目" show-overflow-tooltip align="center" min-width="200px">
          <template slot-scope="{ row }">
            <span v-if="!row.isNew">
              {{ row.mainCategory ? row.mainCategory + '>' : '' }}
              {{ row.branch ? row.subCategory + '>' : row.subCategory }}{{ row.branch }}
            </span>
            <el-cascader
              v-else
              v-model="row.category"
              :options="row.categoryList"
              clearable
              filterable
              placeholder="请选择装备类目"
              @change="(val) => categoryChange(val, row)"
              style="width: 100%"
            ></el-cascader>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="装备名称" show-overflow-tooltip align="center" min-width="200px">
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.name }}</span>
            <el-input v-else maxlength="50" v-model="row.name" placeholder="请输入装备名称" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="specificationModel"
          label="规格型号"
          show-overflow-tooltip
          align="center"
          min-width="200px"
        >
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.specificationModel }}</span>
            <el-input v-else maxlength="50" v-model="row.specificationModel" placeholder="请输入规格型号" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="originalCode"
          label="装备原始编码"
          show-overflow-tooltip
          align="center"
          min-width="200px"
        >
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.originalCode }}</span>
            <el-input v-else maxlength="50" v-model="row.originalCode" placeholder="请输入装备原始编码" clearable />
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="计量单位" show-overflow-tooltip align="center" min-width="200px">
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.unit }}</span>
            <el-select v-else v-model="row.unit" placeholder="请选择计数单位" clearable style="width: 100%">
              <el-option
                v-for="dict in dict.type.dev_unit_type"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="manufacturer" label="生产厂家" show-overflow-tooltip align="center" min-width="200px">
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.manufacturer }}</span>
            <el-select v-else v-model="row.manufacturerId" placeholder="请选择生产厂家" clearable style="width: 100%">
              <el-option v-for="item in manufacturerList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="productionDate" label="出厂日期" show-overflow-tooltip align="center" min-width="200px">
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.productionDate }}</span>
            <el-date-picker
              v-else
              v-model="row.productionDate"
              type="date"
              placeholder="请选择出厂日期"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              :picker-options="{
                disabledDate(time) {
                  return time.getTime() > Date.now()
                },
              }"
            />
          </template>
        </el-table-column>
        <el-table-column prop="purchaseDate" label="采购日期" align="center" min-width="200px">
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.purchaseDate }}</span>
            <el-date-picker
              v-else
              v-model="row.purchaseDate"
              type="date"
              placeholder="请选择采购日期"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              :picker-options="{
                disabledDate(time) {
                  return time.getTime() > Date.now()
                },
              }"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="originalValue"
          label="资产原值(万元)"
          show-overflow-tooltip
          align="center"
          min-width="200px"
        >
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.originalValue }}</span>
            <el-input
              v-else
              maxlength="20"
              v-model="row.originalValue"
              placeholder="请输入资产原值(万元)"
              clearable
              @input="(val) => handlePriceInput(val, row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="maxServiceLifeYears" label="最大使用年限（年）" align="center" min-width="200px">
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.maxServiceLifeYears }}</span>
            <el-input-number
              v-else
              clearable
              maxlength="20"
              placeholder="请输入最大使用年限"
              v-model="row.maxServiceLifeYears"
              :min="1"
              :max="100"
              :precision="0"
              :controls="false"
              style="width: 100%"
            />
          </template>
        </el-table-column>
        <el-table-column prop="nextMaintenanceDate" label="下次维保日期" align="center" min-width="200px">
          <template v-slot="{ row }">
            <span v-if="!row.isNew">{{ row.nextMaintenanceDate }}</span>
            <el-date-picker
              v-else
              v-model="row.nextMaintenanceDate"
              type="date"
              placeholder="请选择下次维保日期"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              :picker-options="{
                disabledDate(time) {
                  return time.getTime() < Date.now()
                },
              }"
            />
          </template>
        </el-table-column>
        <el-table-column prop="province" label="所属省份" show-overflow-tooltip align="center" min-width="200px" />
        <el-table-column
          prop="appearanceImages"
          label="装备外观"
          show-overflow-tooltip
          align="center"
          min-width="200px"
        >
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" v-if="row.isNew" @click="handleFileUpload(row, 1)">上传</span>
            <span style="color: #00a288; cursor: pointer; margin-left: 10px" @click="handleView(row, 1)">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="certificates" label="合格证" show-overflow-tooltip align="center" min-width="200px">
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" v-if="row.isNew" @click="handleFileUpload(row, 2)">上传</span>
            <span style="color: #00a288; cursor: pointer; margin-left: 10px" @click="handleView(row, 2)">查看</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="inspectionReports"
          label="定期检验报告"
          show-overflow-tooltip
          align="center"
          min-width="200px"
        >
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" v-if="row.isNew" @click="handleFileUpload(row, 3)">上传</span>
            <span style="color: #00a288; cursor: pointer; margin-left: 10px" @click="handleView(row, 3)">查看</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="purchaseInvoices"
          label="采购发票"
          show-overflow-tooltip
          align="center"
          min-width="200px"
        >
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" v-if="row.isNew" @click="handleFileUpload(row, 4)">上传</span>
            <span style="color: #00a288; cursor: pointer; margin-left: 10px" @click="handleView(row, 4)">查看</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in columns"
          v-if="item.visible"
          :key="index"
          align="center"
          show-overflow-tooltip
          :label="item.label"
          :prop="item.prop"
          min-width="200px"
        >
          <template v-slot="{ row }" v-if="/^feature(Item|Value)\d+$/.test(item.prop)">
            <div
              v-if="
                (index + 1) % 2 === 0 &&
                row.isNew &&
                row.propertyVoList.length > 0 &&
                row.propertyVoList[(index + 1) / 2 - 1]
              "
            >
              <el-input
                v-if="row.propertyVoList[(index + 1) / 2 - 1].inputType == 1"
                autocomplete="off"
                maxlength="30"
                v-model="row.propertyVoList[(index + 1) / 2 - 1].propertyValue"
                clearable
              />
              <el-select
                v-if="row.propertyVoList[(index + 1) / 2 - 1].inputType == 2"
                v-model="row.propertyVoList[(index + 1) / 2 - 1].propertyValue"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in row.propertyVoList[(index + 1) / 2 - 1].valueList"
                  :key="index"
                  :label="item.value"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-if="row.propertyVoList[(index + 1) / 2 - 1].inputType == 3"
                v-model="row.propertyVoList[(index + 1) / 2 - 1].propertyValues"
                placeholder="请选择"
                multiple
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item2, index) in row.propertyVoList[(index + 1) / 2 - 1].valueList2"
                  :key="index"
                  :label="item2.value"
                  :value="item2.value"
                />
              </el-select>
            </div>
            <span v-else>{{ getFeatureValue(row, item.prop) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="orderCreateUser"
          label="申请人"
          show-overflow-tooltip
          align="center"
          fixed="right"
          min-width="200px"
        />
        <el-table-column
          prop="orderCreateTime"
          label="申请时间"
          show-overflow-tooltip
          align="center"
          fixed="right"
          min-width="200px"
        /> -->
        <el-table-column
          prop="entryStatus"
          align="center"
          show-overflow-tooltip
          label="审批状态"
          fixed="right"
          min-width="100px"
        >
          <template slot-scope="{ row }">
            <el-tag v-if="row.entryStatus == 0" size="small" type="warning">待审批</el-tag>
            <el-tag v-if="row.entryStatus == 1" size="small" type="success">已通过</el-tag>
            <el-tag v-if="row.entryStatus == 2" size="small" type="success">已驳回</el-tag>
            <el-tag v-if="row.entryStatus == 3" size="small" type="info">草稿</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="220" fixed="right">
          <template slot-scope="{ row, $index }">
            <el-button v-if="!row.isNew" type="text" icon="el-icon-view" @click="handleViewDetail(row)">
              查看
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="editRowInfo(row)"
              v-if="row.orderStatus == '3' && !isAddVisible"
            >
              编辑
            </el-button>
            <el-button type="text" icon="el-icon-edit" @click="submitRow(row)" v-if="row.isNew"> 保存 </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="deleteRowInfo(row, $index)"
              v-if="(row.orderStatus == '3' && !isAddVisible) || row.isNew"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrapper">
        <pagination
          :total="total"
          @pagination="getList"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
        />
      </div>
    </el-card>
    <EquipmentEntryEditDialog
      :is-visible.sync="isEditVisible"
      :order-id="orderId"
      :is-view="isViewMode"
      @getOrderId="getOrderId"
    />
    <!-- 图片上传 -->
    <el-dialog :title="uploadTitle" :visible.sync="uploadVisible" width="40%">
      <FileUpload
        v-model="fileList"
        :value="fileList"
        :limit="uploadLimit"
        :fileSize="fileSize"
        :fileType="uploadFileType"
        @input="handleFileList"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
      <el-table :data="dialogList" fit highlight-current-row style="width: 100%" height="546">
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column label="附件名称" prop="fileName" align="center">
          <!-- 插槽 -->
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" @click="handleFile(row)">{{ row.fileName }}</span>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="批量导入图片" :visible.sync="upload.open2" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".zip"
        :headers="upload.headers"
        :action="upload.url2 + '?orderId=' + orderId"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入zip格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate2"
            >下载模板
          </el-link>
        </div>
      </el-upload>
    </el-dialog>
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?orderId=' + orderId"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EquipmentEntryEditDialog from '@/views/EquipmentEntryApply/equipmentInput/edit.vue'

// 使用defineComponent规范组件定义
import {
  getDeviceByOrderIdApi,
  equipmentPassAndRejectApiNew,
  equipmentSubmitApiNew,
  removeDeviceApi,
  getEquipmentAddIdApi,
  addInterDevice,
  equipmentEditApiNew,
  firstLevel,
  secondAndThirdLevel,
  fourthToSixthLevel,
  getEquipmentPropertyTypeApi,
} from '@/api/EquipmentEntryApply'
import { getManufacturerSelectApi } from '@/api/EquipmentLedger/index.js'
import { getToken } from '@/utils/auth'
import FileUpload from '@/components/FileImageUpload'

export default {
  name: 'EquipmentInput',
  components: { EquipmentEntryEditDialog, FileUpload },
  emits: ['update:isVisible', 'submit'], // 声明事件
  dicts: ['dev_unit_type'],
  created() {
    console.log('🚀 ~ this.$route:', this.$route)
    this.orderId = this.$route.query && this.$route.query.orderId
    console.log('🚀 ~ this.orderId:', this.orderId)
    this.isAddVisible = this.$route.query.isAddVisible && JSON.parse(this.$route.query.isAddVisible)
    this.isApprovalVisible = this.$route.query.isApprovalVisible && JSON.parse(this.$route.query.isApprovalVisible)
    if (!this.orderId) {
      this.pageTitle = '新增设备录入'
      this.submitButtonText = '提交申请'
    } else if (this.isAddVisible) {
      this.pageTitle = '查看装备'
      this.submitButtonText = ''
      this.getList()
    } else {
      this.pageTitle = '编辑装备'
      this.submitButtonText = '提交申请'
      this.getList()
    }
  },
  data() {
    return {
      isSubmit: false,
      isAddVisible: false,
      isApprovalVisible: false,
      isEditVisible: false,
      orderId: '',
      // 表格数据
      tableData: [],
      total: 0,
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        open2: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据

        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/material-mall/order/importData',
        url2: process.env.VUE_APP_BASE_API + '/material-mall/order/upload-multi',
      },
      queryParams: {
        orderCreateUser: '',
        orderCreateTime: '',
        status: '',
        name: '',
        specificationModel: '',
        originalCode: '',
        manufacturerId: '',
        productionDate: '',
        minBuyPrice: '',
        maxBuyPrice: '',

        pageNum: 1,
        pageSize: 10,
      },
      currentRow: null,
      uploadType: 1, // 1:装备外观，2：合格证，3：定期检验报告，4：采购发票
      uploadVisible: false,
      uploadTitle: '',
      uploadLimit: 3,
      fileSize: 10,
      uploadFileType: ['jpg', 'png', 'pdf'],
      fileList: null,
      orderNumber: '',
      manufacturerList: [], // 生产厂家列表
      // 可添加表单数据
      formData: {
        // 示例字段，可根据实际需求修改
        equipmentName: '',
        model: '',
        quantity: 1,
      },
      isViewMode: false, // 添加查看模式标识
      pageTitle: '',
      submitButtonText: '',
      columns: [
        { key: 26, label: `特征项1`, prop: 'featureItem1', visible: true },
        { key: 27, label: `特征值1`, prop: 'featureValue1', visible: true },
        { key: 28, label: `特征项2`, prop: 'featureItem2', visible: true },
        { key: 29, label: `特征值2`, prop: 'featureValue2', visible: true },
        { key: 30, label: `特征项3`, prop: 'featureItem3', visible: true },
        { key: 31, label: `特征值3`, prop: 'featureValue3', visible: true },
        { key: 32, label: `特征项4`, prop: 'featureItem4', visible: true },
        { key: 33, label: `特征值4`, prop: 'featureValue4', visible: true },
        { key: 34, label: `特征项5`, prop: 'featureItem5', visible: true },
        { key: 35, label: `特征值5`, prop: 'featureValue5', visible: true },
        { key: 36, label: `特征项6`, prop: 'featureItem6', visible: true },
        { key: 37, label: `特征值6`, prop: 'featureValue6', visible: true },
        { key: 38, label: `特征项7`, prop: 'featureItem7', visible: true },
        { key: 39, label: `特征值7`, prop: 'featureValue7', visible: true },
        { key: 40, label: `特征项8`, prop: 'featureItem8', visible: true },
        { key: 41, label: `特征值8`, prop: 'featureValue8', visible: true },
        { key: 42, label: `特征项9`, prop: 'featureItem9', visible: true },
        { key: 43, label: `特征值9`, prop: 'featureValue9', visible: true },
      ],
      dialogVisible: false,
      dialogTitle: '',
      dialogList: [],
    }
  },
  watch: {
    isVisible(val) {
      if (val) {
        this.getList()
      }
    },
  },
  mounted() {
    this.getManufacturerSelectList()
  },
  methods: {
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.open2 = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          '</div>',
        '导入结果',
        { dangerouslyUseHTMLString: true },
      )
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
    // 获取厂家
    getManufacturerSelectList() {
      getManufacturerSelectApi().then((res) => {
        console.log('🚀 ~ getManufacturerSelectList ~ res:', res)
        if (res.code === 200) {
          this.manufacturerList = res.data
        }
      })
    },
    // 返回上一页
    goBack() {
      // this.$router.go(-1)
      this.$router.push({ path: '/equipment/equipment-entry-apply' })
    },
    async approval(row, status) {
      equipmentPassAndRejectApiNew({ devIds: row.maId, status: status, id: this.orderId }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功',
          })
          this.getList()
        }
      })
    },
    // 获取列表数据
    async getList() {
      try {
        this.queryParams.startOrderCreateTime = this.queryParams.orderCreateTime
          ? this.queryParams.orderCreateTime[0]
          : ''
        this.queryParams.endOrderCreateTime = this.queryParams.orderCreateTime
          ? this.queryParams.orderCreateTime[1]
          : ''
        this.queryParams.startProductionDate = this.queryParams.productionDate ? this.queryParams.productionDate[0] : ''
        this.queryParams.endProductionDate = this.queryParams.productionDate ? this.queryParams.productionDate[1] : ''
        this.queryParams.orderId = this.orderId
        const params = { ...this.queryParams }
        delete params.orderCreateTime
        delete params.productionDate
        const res = await getDeviceByOrderIdApi(params)
        this.tableData = res.data.rows
        this.total = res.data.total
      } catch (error) {
        console.error('获取列表失败:', error)
      }
    },

    getOrderId(data) {
      this.orderId = data.orderId
      this.queryTableList()
    },

    // 查询表格数据
    queryTableList() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    equipmentDeployment() {
      this.$router.push({
        path: '/equipment/equipment-input/add',
        query: {
          orderId: this.orderId,
        },
      })
    },

    // 删除按钮
    async deleteRowInfo(row, index) {
      this.$confirm('是否确定删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          if (row.maId) {
            return removeDeviceApi([row.maId])
          } else {
            this.tableData.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功',
            })
          }
        })
        .then((res) => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功',
            })
            this.getList()
          }
        })
        .catch(() => {})
    },
    // 重置表格查询
    resetTableList() {
      this.$refs.queryFormRef.resetFields()
      this.queryParams.pageNum = 1
      this.getList()
    },

    /**
     * 处理表单提交
     */
    handleSubmit() {
      if (this.isSubmit) return
      this.isSubmit = true
      const loading = this.$loading()
      equipmentSubmitApiNew({ id: this.orderId, status: 0 })
        .then((res) => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '提交成功',
            })
            // this.goBack()
            this.$router.push({ path: '/equipment/equipment-entry-apply' })
          }
        })
        .finally(() => {
          this.isSubmit = false
          loading.close()
        })
    },

    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 如果不是“录入单号”列，则不处理
      if (columnIndex !== 1) {
        // 假设“录入单号”是第1列（index=1）
        return {
          rowspan: 1,
          colspan: 1,
        }
      }

      const orderNumber = row.orderNumber
      this.orderNumber = orderNumber
      let count = 1

      // 计算从当前行开始，连续有多少个相同的 orderNumber
      for (let i = rowIndex + 1; i < this.tableData.length; i++) {
        if (this.tableData[i].orderNumber === orderNumber) {
          count++
        } else {
          break
        }
      }

      // 判断当前行是否是该 orderNumber 的第一条记录
      const isFirst = !this.tableData.some((item, idx) => idx < rowIndex && item.orderNumber === orderNumber)

      if (isFirst) {
        // 第一次出现，合并 count 行
        return {
          rowspan: count,
          colspan: 1,
        }
      } else {
        // 不是第一次，隐藏该单元格
        return {
          rowspan: 0,
          colspan: 0,
        }
      }
    },
    handleImport() {
      this.upload.title = '导入'
      this.upload.open = true
    },
    handleImportImg() {
      this.upload.open2 = true
    },
    //编辑
    editRowInfo(row) {
      // this.orderId = orderId.toString()
      // this.isViewMode = false // 编辑模式
      // this.isEditVisible = true
      this.$router.push({
        path: '/equipment/equipment-input/add',
        query: {
          maId: row.maId,
          orderId: this.orderId,
        },
      })
    },

    // 修改查看方法
    showEquipmentInput(orderId, isView) {
      this.orderId = orderId.toString()
      this.isViewMode = isView || false // 设置查看模式
      this.isEditVisible = true
    },
    handleViewDetail(row) {
      this.$router.push({ path: '/equipment/details', query: { id: row.maId } })
    },
    getFeatureValue(row, prop) {
      const match = prop.match(/feature(Item|Value)(\d+)/)
      if (!match) return '-'

      const type = match[1] // 'Item' or 'Value'
      const index = Number(match[2]) - 1
      const list = row.propertyVoList || []

      if (!list[index]) return '-'

      return type === 'Item' ? list[index].propertyName : list[index].propertyValue
    },
    handleFile(row) {
      // 打开文件预览
      window.open(row.fileUrl, '_blank')
    },
    // 查看
    handleView(row, type) {
      if (type == 1) {
        this.dialogTitle = '装备外观'
        this.dialogList = row.appearanceImages || []
      } else if (type == 2) {
        this.dialogTitle = '合格证'
        this.dialogList = row.certificates || []
      } else if (type == 3) {
        this.dialogTitle = '定期检验报告'
        this.dialogList = row.inspectionReports || []
      } else if (type == 4) {
        this.dialogTitle = '采购发票'
        this.dialogList = row.purchaseInvoices || []
      }
      this.dialogVisible = true
    },
    // 上传
    handleFileUpload(row, type) {
      this.uploadType = type
      this.currentRow = row
      if (type == 1) {
        this.uploadTitle = '装备外观'
        this.fileList = row.fileList1
        this.uploadLimit = 6
        this.fileSize = 5
        this.uploadFileType = ['jpg', 'png', 'jpeg']
      } else if (type == 2) {
        this.uploadTitle = '合格证'
        this.fileList = row.fileList2
        this.uploadLimit = 3
        this.fileSize = 10
        this.uploadFileType = ['jpg', 'png', 'pdf']
      } else if (type == 3) {
        this.uploadTitle = '定期检验报告'
        this.fileList = row.fileList3
        this.uploadLimit = 3
        this.fileSize = 10
        this.uploadFileType = ['jpg', 'png', 'pdf']
      } else if (type == 4) {
        this.uploadTitle = '采购发票'
        this.fileList = row.fileList4
        this.uploadLimit = 3
        this.fileSize = 10
        this.uploadFileType = ['jpg', 'png', 'pdf']
      }
      this.uploadVisible = true
    },
    handleFileList(file) {
      console.log('🚀 ~ file:', file)
      if (this.uploadType == 1) {
        this.currentRow.fileList1 = file
        if (!file) {
          this.currentRow.appearanceImages = []
          return
        }
        this.currentRow.appearanceImages = this.formatFileList(file)
      } else if (this.uploadType == 2) {
        this.currentRow.fileList2 = file
        if (!file) {
          this.currentRow.certificates = []
          return
        }
        this.currentRow.certificates = this.formatFileList(file)
      } else if (this.uploadType == 3) {
        this.currentRow.fileList3 = file
        if (!file) {
          this.currentRow.inspectionReports = []
          return
        }
        this.currentRow.inspectionReports = this.formatFileList(file)
      } else if (this.uploadType == 4) {
        this.currentRow.fileList4 = file
        if (!file) {
          this.currentRow.purchaseInvoices = []
          return
        }
        this.currentRow.purchaseInvoices = this.formatFileList(file)
      }
    },
    formatFileList(file) {
      const arr = file.split(',')
      return arr.map((item) => {
        const parts = item.split('/')
        return {
          fileName: parts[parts.length - 1],
          fileUrl: item,
        }
      })
    },
    importTemplate() {
      this.download('/material-mall/order/template', {}, `装备信息导入模板_${new Date().getTime()}.xlsx`)
    },
    importTemplate2() {
      this.download(`/material-mall/order/zip?orderId=${this.orderId}`, {}, `装备信息图片导入模板_${new Date().getTime()}.zip`)
    },
    async addList() {
      try {
        if (!this.$route.query.orderId) {
          const result = await getEquipmentAddIdApi()
          this.orderId = result.data.id
          this.$router.replace({
            query: {
              orderId: result.data.id,
              isAddVisible: this.isAddVisible,
              isApprovalVisible: this.isApprovalVisible,
            },
          })
        }
        const newRow = {
          isNew: true, // 标记为新行
          orderNumber: this.orderNumber,
          major: '', // 专业
          process: [], // 工序
          category: [], // 类目
          name: '', // 装备名称
          specificationModel: '', // 规格型号
          originalValue: '', // 资产原值
          productionDate: '', // 出厂日期
          manufacturerId: '', // 生产厂家
          originalCode: '', // 装备原始编码
          nextMaintenanceDate: '', // 下次维保日期
          maxServiceLifeYears: '', // 装备寿命
          manageType: '0', // 管理模式
          count: 1, // 装备数量
          unit: '', // 计数单位
          purchaseDate: '', // 采购日期
          appearanceImages: [], // 装备图片
          certificates: [], // 合格证
          inspectionReports: [], // 检测证书
          purchaseInvoices: [], // 采购发票
          propertyVoList: [], // 特征属性

          majorList: [], // 专业列表
          processList: [], // 工序列表
          categoryList: [], // 类目列表
          manufacturerList: [], // 生产厂家列表
          fileList1: null, // 装备图片
          fileList2: null, // 合格证
          fileList3: null, // 检测证书
          fileList4: null, // 采购发票
        }
        await this.getFirstLevel(newRow)
        this.tableData.unshift(newRow)
        console.log('🚀 ~ this.tableData:', this.tableData)
      } catch (error) {
        console.log('🚀 ~ error:', error)
      }
    },
    // 转换为树形结构
    convertToSubTree(list) {
      const map = {}
      const tree = []

      // 构建节点映射
      list.forEach((item) => {
        map[item.value] = {
          value: item.value.toString(),
          label: item.label,
        }
      })

      // 构建树形关系
      list.forEach((item) => {
        const current = map[item.value]
        const parent = map[item.parentId]

        if (parent) {
          if (!parent.children) {
            parent.children = []
          }
          parent.children.push(current)
        } else {
          tree.push(current)
        }
      })

      return tree
    },
    getFirstLevel(row) {
      console.log('🚀 ~ row:', row)
      firstLevel().then((res) => {
        if (res.code === 200) {
          row.majorList = res.data
        }
      })
    },
    majorChange(item, row) {
      console.log('🚀 ~ item, row:', item, row)
      if (!item) {
        row.processList = []
        row.process = []
      } else {
        secondAndThirdLevel({ firstLevelId: item }).then((res) => {
          if (res.code === 200) {
            row.processList = this.convertToSubTree(res.data)
          }
        })
      }
    },
    processChange(item, row) {
      console.log('🚀 ~ processChange ~ item:', item)
      if (item.length === 0) {
        row.categoryList = []
        row.category = []
      } else {
        fourthToSixthLevel({ thirdLevelId: item[item.length - 1] }).then((res) => {
          if (res.code === 200) {
            row.categoryList = this.convertToSubTree(res.data)
          }
        })
      }
    },
    categoryChange(item, row) {
      console.log('🚀 ~ processChange ~ item:', item)
      row.propertyVoList = []
      this.getPropertyVoList(item[item.length - 1], row)
    },
    // 获取特征值
    async getPropertyVoList(typeId, row) {
      try {
        const res = await getEquipmentPropertyTypeApi(typeId)
        console.log('特征值-->:', res)
        row.propertyVoList = res.data || []
        row.propertyVoList.forEach((item) => {
          if (item.inputType == 2) {
            item.valueList = this.handleData(item.value)
          }
          if (item.inputType == 3) {
            item.valueList2 = this.handleData(item.value)
            // item.propertyValues = null
            this.$set(item, 'propertyValues', null)
          }
        })
        console.log('🚀 ~ row.propertyVoList:', row.propertyVoList)
      } catch (error) {
        console.log('获取特征值失败:', error)
      }
    },
    // 价格输入处理
    handlePriceInput(v, row) {
      row.originalValue = row.originalValue
        .replace(/[^\d.]/g, '') // 删除所有非数字和点
        .replace(/\.{2,}/g, '.') // 多个点 -> 单点
        .replace(/^(\d+)\.(.*)\./, '$1.$2') // 只允许一个点
    },
    submitRow(row) {
      console.log('🚀 ~ row:', row)
      try {
        row.orderId = this.orderId
        row.typeId = row.category.length > 0 ? row.category[row.category.length - 1] : null
        // 校验必填项
        if (!row.major) return this.$message.warning(`请选择专业`)
        if (row.process.length == 0) return this.$message.warning(`请选择工序`)
        if (row.category.length == 0) return this.$message.warning(`请选择类目`)
        if (!row.name) return this.$message.warning(`请填写装备名称`)
        if (!row.specificationModel) return this.$message.warning(`请填写规格型号`)
        if (!row.originalCode) return this.$message.warning(`请填写装备原始编码`)
        if (!row.unit) return this.$message.warning(`请选择计量单位`)
        if (!row.manufacturerId) return this.$message.warning(`请选择生产厂家`)
        if (!row.productionDate) return this.$message.warning(`请选择出厂日期`)
        if (!row.purchaseDate) return this.$message.warning(`请选择采购日期`)
        if (!row.originalValue) return this.$message.warning(`请填写资产原值`)
        if (!row.maxServiceLifeYears) return this.$message.warning(`请填写最大使用年限`)
        if (!row.nextMaintenanceDate) return this.$message.warning(`请选择下次维保日期`)
        if (row.appearanceImages.length == 0) return this.$message.warning(`请上传装备外观`)
        if (row.certificates.length == 0) return this.$message.warning(`请上传合格证`)
        if (row.inspectionReports.length == 0) return this.$message.warning(`请上传定期检验报告`)

        row.propertyVoList.forEach((item) => {
          if (item.inputType == 3 && Array.isArray(item.propertyValues)) {
            item.propertyValue = item.propertyValues.join(',')
          }
        })
        // 判断特征项是否填写
        if (row.propertyVoList && row.propertyVoList.length > 0) {
          const unfilledIndex = row.propertyVoList.findIndex(
            (item) => (!item.propertyValue || item.propertyValue === '') && item.mustHave != '0',
          )

          if (unfilledIndex !== -1) {
            this.$message.warning(`第 ${unfilledIndex + 1} 个特征项为必填项，请填写完整`)
            return
          }
        }
        console.log('🚀 ~ row.propertyVoList:', row.propertyVoList)

        // 二次确认
        this.$confirm('确定要提交吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          if (this.isSubmit) return
          this.isSubmit = true
          const loading = this.$loading()
          try {
            if (row.maId) {
              await equipmentEditApiNew(row)
            } else {
              await addInterDevice(row)
            }
            this.getList()
          } catch (error) {
            console.log('🚀 ~ error:', error)
          } finally {
            this.isSubmit = false
            loading.close()
          }
        })
      } catch (error) {
        console.log('🚀 ~ error:', error)
      }
    },
    // 处理数据
    handleData(data) {
      console.log('处理数据:', data)
      if (!data) return []
      return data.split(',').map((item) => {
        return {
          label: item,
          value: item,
        }
      })
    },
  },
}
</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; // 确保有足够高度
}

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

.search-box {
  margin-bottom: 20px;
  border-radius: 8px;
}

.content-box {
  border-radius: 8px;
  height: calc(100vh - 350px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  ::v-deep .el-card__body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 20px;
  }

  .el-row:first-child {
    margin-bottom: 16px;
    flex-shrink: 0;

    .el-col {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
  }

  .table-container {
    flex: 1;
    overflow: hidden;
    margin-bottom: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .pagination-wrapper {
    flex-shrink: 0;
    padding-top: 6px;
    margin-top: auto;

    ::v-deep .pagination-container {
      padding: 0px 20px !important;
      /* margin-bottom: 30px; */
    }
  }

  ::v-deep .el-table {
    // 启用斑马纹
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #f6fbfa !important; // 浅紫色
      }
    }

    .el-table__header {
      background: #e9f0ee;

      th {
        background: #e9f0ee !important;
        color: #606266;
        font-weight: 600;
        height: 50px;
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
      background-color: #ccf1e9 !important;
    }

    .el-table__body tr.hover-row > td.el-table__cell {
      background-color: #ccf1e9 !important;
    }
  }
}
::v-deep .el-input-number.is-without-controls .el-input__inner {
  text-align: left;
}
</style>
