<template>
  <div class="">
    <el-form :model="queryParams" ref="queryFormRef" 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="entryStatus">
            <el-select clearable style="width: 200px" placeholder="请选择审批状态" v-model="queryParams.entryStatus">
              <el-option label="待审批" value="0" />
              <el-option label="已通过" value="1" />
              <el-option label="已驳回" value="2" />
            </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="minOriginalValue" label="资产原值(万元)">
            <el-input clearable style="width: 85px" placeholder="请输入" v-model.trim="queryParams.minOriginalValue" />

          </el-form-item>
          <el-form-item prop="maxOriginalValue" label="-" style="margin-left: -85px;" label-width="107px">
            <el-input clearable style="width: 85px" placeholder="请输入" v-model.trim="queryParams.maxOriginalValue" />
          </el-form-item>




        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;">

            <el-button class="primary-lease" size="mini" icon="el-icon-search" type="primary" @click="getEquipmentApplyList">
              查询
            </el-button>
            <el-button class="primary-lease" size="mini" icon="el-icon-refresh" @click="resetForm">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="content-box">
        <el-row>
          <el-col>
            <el-button class="primary-lease" size="mini" type="primary" @click="showEquipmentInput()">
              装备录入
            </el-button>
  
            <el-button class="primary-lease" size="mini" type="primary" @click="showDetails('0')">
              展开明细
            </el-button>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <div >
        <el-table :data="tableData" border stripe :span-method="handleSpanMethod" height="546">
          <!--      <el-table :data="tableData"  >-->
          <el-table-column label="序号" align="center" width="55" type="index" />
          <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="100" />
          <el-table-column prop="orderNumber" label="工序" align="center" show-overflow-tooltip min-width="100">
            <template slot-scope="scope">
              {{ scope.row.mainProcess }}{{ scope.row.subProcess ? '>' + scope.row.subProcess : '' }}
            </template>
          </el-table-column>
  
          <el-table-column prop="orderNumber" label="装备类目" show-overflow-tooltip align="center" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.mainCategory ? scope.row.mainCategory + '>' : '' }}
              {{ scope.row.branch ? scope.row.subCategory + '>' : scope.row.subCategory }}{{ scope.row.branch }}
            </template>
          </el-table-column>
  
          <el-table-column prop="name" label="装备名称" show-overflow-tooltip align="center" min-width="100" />
          <el-table-column prop="specificationModel" label="规格型号" show-overflow-tooltip align="center"
            min-width="100" />
          <el-table-column prop="originalCode" label="装备原始编码" show-overflow-tooltip align="center" min-width="100" />
          <el-table-column prop="unit" label="计量单位" show-overflow-tooltip align="center" min-width="100" />
          <el-table-column prop="manufacturer" label="生产厂家" show-overflow-tooltip align="center" min-width="100" />
          <el-table-column prop="productionDate" label="出厂日期" show-overflow-tooltip align="center" min-width="100" />
          <!--        <el-table-column prop="orderNumber" label="采购日期" align="center"/>-->
          <el-table-column prop="originalValue" label="资产原值(万元)" show-overflow-tooltip align="center" min-width="100" />
          <!--        <el-table-column prop="orderNumber" label="最大使用年限（年）" align="center"/>-->
          <!--        <el-table-column prop="orderNumber" label="下次维保日期" align="center"/>-->
          <el-table-column prop="province" label="所属省份" show-overflow-tooltip align="center" min-width="100" />
          <el-table-column prop="appearanceImages" label="装备外观" show-overflow-tooltip align="center" min-width="100">
            <template v-slot="{ row }">
              <span style="color: #00a288; cursor: pointer" @click="handleView(row, 1)">查看</span>
            </template>
          </el-table-column>
          <el-table-column prop="certificates" label="合格证" show-overflow-tooltip align="center" min-width="100">
            <template v-slot="{ row }">
              <span style="color: #00a288; cursor: pointer" @click="handleView(row, 2)">查看</span>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionReports" label="定期检验报告" show-overflow-tooltip align="center" min-width="100">
            <template v-slot="{ row }">
              <span style="color: #00a288; cursor: pointer" @click="handleView(row, 3)">查看</span>
            </template>
          </el-table-column>
          <el-table-column prop="purchaseInvoices" label="采购发票" show-overflow-tooltip align="center" min-width="100">
            <template v-slot="{ row }">
              <span style="color: #00a288; cursor: pointer" @click="handleView(row, 4)">查看</span>
            </template>
          </el-table-column>
          <el-table-column v-for="(item, index) in columns2" v-if="item.visible" :key="index" align="center"
            show-overflow-tooltip :label="item.label" :prop="item.prop">
            <template v-slot="{ row }" v-if="/^feature(Item|Value)\d+$/.test(item.prop)">
              <span>
                {{ getFeatureValue(row, item.prop) }}
              </span>
            </template>
          </el-table-column>
          <!--        <el-table-column prop="devCount" label="特征项1" align="center"/>-->
          <!--        <el-table-column prop="devCount" label="特征值1" align="center"/>-->
          <el-table-column prop="orderCreateUser" label="申请人" show-overflow-tooltip align="center" fixed="right"
            min-width="100" />
          <el-table-column prop="orderCreateTime" label="申请时间" show-overflow-tooltip align="center" fixed="right"
            min-width="100" />
          <el-table-column prop="entryStatus" align="center" show-overflow-tooltip label="审批状态" fixed="right"
            min-width="100">
            <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="300" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleViewDetail(row)">
                <i class="el-icon-view"></i> 查看
              </el-button>
              <el-button type="text" @click="showEquipmentInput(row.id, false)" v-if="row.orderStatus == '3'">
                <i class="el-icon-edit"></i> 编辑
              </el-button>
              <el-button type="text" @click="deleteItem(row)" v-if="row.orderStatus == '3'">
                <i class="el-icon-delete"></i> 删除
              </el-button>
  
            </template>
          </el-table-column>
        </el-table>
      </div>
        <div class="pagination-wrapper">
          <!-- 分页 -->
          <pagination :total="total" @pagination="handlePageChange" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" />
        </div>
  
      </el-card>
    </el-form>
    
    <!-- 弹框 -->
    <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>
  </div>
</template>

<script>
import { getDeviceListApi, equipmentDelApiNew } from '@/api/EquipmentEntryApply/index'
import { getManufacturerSelectApi } from '@/api/EquipmentLedger/index.js'

export default {
  name: 'EquipmentDetailList',
  data() {
    return {
      total: 0,
      orderId: '',
      isVisible: false,
      isAddVisible: false,
      queryParams: {
        orderCreateUser: '',
        orderCreateTime: '',
        entryStatus: '',
        name: '',
        specificationModel: '',
        originalCode: '',
        manufacturerId: '',
        productionDate: '',
        minOriginalValue: '',
        maxOriginalValue: '',

        pageNum: 1,
        pageSize: 10
      },
      manufacturerList: [],
      columns2: [],
      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 },
      ],
      tableData: [],
      dialogVisible: false,
      dialogTitle: '',
      dialogList: [],
    }
  },
  mounted() {
    this.getEquipmentApplyList()
    this.getManufacturerSelectList()
  },
  methods: {
    // 获取厂家
    getManufacturerSelectList() {
      getManufacturerSelectApi().then((res) => {
        console.log('🚀 ~ getManufacturerSelectList ~ res:', res)
        if (res.code === 200) {
          this.manufacturerList = res.data
        }
      })
    },
    /**
     * 获取装备申请列表
     */
    getEquipmentApplyList() {
      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] : ''
      const params = { ...this.queryParams }
      delete params.orderCreateTime
      delete params.productionDate
      getDeviceListApi(params)
        .then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total

          // 按 orderNumber 排序，确保相同订单连续
          this.tableData.sort((a, b) => a.orderNumber.localeCompare(b.orderNumber))
          let maxLength = 0
          this.tableData.forEach((item) => {
            if (item.propertyVoList && item.propertyVoList.length > maxLength) {
              maxLength = item.propertyVoList.length
            }
          })
          maxLength = maxLength > 0 ? maxLength * 2 : 0
          this.columns2 = this.columns.slice(0, this.columns.length - 18 + maxLength)          

          setTimeout(() => {
            this.$refs.tableRef.doLayout()
          }, 200)
        })
        .catch(error => {
          console.error('获取装备申请列表失败:', error)
        })
    },

    /**
     * 分页变化处理
     */
    handlePageChange() {
      this.getEquipmentApplyList()
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.queryFormRef.resetFields()
      this.queryParams.pageNum = 1
      this.getEquipmentApplyList()
    },

    // 点击事件处理函数 - 实现页面跳转
    showEquipmentInput(orderId, isAddVisible) {
      this.$router.push({
        name: 'equipmentInput',  // 完整路径
        query: {  // 因为使用path，所以用query传递参数
          orderId: orderId,
          isAddVisible: isAddVisible,
          isApprovalVisible: false
        }
      })
    },
    handleViewDetail(row) {
      this.$router.push({ path: '/equipment/details', query: { id: row.maId } })
    },
    /**
     * 删除项目
     */
    deleteItem(row) {
      this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => equipmentDelApiNew({ id: row.id }))
        .then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.getEquipmentApplyList()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(error => {
          if (error !== 'cancel') { // 排除取消操作的错误
            console.error('删除失败:', error)
            this.$message.error('删除失败，请重试')
          }
        })
    },

    //展示明细
    showDetails(num) {
      this.$emit('switch-view', num)
    },

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

      const orderNumber = row.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
        }
      }
    },
    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
    },

  }
}
</script>

<style scoped lang="scss">
.view-btn {
  color: #409eff;
  font-size: 14px;
  font-weight: bold;
}

.edit-btn {
  color: #67c23a;
  font-size: 12px;
  font-weight: bold;
}

.delete-btn {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
}

.app-container {
  /* padding: 0; */
}

/* ::v-deep .el-pagination {
  margin-top: 15px;
  text-align: right;
} */

::v-deep .el-button {
  margin-right: 8px;
}

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

.content-box {
  border-radius: 8px;
  height: calc(100vh - 240px);
  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;
    }
  }

  ::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__body-wrapper {
      overflow-x: auto !important;
    }

    &.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;
    }

  }
}

</style>
