<template>
  <el-dialog 
    title="报销申请详情" 
    :visible.sync="visible" 
    :close-on-click-modal="false"
    class="NCC-dialog NCC-dialog_center" 
    width="1200px"
    @close="handleClose"
  >
    <div class="detail-content" v-loading="loading">
      <!-- 表单信息卡片 -->
      <el-card class="info-card" shadow="hover" v-if="formData">
        <div slot="header" class="card-header">
          <i class="el-icon-document"></i>
          <span class="card-title">申请信息</span>
        </div>
        <el-row :gutter="20">
          <!-- <el-col :span="8">
            <div class="info-item">
              <label class="info-label">申请编号：</label>
              <span class="info-value">{{ formData.id || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">申请人编号：</label>
              <span class="info-value">{{ formData.applicationUserId || '无' }}</span>
            </div>
          </el-col> -->
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">申请人姓名：</label>
              <span class="info-value">{{ formData.applicationUserName || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">申请门店：</label>
              <span class="info-value">{{ formData.applicationStoreName || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">申请时间：</label>
              <span class="info-value">{{ formatDateTime(formData.applicationTime) || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">总金额：</label>
              <span class="info-value amount">{{ formatMoney(formData.amount) || '无' }}</span>
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="info-item">
              <label class="info-label">审批状态：</label>
              <el-tag 
                :type="getStatusType(formData.approveStatus)"
                size="small"
              >
                {{ formData.approveStatus || '无' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">购买记录编号：</label>
              <span class="info-value">{{ formData.purchaseRecordsId || '无' }}</span>
            </div>
          </el-col> -->
        </el-row>
      </el-card>

      <!-- 购买记录列表 -->
      <el-card class="info-card" shadow="hover" v-if="purchaseRecords && purchaseRecords.length > 0">
        <div slot="header" class="card-header">
          <i class="el-icon-shopping-cart-full"></i>
          <span class="card-title">购买记录列表</span>
        </div>
        <el-table :data="purchaseRecords" border size="small" style="width: 100%">
          <el-table-column prop="reimbursementCategoryName" label="分类名称" >
            <template slot-scope="scope">
              <div class="category-item">
                <span>{{ scope.row.reimbursementCategoryName || '无' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="unitPrice" label="单价" >
            <template slot-scope="scope">
              <div class="price-item">
                <span>{{ formatMoney(scope.row.unitPrice) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" >
            <template slot-scope="scope">
              <div class="quantity-item">
                <span>{{ scope.row.quantity || '无' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="金额" >
            <template slot-scope="scope">
              <div class="amount-item">
                <span class="amount-value">{{ formatMoney(scope.row.amount) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="purchaseTime" label="购买时间" width="180" >
            <template slot-scope="scope">
              <div class="time-item">
                <span>{{ formatDateTime(scope.row.purchaseTime) || '无' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="memo" label="备注说明" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.memo || '无' }}
            </template>
          </el-table-column>
          <el-table-column prop="attachment" label="附件" width="100" >
						<template slot-scope="scope">
							<div v-if="scope.row.attachment && scope.row.attachment.length > 0" class="attachment-list">
								<div> 
									<i class="el-icon-paperclip"></i>
									<span class="attachment-name">{{ scope.row.attachment.length + '个文件' }}</span>
								</div>
								<div class="attachment-item">
									<el-image :src="baseUrl + scope.row.attachment[0].url" fit="contain" :style="{
										width: '100%',
										height: '100px',
										display: 'block',
										margin: '0 auto'
									}" :preview-src-list="getPreviewSrcList(scope.row.attachment)">
									</el-image>
								</div>
							</div>
							<span v-else>无</span>
						</template>
					</el-table-column>
        </el-table>
      </el-card>

      <!-- 审批流程卡片 -->
      <el-card class="info-card" shadow="hover" v-if="nodes && nodes.length > 0">
        <div slot="header" class="card-header">
          <i class="el-icon-s-order"></i>
          <span class="card-title">审批流程</span>
        </div>
        <div class="approval-flow">
          <div 
            v-for="(node, index) in nodes" 
            :key="node.nodeId" 
            class="flow-node"
            :class="{
              'node-active': node.nodeOrder === currentNodeOrder,
              'node-completed': node.nodeOrder < currentNodeOrder,
              'node-pending': node.nodeOrder > currentNodeOrder
            }"
          >
            <div class="node-header">
              <div class="node-order">{{ node.nodeOrder }}</div>
              <div class="node-info">
                <div class="node-name">{{ node.nodeName || '无' }}</div>
                <div class="node-type">
                  <el-tag size="mini" :type="node.approvalType === '会签' ? 'success' : 'warning'">
                    {{ node.approvalType || '无' }}
                  </el-tag>
                  <el-tag size="mini" type="info" v-if="node.isRequired === 1">必审</el-tag>
                </div>
              </div>
            </div>
            
            <!-- 审批人列表 -->
            <div class="approvers-list">
              <div class="approvers-label">审批人：</div>
              <div class="approvers-items">
                <el-tag 
                  v-for="approver in node.approvers" 
                  :key="approver.userId"
                  size="small"
                  style="margin-right: 8px; margin-bottom: 4px;"
                >
                  {{ approver.userName || '无' }}
                </el-tag>
              </div>
            </div>

            <!-- 审批记录 -->
            <div class="approval-records" v-if="node.approvalRecords && node.approvalRecords.length > 0">
              <div class="records-label">审批记录：</div>
              <div class="records-list">
                <div 
                  v-for="(record, recordIndex) in node.approvalRecords" 
                  :key="recordIndex"
                  class="record-item"
                >
                  <div class="record-header">
                    <span class="record-approver">{{ record.approverName || '无' }}</span>
                    <el-tag 
                      size="mini" 
                      :type="getRecordType(record.approvalResult)"
                    >
                      {{ record.approvalResult || '无' }}
                    </el-tag>
                  </div>
                  <div class="record-opinion" v-if="record.approvalOpinion">
                    意见：{{ record.approvalOpinion }}
                  </div>
                  <div class="record-time" v-if="record.approvalTime">
                    时间：{{ formatDateTime(record.approvalTime) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 当前审批人信息 -->
      <el-card class="info-card" shadow="hover" v-if="currentApprovers && currentApprovers.length > 0">
        <div slot="header" class="card-header">
          <i class="el-icon-user-solid"></i>
          <span class="card-title">当前审批人</span>
        </div>
        <div class="current-approvers">
          <el-tag 
            v-for="approver in currentApprovers" 
            :key="approver.userId"
            type="warning"
            size="medium"
            style="margin-right: 8px;"
          >
            {{ approver.userName || '无' }}
          </el-tag>
        </div>
      </el-card>

      <!-- 退回原因 -->
      <el-card class="info-card" shadow="hover" v-if="returnedReason">
        <div slot="header" class="card-header">
          <i class="el-icon-warning"></i>
          <span class="card-title">退回原因</span>
        </div>
        <div class="returned-reason">
          {{ returnedReason }}
        </div>
      </el-card>

      <!-- 审批操作区域 -->
      <el-card class="info-card" shadow="hover" v-if="canApprove">
        <div slot="header" class="card-header">
          <i class="el-icon-edit"></i>
          <span class="card-title">审批操作</span>
        </div>
        <el-form :model="approvalForm" label-width="100px" label-position="right">
          <el-form-item label="审批结果" required>
            <el-radio-group v-model="approvalForm.result">
              <el-radio label="通过">通过</el-radio>
              <el-radio label="不通过">不通过</el-radio>
              <el-radio label="退回">退回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审批意见">
            <el-input 
              v-model="approvalForm.opinion" 
              type="textarea" 
              :rows="4"
              placeholder="请输入审批意见"
            />
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="warning" @click="handlePrint" v-if="formData && formData.id">打 印</el-button>
      <el-button @click="visible = false">关 闭</el-button>
      <el-button 
        type="primary" 
        @click="handleApprove"
        :loading="approving"
        v-if="canApprove"
      >
        提交审批
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'DetailDialog',
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      visible: false,
      loading: false,
      approving: false,
      formData: null,
      nodes: [],
      currentApprovers: [],
      currentNodeOrder: 0,
      approvalStatus: '',
      returnedReason: null,
      purchaseRecords: [], // 购买记录列表数据
      storeOptions: [], // 门店列表
      userMap: {}, // 用户信息映射
      approvalForm: {
        result: '通过',
        opinion: ''
      }
    }
  },
  computed: {
    canApprove() {
      // 判断是否可以审批：状态为"审批中"且当前用户是当前审批人
      if (this.approvalStatus !== '审批中') {
        return false
      }
      
      // 获取当前登录用户信息
      const currentUser = this.$store.getters.userInfo
      if (!currentUser || !currentUser.userId) {
        return false
      }
      
      // 判断当前用户是否在currentApprovers中
      if (!this.currentApprovers || this.currentApprovers.length === 0) {
        return false
      }
      
      // 检查当前用户的userId是否在审批人列表中
      const isCurrentApprover = this.currentApprovers.some(approver => {
        return approver.userId === currentUser.userId
      })
      
      return isCurrentApprover
    }
  },
  methods: {
  	// 获取预览图片列表
		getPreviewSrcList(attachment) {
			return attachment.map(item => this.baseUrl + item.url)
		},
    init(id) {
      this.visible = true
      this.loading = true
      this.formData = null
      this.nodes = []
      this.currentApprovers = []
      this.currentNodeOrder = 0
      this.approvalStatus = ''
      this.returnedReason = null
      this.purchaseRecords = []
      this.storeOptions = []
      this.userMap = {}
      this.approvalForm = {
        result: '通过',
        opinion: ''
      }
      // 加载门店列表
      this.loadStoreOptions()
      this.getDetail(id)
    },

    async getDetail(id) {
      try {
        const response = await request({
          url: `/api/Extend/LqReimbursementApplication/${id}`,
          method: 'GET'
        })

        if (response.code === 200 && response.data) {
          this.formData = response.data.form || null
          this.nodes = response.data.nodes || []
          this.currentApprovers = response.data.currentApprovers || []
          this.currentNodeOrder = response.data.currentNodeOrder || 0
          this.approvalStatus = response.data.approvalStatus || ''
          this.returnedReason = response.data.returnedReason || null
          this.purchaseRecords = response.data.purchaseRecords || []
          this.purchaseRecords = this.purchaseRecords.map(item => {
            item.attachment = item.attachment?JSON.parse(item.attachment):[]
            return item
          })
          // 加载用户信息
          this.loadUserInfo()
        } else {
          this.$message.error(response.msg || '获取详情失败')
        }
      } catch (error) {
        console.error('获取详情失败:', error)
        this.$message.error('获取详情失败')
      } finally {
        this.loading = false
      }
    },

    async handleApprove() {
      if (!this.approvalForm.result) {
        this.$message.warning('请选择审批结果')
        return
      }

      this.approving = true
      try {
        const response = await request({
          url: `/api/Extend/LqReimbursementApplication/${this.formData.id}/Actions/Approve?result=${this.approvalForm.result}&opinion=${this.approvalForm.opinion || ''}`,
          method: 'POST'
        })

        if (response.code === 200) {
          this.$message.success('审批成功')
          this.visible = false
          this.$emit('refresh')
        } else {
          this.$message.error(response.msg || '审批失败')
        }
      } catch (error) {
        console.error('审批失败:', error)
        this.$message.error('审批失败')
      } finally {
        this.approving = false
      }
    },

    handleClose() {
      this.visible = false
      this.formData = null
      this.nodes = []
      this.currentApprovers = []
      this.currentNodeOrder = 0
      this.approvalStatus = ''
      this.returnedReason = null
      this.purchaseRecords = []
      this.storeOptions = []
      this.userMap = {}
      this.approvalForm = {
        result: '通过',
        opinion: ''
      }
    },

    // 加载门店列表
    loadStoreOptions() {
      request({
        url: '/api/Extend/LqMdxx',
        method: 'GET',
        data: {
          currentPage: 1,
          pageSize: 1000
        }
      }).then(res => {
        if (res.data && res.data.list) {
          this.storeOptions = res.data.list
        }
      }).catch(() => {
        this.storeOptions = []
      })
    },

    // 加载用户信息
    loadUserInfo() {
      const userIds = []
      
      // 从审批记录中收集用户ID
      if (this.nodes && this.nodes.length > 0) {
        this.nodes.forEach(node => {
          if (node.approvers && node.approvers.length > 0) {
            node.approvers.forEach(approver => {
              if (approver.userId) {
                userIds.push(approver.userId)
              }
            })
          }
          if (node.approvalRecords && node.approvalRecords.length > 0) {
            node.approvalRecords.forEach(record => {
              // 如果有审批人ID字段，添加到列表
              if (record.approverId) {
                userIds.push(record.approverId)
              }
            })
          }
        })
      }
      
      // 去重
      const uniqueUserIds = [...new Set(userIds)]
      
      // 批量加载用户信息
      Promise.all(uniqueUserIds.map(userId => {
        return request({
          url: `/api/permission/Users/${userId}`,
          method: 'GET'
        }).then(res => {
          if (res.data) {
            this.userMap[userId] = res.data.realName || res.data.account || userId
          }
        }).catch(() => {
          this.userMap[userId] = userId
        })
      }))
    },

    // 获取门店名称
    getStoreName(storeId) {
      if (!storeId) return ''
      const store = this.storeOptions.find(item => item.id === storeId)
      return store ? store.dm : ''
    },

    // 获取用户名称
    getUserName(userId) {
      if (!userId) return ''
      return this.userMap[userId] || userId
    },

    // 格式化日期（只显示日期）
    formatDate(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },

    formatMoney(amount) {
      if (!amount) return '无'
      return `¥${Number(amount).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })}`
    },

    formatDateTime(dateTime) {
      if (!dateTime) return '无'
      // 如果是时间戳（数字），需要转换
      if (typeof dateTime === 'number') {
        const date = new Date(dateTime)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      }
      // 如果是字符串，直接返回
      const date = new Date(dateTime)
      if (isNaN(date.getTime())) return dateTime
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },

    getStatusType(status) {
      const statusMap = {
        '待审批': 'info',
        '审批中': 'warning',
        '已通过': 'success',
        '未通过': 'danger',
        '已退回': 'warning'
      }
      return statusMap[status] || ''
    },

    getRecordType(result) {
      const typeMap = {
        '待审批': 'info',
        '通过': 'success',
        '不通过': 'danger',
        '退回': 'warning'
      }
      return typeMap[result] || ''
    },

    // 打印功能
    handlePrint() {
      if (!this.formData || !this.formData.id) {
        this.$message.warning('无法打印，数据未加载完成')
        return
      }
      
      // 构建打印内容
      let printContent = this.buildPrintContent()
      
      // 打开新窗口并打印
      let newWindow = window.open('_blank')
      if (!newWindow) {
        this.$message.error('无法打开打印窗口，请检查浏览器弹窗设置')
        return
      }
      
      newWindow.document.write(printContent)
      newWindow.document.close()
      
      // 等待内容加载完成后打印
      setTimeout(() => {
        newWindow.print()
      }, 300)
    },

    // 构建打印内容
    buildPrintContent() {
      const storeName = this.getStoreName(this.formData.applicationStoreId) || this.formData.applicationStoreName || '无'
      const approveStatus = this.approvalStatus || '未审批'
      
      // 获取审批人和审批时间（从审批记录中获取最后一条）
      let approveUser = '无'
      let approveTime = '无'
      if (this.nodes && this.nodes.length > 0) {
        // 查找已完成的审批节点
        for (let i = this.nodes.length - 1; i >= 0; i--) {
          const node = this.nodes[i]
          if (node.approvalRecords && node.approvalRecords.length > 0) {
            const lastRecord = node.approvalRecords[node.approvalRecords.length - 1]
            if (lastRecord.approverName) {
              approveUser = lastRecord.approverName
            }
            if (lastRecord.approvalTime) {
              approveTime = this.formatDate(lastRecord.approvalTime)
            }
            break
          }
        }
      }
      
      // 构建购买物品清单表格
      let purchaseTableRows = ''
      if (this.purchaseRecords && this.purchaseRecords.length > 0) {
        this.purchaseRecords.forEach((item, index) => {
          const itemStoreName = this.getStoreName(item.createUserStoreId) || '无'
          purchaseTableRows += `
            <tr>
              <td style="text-align: center; width: 55px;">${index + 1}</td>
              <td>${item.reimbursementCategoryName || '无'}</td>
              <td>${itemStoreName}</td>
              <td style="text-align: right;">${item.unitPrice || '0.00'}</td>
              <td style="text-align: center;">${item.quantity || '0'}</td>
              <td style="text-align: right;">${item.amount || '0.00'}</td>
              <td>${item.purchaseTime ? this.formatDate(item.purchaseTime) : '无'}</td>
              <td>${item.memo || '无'}</td>
            </tr>
          `
        })
      } else {
        purchaseTableRows = '<tr><td colspan="8" style="text-align: center;">暂无数据</td></tr>'
      }
      
      return `
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8">
          <title>报销申请单</title>
          <style>
            * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
            }
            body {
              font-family: "Microsoft YaHei", Arial, sans-serif;
              font-size: 13px;
              padding: 15px;
              color: #333;
            }
            .print-header {
              text-align: center;
              margin-bottom: 15px;
              border-bottom: 2px solid #333;
              padding-bottom: 10px;
            }
            .print-header h1 {
              font-size: 22px;
              font-weight: bold;
              margin-bottom: 5px;
            }
            .print-info {
              margin-bottom: 12px;
            }
            .print-info table {
              width: 100%;
              border-collapse: collapse;
              margin-bottom: 12px;
            }
            .print-info table td {
              padding: 6px 10px;
              border: 1px solid #ddd;
            }
            .print-info table td:first-child {
              background-color: #f5f5f5;
              font-weight: bold;
              width: 120px;
              text-align: right;
            }
            .print-table {
              width: 100%;
              border-collapse: collapse;
              margin-bottom: 12px;
            }
            .print-table thead {
              display: table-header-group;
            }
            .print-table tbody {
              display: table-row-group;
            }
            .print-table th,
            .print-table td {
              border: 1px solid #ddd;
              padding: 5px 6px;
              text-align: left;
              font-size: 12px;
            }
            .print-table th {
              background-color: #f5f5f5;
              font-weight: bold;
              text-align: center;
            }
            .print-table tbody tr {
              page-break-inside: avoid;
            }
            .print-footer {
              margin-top: 15px;
              padding-top: 10px;
              border-top: 1px solid #ddd;
              text-align: right;
              font-size: 11px;
              color: #666;
            }
            @media print {
              body {
                padding: 8px;
              }
              .print-header {
                page-break-after: avoid;
                margin-bottom: 12px;
                padding-bottom: 8px;
              }
              .print-info {
                page-break-after: avoid;
                margin-bottom: 10px;
              }
              .print-table {
                page-break-inside: auto;
              }
              .print-table thead {
                display: table-header-group;
              }
              .print-table tbody tr {
                page-break-inside: avoid;
                page-break-after: auto;
              }
              .print-table tbody tr:last-child {
                page-break-after: auto;
              }
              .print-footer {
                page-break-before: avoid;
                margin-top: 10px;
                padding-top: 8px;
              }
              @page {
                margin: 1cm;
              }
            }
          </style>
        </head>
        <body>
          <div class="print-header">
            <h1>报销申请单</h1>
          </div>
          
          <div class="print-info">
            <table>
              <tr>
                <td>申请编号：</td>
                <td>${this.formData.id || '无'}</td>
                <td>申请人：</td>
                <td>${this.formData.applicationUserName || '无'}</td>
              </tr>
              <tr>
                <td>申请门店：</td>
                <td>${storeName}</td>
                <td>申请时间：</td>
                <td>${this.formData.applicationTime ? this.formatDate(this.formData.applicationTime) : '无'}</td>
              </tr>
              <tr>
                <td>总金额：</td>
                <td>¥${this.formData.amount || '0.00'}</td>
                <td>审批状态：</td>
                <td>${approveStatus}</td>
              </tr>
              <tr>
                <td>审批人：</td>
                <td>${approveUser}</td>
                <td>审批时间：</td>
                <td>${approveTime}</td>
              </tr>
            </table>
          </div>
          
          <div class="print-info">
            <h3 style="margin-bottom: 10px;">购买物品清单</h3>
            <table class="print-table">
              <thead>
                <tr>
                  <th style="width: 55px;">序号</th>
                  <th>分类名称</th>
                  <th>门店</th>
                  <th style="width: 100px;">单价</th>
                  <th style="width: 80px;">数量</th>
                  <th style="width: 100px;">总金额</th>
                  <th style="width: 120px;">购买时间</th>
                  <th>备注说明</th>
                </tr>
              </thead>
              <tbody>
                ${purchaseTableRows}
              </tbody>
            </table>
          </div>
          
          <div class="print-footer">
            <p>打印时间：${new Date().toLocaleString('zh-CN')}</p>
          </div>
        </body>
        </html>
      `
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-content {
  //max-height: 70vh;
  overflow-y: auto;
}

.info-card {
  margin-bottom: 20px;

  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #303133;

    i {
      font-size: 18px;
      color: #409EFF;
    }
  }

  .info-item {
    margin-bottom: 16px;
    display: flex;
    align-items: center;

    .info-label {
      min-width: 120px;
      color: #606266;
      font-weight: 500;
    }

    .info-value {
      color: #303133;
      flex: 1;

      &.amount {
        color: #F56C6C;
        font-weight: 600;
        font-size: 16px;
      }
    }
  }
}

.approval-flow {
  .flow-node {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    background: #fafafa;
    transition: all 0.3s;

    &.node-active {
      border-color: #409EFF;
      background: #ecf5ff;
    }

    &.node-completed {
      border-color: #67C23A;
      background: #f0f9ff;
    }

    &.node-pending {
      border-color: #e4e7ed;
      background: #fafafa;
      opacity: 0.6;
    }

    .node-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .node-order {
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: #409EFF;
        color: #fff;
        border-radius: 50%;
        font-weight: 600;
        margin-right: 12px;
      }

      .node-info {
        flex: 1;

        .node-name {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 8px;
        }

        .node-type {
          display: flex;
          gap: 8px;
        }
      }
    }

    .approvers-list {
      margin-bottom: 12px;
      display: flex;
      align-items: flex-start;

      .approvers-label {
        min-width: 80px;
        color: #606266;
        font-weight: 500;
      }

      .approvers-items {
        flex: 1;
      }
    }

    .approval-records {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #e4e7ed;

      .records-label {
        color: #606266;
        font-weight: 500;
        margin-bottom: 8px;
      }

      .records-list {
        .record-item {
          padding: 8px;
          margin-bottom: 8px;
          background: #fff;
          border-radius: 4px;
          border-left: 3px solid #409EFF;

          .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;

            .record-approver {
              font-weight: 500;
              color: #303133;
            }
          }

          .record-opinion {
            color: #606266;
            font-size: 14px;
            margin-bottom: 4px;
          }

          .record-time {
            color: #909399;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.current-approvers {
  padding: 12px;
  background: #fff3cd;
  border-radius: 4px;
}

.returned-reason {
  padding: 12px;
  background: #fef0f0;
  border-radius: 4px;
  color: #F56C6C;
  line-height: 1.6;
}

// 购买记录表格项样式
.category-item,
.price-item,
.quantity-item,
.amount-item,
.time-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  .category-icon {
    color: #67C23A;
    font-size: 16px;
  }
  
  .price-icon {
    color: #909399;
    font-size: 16px;
  }
  
  .quantity-icon {
    color: #409EFF;
    font-size: 16px;
  }
  
  .amount-icon {
    color: #F56C6C;
    font-size: 16px;
  }
  
  .time-icon {
    color: #909399;
    font-size: 16px;
  }
  
  span {
    color: #606266;
  }
}

.amount-value {
  font-weight: 600;
  color: #F56C6C;
}
</style>

