<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      inline
      label-width="auto"
      size="small"
    >
      <!-- 表单搜索 -->
      <el-row>
        <el-form-item prop="createUser" label="申请人：">
          <el-input
            clearable
            style="width: 240px"
            placeholder="请输入关键字"
            v-model.trim="queryParams.createUser"
          />
        </el-form-item>
        <el-form-item label="申请时间：" prop="createTime">
          <el-date-picker
            type="date"
            style="width: 240px"
            value-format="YYYY-MM-DD"
            placeholder="请选择申请时间"
            v-model="queryParams.createTime"
          />
        </el-form-item>

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

        <el-form-item prop="devName" label="装备名称：">
          <el-input
            clearable
            style="width: 240px"
            placeholder="请输入关键字"
            v-model.trim="queryParams.devName"
          />
        </el-form-item>

        <el-form-item prop="devModel" label="规格型号：">
          <el-input
            clearable
            style="width: 240px"
            placeholder="请输入关键字"
            v-model.trim="queryParams.devModel"
          />
        </el-form-item>

        <el-form-item prop="identifyCode" label="装备原始编码：">
          <el-input
            clearable
            style="width: 240px"
            placeholder="请输入关键字"
            v-model.trim="queryParams.identifyCode"
          />
        </el-form-item>

        <el-form-item prop="brand" label="生产厂家：">
          <el-input
            clearable
            style="width: 240px"
            placeholder="请输入关键字"
            v-model.trim="queryParams.brand"
          />
        </el-form-item>

        <el-form-item prop="productionDate" label="出厂日期：">
          <el-date-picker
            type="date"
            style="width: 240px"
            value-format="YYYY-MM-DD"
            placeholder="请选择出厂日期"
            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: 105px"
            placeholder="请输入"
            v-model.trim="queryParams.minBuyPrice"
          />

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


        <el-form-item>
          <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
            查询
          </el-button>
          <el-button class="primary-lease" type="primary" @click="resetForm">
            重置
          </el-button>

          <el-button
            class="primary-lease"
            type="primary"
            @click="showDetails('0')"
          >
            展开明细
          </el-button>

        </el-form-item>

      </el-row>

      <!-- 表格 -->
      <el-table :data="tableData" :span-method="handleSpanMethod">
        <!--      <el-table :data="tableData"  >-->
        <el-table-column label="序号" align="center" width="55" type="index" fixed/>
        <el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip
                         column-key="orderNumber" fixed min-width="200"
        />
        <el-table-column prop="proType" 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.mainGx }} > {{ scope.row.childGx }}
          </template>
        </el-table-column>

        <el-table-column prop="orderNumber" label="装备类目" show-overflow-tooltip align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.devCategory }} > {{ scope.row.devSubcategory }}
          </template>
        </el-table-column>

        <el-table-column prop="deviceName" label="装备名称" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="devModel" label="规格型号" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="identifyCode" label="装备原始编码" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="unitName" label="计量单位" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="brand" 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="buyPrice" 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="operateAddress" label="所属省份" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="orderNumber" label="装备外观" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="orderNumber" label="合格证" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="orderNumber" label="定期检验报告" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="orderNumber" label="采购发票" show-overflow-tooltip align="center" min-width="100"/>
        <!--        <el-table-column prop="devCount" label="特征项1" align="center"/>-->
        <!--        <el-table-column prop="devCount" label="特征值1" align="center"/>-->
        <el-table-column prop="createUser" label="申请人" show-overflow-tooltip align="center" fixed="right"
                         min-width="100"
        />
        <el-table-column prop="createTime" 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="showEquipmentInput(row.id, true)">
              <i class="el-icon-view"></i> 查看
            </el-button>

            <el-button
              type="text"
              @click="approved(row.maId,row.csId)"
              v-if="row.entryStatus === '0' && row.status === '0'"
            >
              <i class="el-icon-edit"></i> 通过
            </el-button>
            <el-button
              type="text"
              @click="reject(row.maId,row.csId)"
              v-if="row.entryStatus === '0' && row.status === '0' "
            >
              <i class="el-icon-delete"></i> 驳回
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        :total="total"
        @pagination="handlePageChange"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
      />
    </el-form>
  </div>
</template>

<script>
import {
  equipmentDraftListApiNew,
  equipmentDelApiNew,
  equipmentPassAndRejectApiNew
} from '@/api/EquipmentEntryApply/index'

export default {
  name: 'EquipmentDetailList',
  data() {
    return {
      total: 0,
      orderId: '',
      isVisible: false,
      isAddVisible: false,
      queryParams: {
        createUser: '',
        createTime: '',
        entryStatus: '',
        devName: '',
        devModel: '',
        identifyCode: '',
        brand: '',
        productionDate: '',
        minBuyPrice: '',
        maxBuyPrice: '',

        pageNum: 1,
        pageSize: 10
      },
      tableData: []
    }
  },
  mounted() {
    this.getEquipmentApplyList()
  },
  methods: {
    /**
     * 获取装备申请列表
     */
    getEquipmentApplyList() {
      equipmentDraftListApiNew(this.queryParams)
        .then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total

          // 按 orderNumber 排序，确保相同订单连续
          this.tableData.sort((a, b) => a.orderNumber.localeCompare(b.orderNumber))
        })
        .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',  // 完整路径
        params: {  // 因为使用path，所以用query传递参数
          orderId: orderId,
          isAddVisible: isAddVisible,
          isApprovalVisible: false
        }
      })
    },


    //展示明细
    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
        }
      }
    },

    approved(maId,csId) {
      const data = {
        devIds:maId,
        id:csId,
        status:1
      }

      this.$confirm('是否确定通过？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => equipmentPassAndRejectApiNew(data))
        .then(res => {
          if (res.code === 200) {
            this.$message.success('通过成功')
            this.getEquipmentApplyList()
          } else {
            this.$message.error('通过失败')
          }
        })
    },
    reject(maId,csId) {
      const data = {
        devIds:maId,
        id:csId,
        status:1
      }
      this.$confirm('是否确定驳回？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => equipmentPassAndRejectApiNew(data))
        .then(res => {
          if (res.code === 200) {
            this.$message.success('驳回成功')
            this.getEquipmentApplyList()
          } else {
            this.$message.error('驳回失败')
          }
        })

    }

  }
}
</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: 20px;
}

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

::v-deep .el-button {
  margin-right: 8px;
}
</style>
