<template>
  <div class="app-container"> 
    <el-card style="margin-bottom: 20px" shadow="never">
      <GoBack :title="'退役审核'" @goBack="goBack"/>
      <!-- 基本信息 -->
      <el-form ref="baseForm" :model="baseInfo" label-width="120px" inline style="height: 36px">

        <el-form-item label="申请单号" style="margin-bottom: 0; height: 36px">
          <!-- 申请单号：禁用的输入框 -->
          <el-input
            v-model="baseInfo.code"
            placeholder="无"
            disabled
            :value=" baseInfo.code "
            style="width: 240px;"
          />
        </el-form-item>


        <el-form-item label="任务状态">
          <!-- 任务状态：禁用的输入框 + 标签样式 -->
          <el-input
            :value="getStatusLabel()"
            disabled
            style="background: transparent; border: none; padding-left: 0; width: 240px;"
          >
          </el-input>
        </el-form-item>


        <el-form-item label="申请人">
          <!-- 申请人：禁用的输入框 -->
          <el-input v-model="baseInfo.createUser" placeholder="无" disabled style="width: 240px;"/>
        </el-form-item>


        <el-form-item label="申请时间">
          <!-- 申请时间：禁用的输入框 -->
          <el-input v-model="baseInfo.createTime" placeholder="无" disabled style="width: 240px;"/>
        </el-form-item>

      </el-form>
    </el-card>
    <!-- 装备和工具列表 -->
    <el-row :gutter="24">
        <el-col :span="6">
          <el-card shadow="never"  style="min-height: 640px;">
            <div style="display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #F0F0F0;"> 
                <span style="font-size: 20px; font-weight: 800;margin-right: 48px;">审批进度</span>  
            </div>
            <div class="approval-progress" v-if="processConfig && processConfig.nodeList && !collapsed"> 
              <el-timeline>
                <el-timeline-item
                  v-for="node in processConfig.nodeList"
                  :key="node.nodeOrder"
                  :timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''"
                  placement="top"
                > 
                  <template #dot>
                    <img src="../../assets/images/timeIcon.png" class="custom-icon" alt="">
                  </template>
                  <div class="timeline-content">
                    <div class="node-title">
                      <span class="node-name">节点{{ node.nodeOrder }}：{{ node.nodeName }}</span>
                      <el-tag :type="getNodeTagType(node)">
                        {{ getNodeStatusLabel(node) }}
                      </el-tag>
                    </div>
                    <div class="node-info">
                      <div>审批人：{{ node.name }}</div>
                      <div v-if="getNodeRecord(node)">
                        <div>审批结果：{{ getNodeRecord(node).approveResult === '1' ? '通过' : '驳回' }}</div>
                        <div>审批意见：{{ getNodeRecord(node).approveOpinion }}</div>
                        <div>审批时间：{{ getNodeRecord(node).approveTime }}</div>
                      </div>
                      <div v-else-if="node.nodeOrder === approvalInstance.currentNodeOrder">
                        状态：待审批
                      </div>
                      <div v-else>
                        状态：等待上一节点审批
                      </div>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div> 
            <div class="approval-actions" v-if="canApprove && !collapsed">
              <div class="section-header">
                <span>审批操作</span>
              </div>
              <el-form ref="approveForm" :model="approveData" label-width="100px">
                <el-form-item label="审批意见">
                  <el-input
                    v-model="approveData.opinion"
                    type="textarea"
                    rows="4"
                    placeholder="请输入审批意见"
                    maxlength="500"
                    show-word-limit
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="success" @click="onHandleApprove">通过</el-button>
                  <el-button type="danger" @click="onHandleReject">驳回</el-button>
                  <el-button @click="onHandleCancel">取消</el-button>
                </el-form-item>
              </el-form>
            </div> 
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card shadow="never">
            <div class="mb8" style="display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #F0F0F0;"> 
                <span style="font-size: 20px; font-weight: 800;margin-right: 48px;">退役审核列表</span>
                <span style="font-size: 16px;color: #808080;">共{{detailList.length}}条记录</span> 
            </div>
            <el-table ref="detailTable" :data="detailList" class="my-table" style="width: 100%" border stripe size="small"
                      fit @selection-change="onSelectionChange"
            >
              <el-table-column type="selection" width="50"
                               :selectable="row => !row.reviewStatus || (row.reviewStatus !== '1' && row.reviewStatus !== '2')"
              />
              <el-table-column align="center" type="index" label="序号" width="80"/>
              <el-table-column align="center" prop="type" label="分类" width="100"/>
              <el-table-column align="center" prop="typeName" label="类目" min-width="100"/>
              <el-table-column align="center" prop="typeModelName" label="规格型号" width="150"/>
              <el-table-column align="center" prop="manageMode" label="管理模式" width="120"/>
              <el-table-column align="center" prop="devCode" label="设备编码" min-width="120"/>
              <el-table-column align="center" prop="scrapQuantity" label="申请报废数量" width="120"/>
              <el-table-column align="center" prop="retireReason" label="退役原因" min-width="120"
                               show-overflow-tooltip
              />
              <el-table-column align="center" label="报废附件" width="120">
                <template slot-scope="scope">
                  <el-button type="text" style="color: #2CBAB2" @click="onHandleViewAttachment(scope.row)">
                    查看
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="reviewStatus" label="审批状态" width="100">
                <template slot-scope="scope">
                  <el-tag :type="getReviewStatusType(scope.row.reviewStatus)">
                    {{ getReviewStatusLabel(scope.row.reviewStatus) }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col> 
     </el-row>

    <!-- <el-card shadow="never">
      <div class="detail-section">
        <div class="section-header">
          <el-row :gutter="20">
            <el-col :span="24">
              <span style="font-size: 20px; font-weight: 800">退役审核列表</span>
            </el-col>
            <el-col :span="0" style="display: flex; justify-content: flex-end"> 
            </el-col>
          </el-row> 
        </div>

        <el-row :gutter="20">
          <el-col :span="collapsed ? 23 : 18">
            <el-table ref="detailTable" :data="detailList" class="my-table" style="width: 100%" border stripe size="small"
                      fit @selection-change="onSelectionChange"
            >
              <el-table-column type="selection" width="50"
                               :selectable="row => !row.reviewStatus || (row.reviewStatus !== '1' && row.reviewStatus !== '2')"
              />
              <el-table-column align="center" type="index" label="序号" width="80"/>
              <el-table-column align="center" prop="type" label="分类" width="100"/>
              <el-table-column align="center" prop="typeName" label="类目" min-width="100"/>
              <el-table-column align="center" prop="typeModelName" label="规格型号" width="150"/>
              <el-table-column align="center" prop="manageMode" label="管理模式" width="120"/>
              <el-table-column align="center" prop="devCode" label="设备编码" min-width="120"/>
              <el-table-column align="center" prop="scrapQuantity" label="申请报废数量" width="120"/>
              <el-table-column align="center" prop="retireReason" label="退役原因" min-width="120"
                               show-overflow-tooltip
              />
              <el-table-column align="center" label="报废附件" width="120">
                <template slot-scope="scope">
                  <el-button type="text" style="color: #2CBAB2" @click="onHandleViewAttachment(scope.row)">
                    查看
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="reviewStatus" label="审批状态" width="100">
                <template slot-scope="scope">
                  <el-tag :type="getReviewStatusType(scope.row.reviewStatus)">
                    {{ getReviewStatusLabel(scope.row.reviewStatus) }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-col>

          <el-col :span="collapsed ? 1 : 6"> 
            <div class="approval-progress" v-if="processConfig && processConfig.nodeList && !collapsed">
              <div class="section-header">
                <span>审批进度</span>
              </div>
              <el-timeline>
                <el-timeline-item
                  v-for="node in processConfig.nodeList"
                  :key="node.nodeOrder"
                  :timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''"
                  placement="top"
                >
                  <div class="timeline-content">
                    <div class="node-title">
                      <span class="node-name">节点{{ node.nodeOrder }}：{{ node.nodeName }}</span>
                      <el-tag :type="getNodeTagType(node)">
                        {{ getNodeStatusLabel(node) }}
                      </el-tag>
                    </div>
                    <div class="node-info">
                      <div>审批人：{{ node.name }}</div>
                      <div v-if="getNodeRecord(node)">
                        <div>审批结果：{{ getNodeRecord(node).approveResult === '1' ? '通过' : '驳回' }}</div>
                        <div>审批意见：{{ getNodeRecord(node).approveOpinion }}</div>
                        <div>审批时间：{{ getNodeRecord(node).approveTime }}</div>
                      </div>
                      <div v-else-if="node.nodeOrder === approvalInstance.currentNodeOrder">
                        状态：待审批
                      </div>
                      <div v-else>
                        状态：等待上一节点审批
                      </div>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div> 
            <div class="approval-actions" v-if="canApprove && !collapsed">
              <div class="section-header">
                <span>审批操作</span>
              </div>
              <el-form ref="approveForm" :model="approveData" label-width="100px">
                <el-form-item label="审批意见">
                  <el-input
                    v-model="approveData.opinion"
                    type="textarea"
                    rows="4"
                    placeholder="请输入审批意见"
                    maxlength="500"
                    show-word-limit
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="success" @click="onHandleApprove">通过</el-button>
                  <el-button type="danger" @click="onHandleReject">驳回</el-button>
                  <el-button @click="onHandleCancel">取消</el-button>
                </el-form-item>
              </el-form>
            </div> 
            <div style="position: absolute; width: 10px; top: 50%; right: 0"> 
              <el-button
                size="mini"
                @click="collapsed = !collapsed"
                :icon="collapsed ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
                style="padding: 2px"
              />
            </div>
          </el-col>
        </el-row> 
      </div> 
    </el-card> -->
  </div>
</template>

<script>
import { getRetireApplyDetailAPI } from '@/api/EquipmentRetireApply/index.js'
import { getApprovalDetail, doApprove, getProcessConfig, getApprovalInstanceByBusiness } from '@/api/approval.js'
import { getCurrentUserId } from '@/utils/auth'
import GoBack from '@/components/GoBack'

export default {
  components: { GoBack },
  data() {
    return {
      baseInfo: {
        id: '',
        code: '',
        reviewStatus: '1',
        createUser: '',
        createTime: ''
      },
      detailList: [],
      selectedRows: [],
      approvalInstance: {},
      approvalProgress: null,
      processConfig: null,
      canApprove: false,
      approveData: {
        opinion: ''
      },
      collapsed: false
    }
  },
  methods: {
    goBack() {
      this.$router.push({ path: '/all/business/EquipmentRetireApply/EquipmentRetireApply' })
    },
    async getAuditDetail() {
      const id = this.$route.query.id

      // 从query参数中获取任务基本信息
      const taskInfoStr = this.$route.query.taskInfo
      if (taskInfoStr) {
        const taskInfo = JSON.parse(taskInfoStr)
        this.baseInfo = {
          id: taskInfo.id,
          code: taskInfo.code,
          reviewStatus: taskInfo.reviewStatus,
          createUser: taskInfo.createUser,
          createTime: taskInfo.createTime
        }
      }

      // 调用API获取明细列表
      const res = await getRetireApplyDetailAPI(id)
      const data = res.data || []

      // 所有数据都是明细项
      this.detailList = data.map(item => ({
        id: item.id,
        keyId: item.keyId,
        type: item.type,
        typeId: item.typeId,
        devType: item.devType,
        groupName: item.groupName,
        typeName: item.typeName,
        typeModelName: item.typeModelName,
        manageMode: item.manageMode,
        devCode: item.devCode,
        code: item.code,
        inStockNum: item.inStockNum,
        scrapQuantity: item.scrapNum,
        retireReason: item.reasonVal,
        attachments: item.bmFileInfos || [],
        reviewStatus: item.reviewStatus  // 审批状态
      }))

      // 查询审批实例和进度
      await this.loadApprovalInfo()
    },

    async loadApprovalInfo() {
      try {
        // 第一步：根据业务ID查询审批实例，获取审批实例ID
        console.log('开始查询审批实例，业务ID:', this.baseInfo.id)
        const instanceRes = await getApprovalInstanceByBusiness('EQUIPMENT_SCRAP', this.baseInfo.id)
        console.log('审批实例查询结果:', instanceRes)

        if (!instanceRes || !instanceRes.data) {
          console.error('未找到审批实例，返回数据:', instanceRes)
          this.$message.warning('未找到审批实例')
          return
        }

        const instanceId = instanceRes.data.id
        const processId = instanceRes.data.processId
        console.log('审批实例ID:', instanceId, '流程ID:', processId)

        if (!instanceId || !processId) {
          console.error('审批实例ID或流程ID为空')
          this.$message.warning('审批实例ID或流程ID为空')
          return
        }

        // 第二步：根据审批实例ID查询审批详情（包含审批记录）
        console.log('开始查询审批详情，实例ID:', instanceId)
        const approvalRes = await getApprovalDetail(instanceId)
        console.log('审批详情查询结果:', approvalRes)

        if (approvalRes && approvalRes.data) {
          this.approvalInstance = approvalRes.data
          console.log('审批记录:', this.approvalInstance.recordList)

          // 第三步：根据流程ID查询审批流程配置（获取所有节点信息）
          console.log('开始查询审批流程配置，流程ID:', processId)
          const processRes = await getProcessConfig(processId)
          console.log('审批流程配置查询结果:', processRes)

          if (processRes && processRes.data) {
            this.processConfig = processRes.data
            console.log('节点列表:', this.processConfig.nodeList)
          }

          // 第四步：判断当前用户是否可以审批
          this.checkCanApprove()
        } else {
          console.error('审批详情查询失败:', approvalRes)
          this.$message.error('审批详情查询失败')
        }
      } catch (error) {
        console.error('加载审批信息失败:', error)
        this.$message.error('加载审批信息失败: ' + error.message)
      }
    },

    checkCanApprove() {
      // 只有当审批实例状态为"0"（待审批/审批中）时才能审批
      if (this.approvalInstance.status !== '0' && this.approvalInstance.status !== '1') {
        console.log('审批实例状态不是待审批/审批中:', this.approvalInstance.status)
        this.canApprove = false
        return
      }

      // 获取当前用户ID
      const currentUserId = getCurrentUserId()
      console.log('当前用户ID:', currentUserId)
      console.log('当前用户ID类型:', typeof currentUserId)

      // 从审批流程配置中获取当前节点的审批人列表
      // 根据 currentNodeId 查找当前节点（不是 currentNodeOrder）
      if (this.processConfig && this.processConfig.nodeList) {
        // 先按 ID 查找
        let currentNode = this.processConfig.nodeList.find(
          node => node.id === this.approvalInstance.currentNodeId
        )

        // 如果按 ID 找不到，尝试按 nodeOrder 找
        if (!currentNode && this.approvalInstance.currentNodeOrder) {
          console.log('⚠️ 按 ID 找不到节点，尝试按 nodeOrder 查找...')
          currentNode = this.processConfig.nodeList.find(
            node => node.nodeOrder === this.approvalInstance.currentNodeOrder
          )
        }

        console.log('当前节点ID:', this.approvalInstance.currentNodeId)
        console.log('当前节点顺序:', this.approvalInstance.currentNodeOrder)
        console.log('当前节点:', currentNode)

        if (currentNode && currentNode.approverIds) {
          // 判断当前用户是否在审批人列表中
          const approverIds = currentNode.approverIds.split(',').map(id => parseInt(id))
          console.log('审批人ID列表:', approverIds)
          console.log('审批人ID列表类型:', approverIds.map(id => typeof id))
          this.canApprove = approverIds.includes(parseInt(currentUserId))
          console.log('是否可以审批:', this.canApprove)
        } else {
          console.log('当前节点或审批人列表不存在')
        }
      } else {
        console.log('审批流程配置或节点列表不存在')
      }
    },

    onSelectionChange(selection) {
      this.selectedRows = selection
    },

    onHandleViewAttachment(row) {
      if (row.attachments && row.attachments.length > 0) {
        const file = row.attachments[0]
        const parts = file.fileName.split('.')
        const extension = parts.pop()
        window.open(file.fileUrl, file.fileName)
      } else {
        this.$message.warning('暂无附件')
      }
    },

    async onHandleApprove() {
      if (!this.approveData.opinion) {
        this.$message.warning('请输入审批意见')
        return
      }

      this.$confirm('确定通过该审批吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          await doApprove({
            instanceId: this.approvalInstance.id,
            approveResult: '1',  // 1表示通过
            approveOpinion: this.approveData.opinion
          })
          this.$message.success('审批通过成功')
          setTimeout(() => {
            this.$router.back()
          }, 1000)
        } catch (error) {
          this.$message.error('审批失败: ' + error.message)
        }
      }).catch(() => {
      })
    },

    async onHandleReject() {
      if (!this.approveData.opinion) {
        this.$message.warning('驳回时必须填写审批意见')
        return
      }

      this.$confirm('确定驳回该审批吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          await doApprove({
            instanceId: this.approvalInstance.id,
            approveResult: '2',  // 2表示驳回
            approveOpinion: this.approveData.opinion
          })
          this.$message.success('审批驳回成功')
          setTimeout(() => {
            this.$router.back()
          }, 1000)
        } catch (error) {
          this.$message.error('审批失败: ' + error.message)
        }
      }).catch(() => {
      })
    },

    onHandleCancel() {
      this.$router.back()
    },

    getStatusLabel() {
      // 根据明细列表的审批状态计算任务状态
      if (this.detailList.length === 0) {
        return '待审批'
      }

      // 统计各状态的数量
      const processedCount = this.detailList.filter(item => item.reviewStatus === '1' || item.reviewStatus === '2').length
      const totalCount = this.detailList.length

      if (processedCount === 0) {
        // 一条都没处理
        return '待审批'
      } else if (processedCount === totalCount) {
        // 全部处理完成
        return '已审批'
      } else {
        // 处理了部分
        return '审批中'
      }
    },

    getStatusType() {
      // 根据任务状态返回标签类型
      const label = this.getStatusLabel()
      const typeMap = {
        '待审批': 'warning',
        '审批中': 'info',
        '已审批': 'success'
      }
      return typeMap[label] || 'info'
    },

    getReviewStatusLabel(status) {
      const statusMap = {
        '0': '待审批',
        '1': '已通过',
        '2': '已驳回'
      }
      return statusMap[status] || '待审批'
    },

    getReviewStatusType(status) {
      const typeMap = {
        '0': 'warning',
        '1': 'success',
        '2': 'danger'
      }
      return typeMap[status] || 'warning'
    },

    getNodeRecord(node) {
      // 从审批记录中查找该节点的审批记录
      // 根据 nodeId 查找（不是 nodeOrder）
      if (!this.approvalInstance.recordList) {
        return null
      }
      return this.approvalInstance.recordList.find(record => record.nodeId === node.id)
    },

    getNodeStatusLabel(node) {
      // 根据节点状态返回标签文本
      const record = this.getNodeRecord(node)
      if (record) {
        return record.approveResult === '1' ? '已通过' : '已驳回'
      }
      if (node.id === this.approvalInstance.currentNodeId) {
        return '审批中'
      }
      if (node.nodeOrder < this.approvalInstance.currentNodeOrder) {
        return '已通过'
      }
      return '未开始'
    },

    getNodeTagType(node) {
      // 根据节点状态返回标签类型
      const record = this.getNodeRecord(node)
      if (record) {
        return record.approveResult === '1' ? 'success' : 'danger'
      }
      if (node.id === this.approvalInstance.currentNodeId) {
        return 'warning'
      }
      return 'info'
    },

    getNodeStatusLabel_old(status) {
      const statusMap = {
        '0': '待审批',
        '1': '已通过',
        '2': '已驳回',
        '3': '等待中'
      }
      return statusMap[status] || '未知'
    },

    getNodeStatusType(status) {
      const typeMap = {
        '0': 'warning',
        '1': 'success',
        '2': 'danger',
        '3': 'info'
      }
      return typeMap[status] || 'info'
    }
  },

  created() {
    this.getAuditDetail()
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  background: #F0F0F0;
}
::v-deep.el-button--primary{
  background-color: #2CBAB2;
  border-color: #2CBAB2;
}
::v-deep.el-button--danger{
  background-color: #FF5129;
  border-color: #FF5129;
}
::v-deep.el-tag.el-tag--info {
    background-color: #F5F5F5;
    border-color: #B3B3B3;
    color: #B3B3B3;
}
::v-deep.el-tag.el-tag--warn{
    background-color: rgba(255,171,41,0.1);;
    border: #FFAB29;
    color: #FFAB29;
}
::v-deep.el-tag.el-tag--success {
    background-color: rgba(52,226,199,0.1);
    border-color: #34E2C7;
    color: #34E2C7;
}
.box-card {
  margin: 20px;
}

.detail-section,
.approval-progress,
.approval-actions {
  margin: 10px 0;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 14px;
  }
}

.approval-progress {
  ::v-deep .el-timeline-item__wrapper {
    padding-left: 30px;
  }

  .timeline-content {
    .node-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;

      .node-name {
        font-weight: 600;
        font-size: 14px;
      }
    }

    .node-info {
      font-size: 12px; 
      background: rgba(52, 226, 199,0.08); 
      color: #3F3F3F;
      padding: 15px;
      border-radius:5px;
      line-height: 1.8;
    }
  }
}

.custom-icon{
  width: 20px;
  height: 20px;
}

.approval-actions {
  /* border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
  background-color: #f5f7fa; */
}

.action-buttons {
  text-align: center;
  margin-top: 30px;
}
</style>

