<template>
  <div>
    <transition name="approval-progress-fade">
      <div v-if="visible" class="approval-progress-detail">
        <div class="detail-panel">
          <div class="detail-header">
            <div class="header-left">
              <el-button
                type="text"
                icon="el-icon-arrow-left"
                class="back-button"
                @click="handleBack"
              >
              </el-button>
              <div class="header-info">
                <div class="title">
                  {{ titleText }}
                </div>
              </div>
            </div>
            <div v-if="fromTodo && !hideOperations" class="header-right">
              <el-button size="small" @click="handleReturn">
                退回
              </el-button>
              <el-button v-if="canResend" size="small" :loading="resending" @click="handleResend">
                直送
              </el-button>
              <el-button type="primary" size="small" @click="handleSubmit">
                提交
              </el-button>
            </div>
          </div>
          <div class="detail-content">
            <section class="block-section">
              <div class="section-title">
                基础信息
              </div>
              <div class="info-grid">
                <!-- 流程主题单独一行 -->
                <div class="info-item-full">
                  <span class="label">流程主题</span>
                  <div v-if="!isEditingProcessTitle" class="value process-title-value-wrapper">
                    {{ showTopDetail.processTitle || '--' }}
                    <i
                      class="el-icon-edit process-title-edit-icon"
                      @click="handleEditProcessTitle"
                    ></i>
                  </div>
                  <div v-else class="process-title-input-wrapper">
                    <el-input
                      v-model="editingProcessTitle"
                      placeholder="请输入流程主题"
                      maxlength="100"
                      show-word-limit
                      class="process-title-input"
                    >
                      <template slot="suffix">
                        <i class="el-icon-check process-title-icon" @click="handleSaveProcessTitle"></i>
                        <i class="el-icon-close process-title-icon" @click="handleCancelProcessTitle"></i>
                      </template>
                    </el-input>
                  </div>
                </div>
                <!-- 其他信息一行两个 -->
                <div class="info-row">
                  <div class="info-item">
                    <span class="label">创建人</span>
                    <span class="value">{{ showTopDetail.createBy || '--' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">创建时间</span>
                    <span class="value">{{
                      showTopDetail.creationDate || showTopDetail.createTime || '--'
                    }}</span>
                  </div>
                </div>
                <div class="info-row">
                  <div class="info-item">
                    <span class="label">当前环节</span>
                    <span class="value">{{ showTopDetail.currentNode || '--' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">当前处理人</span>
                    <span class="value">{{ showTopDetail.processor || '--' }}</span>
                  </div>
                </div>
              </div>
            </section>
            <section class="block-section">
              <div class="section-title">
                详细信息
              </div>
              <div class="info-grid">
                <div class="info-row">
                  <div class="info-item">
                    <span class="label">产品型号</span>
                    <span class="value">{{ modelDetail.modelName || '--' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">状态代号</span>
                    <span class="value">{{ modelDetail.productNumber || '--' }}</span>
                  </div>
                </div>
                <div class="info-row">
                  <div class="info-item">
                    <span class="label">板块</span>
                    <span class="value">{{ modelDetail.plate || '--' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">平台</span>
                    <span class="value">{{ modelDetail.platform || '--' }}</span>
                  </div>
                </div>
                <div class="info-row">
                  <div class="info-item">
                    <span class="label">系列</span>
                    <span class="value">{{ modelDetail.series || '--' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">细分市场</span>
                    <span class="value">{{ modelDetail.marketSegment || '--' }}</span>
                  </div>
                </div>
                <div class="info-row">
                  <div class="info-item">
                    <span class="label">项目名称</span>
                    <span class="value">{{ modelDetail.projectName || '--' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">项目编号</span>
                    <span class="value">{{ modelDetail.projectNumber || '--' }}</span>
                  </div>
                </div>
                <!-- 竞品发动机专有字段 -->
                <template v-if="engineType === '竞品'">
                  <div class="info-row">
                    <div class="info-item">
                      <span class="label">厂家名称(全称)</span>
                      <span class="value">{{ modelDetail.manufacturerName || '--' }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">厂家简称</span>
                      <span class="value">{{ modelDetail.manufacturerAbbreviation || '--' }}</span>
                    </div>
                  </div>
                  <div class="info-row">
                    <div class="info-item">
                      <span class="label">品牌</span>
                      <span class="value">{{ modelDetail.brand || '--' }}</span>
                    </div>
                    <div class="info-item">
                      <span class="label">生产日期</span>
                      <span class="value">{{ modelDetail.productionDate || '--' }}</span>
                    </div>
                  </div>
                </template>
              </div>
            </section>
            <section class="block-section">
              <div class="section-title">
                审批内容
              </div>
              <el-table :data="changeTable || []" border class="change-table" :max-height="500">
                <el-table-column label="序号" type="index" width="60" />
                <el-table-column
                  prop="subsystemName"
                  label="子系统"
                  min-width="120"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="parameterType"
                  label="类型"
                  min-width="120"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="partsName"
                  label="零部件名称"
                  min-width="140"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="parameterName"
                  label="参数名称"
                  min-width="140"
                  show-overflow-tooltip
                />
                <el-table-column prop="parameterValue" label="参数值" min-width="160">
                </el-table-column>
                <el-table-column prop="unit" label="单位" min-width="80" show-overflow-tooltip />
                <el-table-column prop="changeComment" label="修改描述" min-width="160">
                </el-table-column>
              </el-table>
              <el-pagination
                v-if="changeTableTotal > 0"
                class="pagination-wrapper"
                :current-page="changeTablePageNumber"
                :page-size="changeTablePageSize"
                :total="changeTableTotal"
                layout="total, prev, pager, next, jumper"
                @current-change="handlePageChange"
              />
              <div v-if="progressDetail.description" class="description-block">
                <span class="label">说明：</span>
                <span class="value">{{ detailOption }}</span>
              </div>
            </section>

            <section class="block-section">
              <div class="section-title">
                审批流程
              </div>
              <div v-if="timelineNodes && timelineNodes.length > 0" class="approval-timeline">
                <el-timeline>
                  <el-timeline-item
                    v-for="(node, index) in timelineNodes"
                    :key="index"
                    :color="
                      getTimelineColor(node.result || node.status, index, timelineNodes.length)
                    "
                  >
                    <div class="timeline-item-content">
                      <div class="node-title">
                        {{ node.title }}
                      </div>
                      <div class="node-content">
                        <div class="node-info">
                          <div class="node-user">
                            {{ node.userName || '--' }}
                            <span class="node-time">
                              {{ node.operateTime }}
                            </span>
                          </div>
                        </div>
                        <div
                          class="node-status"
                          :class="getStatusClass(node.result || node.status)"
                        >
                          {{ setStatusText(node.result || node.status) }}
                        </div>
                        <div v-if="node.opinion" class="node-opinion">
                          审批意见：{{ node.opinion }}
                        </div>
                      </div>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
              <div v-else class="empty-progress">
                <span class="empty-text">暂无审批流程数据</span>
              </div>
            </section>
          </div>
        </div>
      </div>
    </transition>

    <!-- 审批弹窗 -->
    <el-dialog
      :title="approvalDialogTitle"
      :visible.sync="approvalDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      append-to-body
      @close="handleApprovalDialogClose"
    >
      <el-form ref="approvalForm" :model="approvalFormData" label-width="100px">
        <el-form-item
          :label="approvalActionType === 'reject' ? '退回意见:' : '提交意见:'"
          prop="comment"
        >
          <el-input
            v-model="approvalFormData.comment"
            type="textarea"
            :rows="4"
            :placeholder="approvalActionType === 'reject' ? '请输入退回意见' : '请输入提交意见'"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleApprovalDialogClose">
          取消
        </el-button>
        <el-button type="primary" :loading="approvalSubmitting" @click="handleApprovalSubmit">
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 退回节点选择弹窗 -->
    <el-dialog
      title="选择退回节点"
      :visible.sync="returnNodeDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      append-to-body
      @close="handleReturnNodeDialogClose"
    >
      <div class="return-node-dialog-content">
        <el-radio-group v-model="selectedReturnNode" @change="handleReturnNodeChange">
          <el-radio v-for="node in returnableNodes" :key="node" :label="node">
          </el-radio>
        </el-radio-group>
        <!-- 当选择"编制"节点时，显示意见输入框 -->
        <div v-if="selectedReturnNode === '编制'" class="return-opinion-section">
          <div class="opinion-label">
            退回意见:
          </div>
          <el-input
            v-model="returnOpinion"
            type="textarea"
            :rows="3"
            placeholder="请输入退回意见"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleReturnNodeDialogClose">
          取消
        </el-button>
        <el-button
          type="primary"
          :loading="returnSubmitting"
          :disabled="!selectedReturnNode"
          @click="handleReturnSubmit"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'
import { getUserId } from '@/utils'
export default {
  name: 'EngineCheck',
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      default: true
    },
    flowId: {
      type: String,
      default: ''
    },
    fromTodo: {
      type: Boolean,
      default: false
    },
    engineType: {
      type: String,
      default: '玉柴',
      validator: function(value) {
        return ['玉柴', '竞品'].indexOf(value) !== -1
      }
    },
    // 是否隐藏操作按钮（从我的发起/我的经办进入时隐藏）
    hideOperations: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      changeTable: [],
      showTopDetail: {
        processTitle: '',
        createBy: '',
        creationDate: '',
        currentNode: '',
        currentProcessor: ''
      },
      changeTableAll: [], // 保存全部数据用于前端分页
      progress: [],
      detailOption: '',
      changeTableTotal: 0,
      changeTablePageNumber: 1,
      changeTablePageSize: 10,
      activitiRecordDTOS: [], // 审批流程数据
      flowNodes: [], // 审批流程节点数据
      progressDetailData: {}, // 审批流程详情数据
      modelDetail: {
        modelName: '',
        productNumber: '',
        plate: '',
        platform: '',
        series: '',
        marketSegment: '',
        projectName: '',
        projectNumber: '',
        // 竞品发动机专有字段
        manufacturerName: '',
        manufacturerAbbreviation: '',
        brand: '',
        productionDate: ''
      }, // 机型详细信息
      approvalDialogVisible: false,
      approvalActionType: '', // 'reject' 或 'submit'
      approvalDialogTitle: '审批',
      approvalFormData: {
        operator: '同意',
        comment: ''
      },
      approvalSubmitting: false,
      canResend: false, // 是否可以直送
      resending: false, // 直送提交loading状态
      // 退回节点选择相关
      returnNodeDialogVisible: false,
      returnableNodes: [],
      selectedReturnNode: '',
      returnSubmitting: false,
      returnOpinion: '', // 退回意见（仅在选择编制节点时使用）
      isEditingProcessTitle: false, // 是否正在编辑流程主题
      editingProcessTitle: '' // 正在编辑的流程主题值
    }
  },
  computed: {
    titleText() {
      console.log(this.engineType, 'this.engineType', this.detail, 111111)
      return this.engineType === '玉柴' ? '玉柴发动机审批详情' : '竞品发动机审批详情'
    },
    progressDetail() {
      // 优先使用从接口获取的数据，如果没有则使用默认值
      if (this.progressDetailData && Object.keys(this.progressDetailData).length > 0) {
        return {
          progressTitle: this.progressDetailData.progressTitle || '',
          contentName: this.progressDetailData.contentName || '',
          templateVersion: this.progressDetailData.templateVersion || '',
          explanation: this.progressDetailData.explanation || '',
          description:
            this.progressDetailData.explanation || this.progressDetailData.description || ''
        }
      }
      const defaultDetail = {
        approvalNumber: '',
        approvalId: '',
        currentNode: '',
        currentProcessor: '',
        processTitle: '',
        modelName: '',
        id: '',
        createBy: '',
        creationDate: '',
        applicant: '',
        department: '',
        submitTime: '',
        description: '',
        changeTable: [],
        progress: []
      }
      return Object.assign(defaultDetail, this.detail || {})
    },
    // 当前环节
    currentNode() {
      if (this.flowNodes && this.flowNodes.length > 0) {
        // 找到第一个"待审批"或"审批中"的节点
        const approvingNode = this.flowNodes.find(
          (node) => node.result === '待审批' || node.result === 'APPROVING'
        )
        if (approvingNode) {
          return approvingNode.node || '--'
        }
        // 如果都已完成，返回最后一个节点
        const lastNode = this.flowNodes[this.flowNodes.length - 1]
        return lastNode ? lastNode.node || '--' : '--'
      }
      return '--'
    },
    // 当前处理人
    currentProcessor() {
      if (this.flowNodes && this.flowNodes.length > 0) {
        // 找到第一个"待审批"或"审批中"的节点
        const approvingNode = this.flowNodes.find(
          (node) => node.result === '待审批' || node.result === 'APPROVING'
        )
        if (approvingNode) {
          // 优先使用待处理人，如果没有则使用已处理人
          return approvingNode.undoUserName || approvingNode.todoUserName || '--'
        }
      }
      return '--'
    },
    // 发起审批节点
    initiateNode() {
      if (!this.detail || !this.detail.createBy) {
        return null
      }
      return {
        userName: this.detail.createBy,
        createTime: this.detail.createdTime || this.detail.createTime,
        status: 'INITIATE',
        result: 'INITIATE'
      }
    },
    // 合并所有节点为时间线数据
    timelineNodes() {
      const nodes = []

      // 使用 flowNodes 数据构建审批流程节点，完全按照返回值进行渲染
      if (this.flowNodes && this.flowNodes.length > 0) {
        this.flowNodes.forEach((node) => {
          // 直接使用返回值，只做必要的字段映射以适配模板
          nodes.push({
            title: node.node || '审批节点',
            userName: node.todoUserName || node.undoUserName || node.userName || '--',
            operateTime:
              node.approvalTime || node.operateTime || node.handleTime || node.createTime || '',
            result: node.result || '',
            status: node.status || node.result || '',
            opinion:
              node.opinion ||
              (node.opinions && Array.isArray(node.opinions) && node.opinions.length > 0
                ? node.opinions[0]
                : null) ||
              null
          })
        })
      } else if (this.progress && this.progress.length > 0) {
        // 兼容旧逻辑：如果没有 flowNodes，则使用原来的 progress 数据
        this.progress.forEach((stage) => {
          if (stage.steps && stage.steps.length > 0) {
            stage.steps.forEach((step) => {
              nodes.push({
                title: stage.title || '审批节点',
                userName: step.userName,
                operateTime: step.approvalTime || step.handleTime || step.createTime,
                result: step.result || step.status,
                status: step.result || step.status,
                opinion: step.opinion || step.remark || step.comment || null
              })
            })
          }
        })
      }

      // 将第一个节点的"待审批"状态改为"审批中"
      if (nodes.length > 0) {
        const firstNode = nodes[0]
        const firstResult = firstNode.result || firstNode.status || ''
        // 如果第一个节点是"待审批"状态，改为"审批中"
        if (firstResult === 'STAY' || firstResult === '待审批') {
          firstNode.result = 'APPROVING'
          firstNode.status = 'APPROVING'
        }
      }

      return nodes
    },
    // 判断是否应该显示操作按钮（退回、提交）
    // shouldShowButtons() {
    //   if (!this.timelineNodes || this.timelineNodes.length === 0) {
    //     return false
    //   }

    //   // 检查是否有拒绝节点（REJECT、REFUSE）
    //   const hasReject = this.timelineNodes.some(
    //     (node) =>
    //       node.result === 'REJECT' ||
    //       node.status === 'REJECT' ||
    //       node.result === 'REFUSE' ||
    //       node.status === 'REFUSE'
    //   )
    //   if (hasReject) {
    //     return false // 如果有拒绝，不显示按钮
    //   }

    //   // 获取所有非 INITIATE 的节点
    //   const nonInitiateNodes = this.timelineNodes.filter(
    //     (node) => node.result !== 'INITIATE' && node.status !== 'INITIATE'
    //   )

    //   // 如果所有非 INITIATE 节点都是 PASS 或 APPROVE，则表示已完成
    //   if (nonInitiateNodes.length > 0) {
    //     const allPassed = nonInitiateNodes.every(
    //       (node) =>
    //         node.result === 'PASS' ||
    //         node.status === 'PASS' ||
    //         node.result === 'APPROVE' ||
    //         node.status === 'APPROVE'
    //     )
    //     if (allPassed) {
    //       return false // 如果所有节点都已完成，不显示按钮
    //     }
    //   }

    //   // 检查是否有进行中的节点（APPROVING、STAY、PENDING、WAITING）
    //   const hasApproving = this.timelineNodes.some(
    //     (node) =>
    //       node.result === 'APPROVING' ||
    //       node.status === 'APPROVING' ||
    //       node.result === 'STAY' ||
    //       node.status === 'STAY' ||
    //       node.result === 'PENDING' ||
    //       node.status === 'PENDING' ||
    //       node.result === 'WAITING' ||
    //       node.status === 'WAITING'
    //   )

    //   return hasApproving // 如果有进行中的节点，显示按钮
    // },
    approvalFormRules() {
      return {
        comment: [{ required: true, message: '请输入意见', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getApprovalDetail()
    this.canResendApproval()
    // this.getApprovalChange()
  },
  methods: {
    canResendApproval() {
      const request = {
        ...api.CHECK_DATA_CAN_RETURN,
        params: {
          flowId: this.flowId
        },
        disableSuccessMsg: true
      }
      this.$request(request)
        .asyncThen((resp) => {
          console.log(resp)
          this.canResend = resp.data || false
        })
        .asyncErrorCatch((err) => {
          console.error('获取是否可以直送失败:', err)
          this.canResend = false
        })
    },
    getApprovalChange() {
      const request = {
        ...api.CHANGE_ENGINE_DATA,
        params: {
          modelID: this.detail.modelId,
          userID: getUserId()
        },
        disableSuccessMsg: true
      }
      this.$request(request)
        .asyncThen((resp) => {
          console.log(resp)
          this.changeTable = resp.data
          this.changeTableTotal = resp.data.length
        })
        .asyncErrorCatch((err) => {
          console.error('获取审批变更失败:', err)
        })
    },
    getApprovalDetail() {
      const request = {
        ...api.GET_ENGINE_CHECK_DETAIL,
        params: {
          approvalId: this.detail.id,
          userId: getUserId()
        },
        disableSuccessMsg: true
      }
      this.$request(request).asyncThen((resp) => {
        console.log(resp)
        // 处理全部数据，保存到 changeTableAll
        let allData = []
        if (resp.data) {
          this.showTopDetail = {
            processTitle: resp.data.processTitle,
            createBy: resp.data.createBy,
            creationDate: resp.data.createTime,
            currentNode: resp.data.approvalStatus === '已拒绝' ? '编制' : (resp.data.currentNode || ''),
            processor: resp.data.approvalStatus === '已拒绝' ? resp.data.createBy : (resp.data.processor || '')
          }
          // 保存机型详细信息
          if (resp.data.model) {
            this.modelDetail = {
              modelName: resp.data.model.modelName || '',
              productNumber: resp.data.model.productNumber || '',
              plate: resp.data.model.plate || '',
              platform: resp.data.model.platform || '',
              series: resp.data.model.series || '',
              marketSegment: resp.data.model.marketSegment || '',
              projectName: resp.data.model.projectName || '',
              projectNumber: resp.data.model.projectNumber || '',
              // 竞品发动机专有字段
              manufacturerName: resp.data.model.manufacturerName || '',
              manufacturerAbbreviation: resp.data.model.manufacturerAbbreviation || '',
              brand: resp.data.model.brand || '',
              productionDate: resp.data.model.productionDate || ''
            }
          } else {
            // 如果 model 不存在，重置为空
            this.modelDetail = {
              modelName: '',
              productNumber: '',
              plate: '',
              platform: '',
              series: '',
              marketSegment: '',
              projectName: '',
              projectNumber: '',
              // 竞品发动机专有字段
              manufacturerName: '',
              manufacturerAbbreviation: '',
              brand: '',
              productionDate: ''
            }
          }
          // 如果返回的是分页格式 { list: [], total: 0 }
          if (resp.data.list && Array.isArray(resp.data.list)) {
            allData = resp.data.list
            this.changeTableTotal =
              resp.data.total || resp.data.totalCount || resp.data.count || allData.length
          } else if (resp.data.activitiDataDTOS) {
            // 如果返回的是 activitiDataDTOS 数组
            allData = Array.isArray(resp.data.activitiDataDTOS) ? resp.data.activitiDataDTOS : []
            // 如果没有分页信息，使用数组长度作为总数
            this.changeTableTotal =
              resp.data.total || resp.data.totalCount || resp.data.count || allData.length
          } else if (Array.isArray(resp.data)) {
            // 如果直接返回数组
            allData = resp.data
            this.changeTableTotal = allData.length
          } else {
            allData = []
            this.changeTableTotal = 0
          }
        } else {
          allData = []
          this.changeTableTotal = 0
        }

        // 保存全部数据
        this.changeTableAll = allData
        // 根据分页配置计算当前页显示的数据
        this.updatePagedData()

        // 保存审批流程数据，按照 nodeOrder 从小到大排序
        const activitiRecordDTOS = resp.data?.flowNodes || []
        let sortedRecords = activitiRecordDTOS
        // 保存流程详情数据
        const data = resp.data || resp
        this.progressDetailData = {
          explanation: data.explanation || '',
          flowStatus: data.flowStatus || '',
          progressTitle: data.progressTitle || data.processTitle || '',
          templateVersion: data.templateVersion || '',
          contentName: data.contentName || ''
        }
        // 处理说明信息
        this.detailOption = data.explanation || data.description || ''

        // 保存流程节点，完全按照返回值保存，不做任何修改
        if (data.flowNodes && Array.isArray(data.flowNodes)) {
          this.flowNodes = data.flowNodes
        } else if (sortedRecords && sortedRecords.length > 0) {
          // 将 activitiRecordDTOS 转换为 flowNodes 格式（仅做格式转换，不修改状态）
          this.flowNodes = sortedRecords.map((record) => {
            return {
              node: record.node || '',
              result: record.operate || record.result || '',
              status: record.operate || record.result || '',
              todoUserName: record.approvedPerson || record.unapprovedPerson || '',
              undoUserName: record.unapprovedPerson || '',
              approvalTime: record.operateTime || record.handleTime || record.createTime || '',
              opinions:
                record.common || record.comment || record.opinion
                  ? [record.common || record.comment || record.opinion]
                  : [],
              opinion: record.common || record.comment || record.opinion || null
            }
          })
        } else {
          this.flowNodes = []
        }

        this.activitiRecordDTOS = sortedRecords
      })
    },
    // 根据分页配置更新当前页显示的数据
    updatePagedData() {
      if (!this.changeTableAll || this.changeTableAll.length === 0) {
        this.changeTable = []
        return
      }
      // 计算当前页的起始索引和结束索引
      const startIndex = (this.changeTablePageNumber - 1) * this.changeTablePageSize
      const endIndex = startIndex + this.changeTablePageSize
      // 截取当前页的数据
      this.changeTable = this.changeTableAll.slice(startIndex, endIndex)
    },
    setStatusText(result) {
      const statusMap = {
        PASS: '通过',
        REJECT: '拒绝',
        REFUSE: '驳回',
        APPROVE: '批准',
        APPROVING: '审批中',
        PENDING: '待处理',
        WAITING: '待处理',
        STAY: '待审批',
        INITIATE: '发起审批',
        RETURN: '退回',
        MSG: '通过',
        待审批: '待审批',
        审批中: '审批中',
        发起审批: '发起审批'
      }
      // 完全按照返回值显示，如果不在映射表中则直接显示原值
      return statusMap[result] !== undefined ? statusMap[result] : result || '待处理'
    },
    formatTime(time) {
      if (!time) return '--'
      // 如果是时间戳，转换为日期格式
      if (typeof time === 'number') {
        const date = new Date(time)
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        })
      }
      // 如果已经是字符串格式，直接返回
      return time
    },
    getTimelineColor(result, stepIndex, totalSteps) {
      // 根据审批结果设置颜色，完全按照返回值判断
      if (result === 'PASS' || result === 'APPROVE' || result === 'MSG') {
        return '#67C23A' // 绿色 - 通过
      } else if (result === 'REJECT' || result === 'REFUSE') {
        return '#F56C6C' // 红色 - 驳回
      } else if (
        result === 'APPROVING' ||
        result === 'PENDING' ||
        result === 'WAITING' ||
        result === '审批中'
      ) {
        return '#E6A23C' // 橙色 - 审批中
      } else if (result === 'STAY' || result === '待审批') {
        return '#909399' // 灰色 - 待审批
      } else if (result === 'INITIATE' || result === '发起审批') {
        return '#409EFF' // 蓝色 - 发起审批
      } else if (result === 'RETURN') {
        return '#409EFF' // 蓝色 - 退回
      }
      // 默认颜色
      return '#409EFF' // 默认蓝色
    },
    getStatusClass(result) {
      const classMap = {
        PASS: 'status-pass',
        APPROVE: 'status-approve',
        MSG: 'status-pass',
        REJECT: 'status-reject',
        REFUSE: 'status-reject',
        APPROVING: 'status-approving',
        审批中: 'status-approving',
        PENDING: 'status-pending',
        WAITING: 'status-pending',
        STAY: 'status-default',
        待审批: 'status-default',
        INITIATE: 'status-initiate',
        发起审批: 'status-initiate',
        RETURN: 'status-return'
      }
      return classMap[result] || 'status-default'
    },
    getApprovalSpet() {
      const request = {
        ...api.GET_PPROVAL_ALL,
        params: {
          flowId: this.detail.flowId,
          templateId: this.detail.templateId
        },
        disableSuccessMsg: true
      }
      this.$request(request).asyncThen((resp) => {
        console.log('审批流程数据:', resp)
        // 处理说明信息
        this.detailOption = resp.data?.explanation || resp.data?.description || ''

        let list = []
        const data = resp.data || resp
        // 处理校对节点
        if (
          data.proofreadNodes &&
          Array.isArray(data.proofreadNodes) &&
          data.proofreadNodes.length > 0
        ) {
          const steps = data.proofreadNodes
          list.push({
            title: '校对',
            steps: this.deduplicateSteps(Array.isArray(steps) ? steps : [steps])
          })
        }
        // 处理审核节点
        if (data.reviewNodes && Array.isArray(data.reviewNodes) && data.reviewNodes.length > 0) {
          const steps = data.reviewNodes
          list.push({
            title: '审核',
            steps: this.deduplicateSteps(Array.isArray(steps) ? steps : [steps])
          })
        }
        // 处理会签节点
        if (
          data.countersignNodes &&
          Array.isArray(data.countersignNodes) &&
          data.countersignNodes.length > 0
        ) {
          const steps = data.countersignNodes
          list.push({
            title: '会签',
            steps: this.deduplicateSteps(Array.isArray(steps) ? steps : [steps])
          })
        }
        // 处理批准节点
        if (data.approveNodes && Array.isArray(data.approveNodes) && data.approveNodes.length > 0) {
          const steps = data.approveNodes
          list.push({
            title: '批准',
            steps: this.deduplicateSteps(Array.isArray(steps) ? steps : [steps])
          })
        }

        // 如果数据结构是直接返回数组，则直接使用
        if (list.length === 0 && data) {
          // 尝试直接使用返回的数据结构
          if (Array.isArray(data)) {
            list = data.map((item) => ({
              title: item.title || item.nodeType || item.name || '审批节点',
              steps: this.deduplicateSteps(
                Array.isArray(item.steps) ? item.steps : Array.isArray(item.nodes) ? item.nodes : []
              )
            }))
          } else if (data.nodes && Array.isArray(data.nodes)) {
            list = data.nodes.map((item) => ({
              title: item.title || item.nodeType || item.name || '审批节点',
              steps: this.deduplicateSteps(
                Array.isArray(item.steps) ? item.steps : Array.isArray(item.nodes) ? item.nodes : []
              )
            }))
          } else if (data.processNodes && Array.isArray(data.processNodes)) {
            list = data.processNodes.map((item) => ({
              title: item.title || item.nodeType || item.name || '审批节点',
              steps: this.deduplicateSteps(
                Array.isArray(item.steps) ? item.steps : Array.isArray(item.nodes) ? item.nodes : []
              )
            }))
          }
        }
        this.progress = list
        console.log('处理后的流程数据:', this.progress)
      })
    },
    handleBack() {
      this.$emit('close')
    },
    // 处理退回按钮点击
    handleReturn() {
      if (!this.detail || !this.detail.flowId) {
        this.$message.error('缺少审批信息')
        return
      }

      const request = {
        ...api.GET_CAN_RETURN_DATA_NODE,
        params: {
          flowId: this.detail.flowId
        },
        disableSuccessMsg: true
      }
      this.$request(request)
        .asyncThen((resp) => {
          console.log(resp)
          // 在列表最前面添加"编制"节点作为默认选项
          const nodes = Array.isArray(resp.data) ? resp.data : []
          this.returnableNodes = ['编制', ...nodes]
        })
        .asyncErrorCatch((err) => {
          console.error('获取退回节点失败:', err)
          // 即使获取失败，也添加"编制"节点
          this.returnableNodes = ['编制']
        })
      this.selectedReturnNode = ''
      this.returnOpinion = ''
      this.returnNodeDialogVisible = true
    },
    // 关闭退回节点选择弹窗
    handleReturnNodeDialogClose() {
      this.returnNodeDialogVisible = false
      this.selectedReturnNode = ''
      this.returnOpinion = ''
    },
    // 处理退回节点选择变化
    handleReturnNodeChange() {
      // 如果不是"编制"节点，清空意见
      if (this.selectedReturnNode !== '编制') {
        this.returnOpinion = ''
      }
    },
    // 提交退回操作
    handleReturnSubmit() {
      if (!this.selectedReturnNode) {
        this.$message.warning('请选择要退回的节点')
        return
      }

      if (!this.detail || !this.detail.flowId) {
        this.$message.error('缺少审批信息')
        return
      }

      this.returnSubmitting = true

      // 如果选择的是"编制"节点，调用拒绝接口
      if (this.selectedReturnNode === '编制') {
        const submitData = {
          approvalId: this.detail.id,
          operator: 'REJECT',
          comment: this.returnOpinion || '', // 意见非必填，可以为空
          userId: getUserId()
        }

        const request = {
          ...api.HANDLE_ENGINE_CHECK,
          params: submitData,
          disableSuccessMsg: true
        }

        this.$request(request)
          .asyncThen((resp) => {
            this.handleReturnNodeDialogClose()
            // 重新加载审批详情数据
            this.getApprovalDetail()
            // 通知父组件刷新数据
            this.$message({
              message: '拒绝成功',
              type: 'success'
            })
            this.$emit('refresh')
            this.returnSubmitting = false
          })
          .asyncErrorCatch((err) => {
            console.error('拒绝失败:', err)
            this.$message({
              message: err.message || '拒绝失败，请重试',
              type: 'error'
            })
            this.returnSubmitting = false
          })
          .finally(() => {
            this.returnSubmitting = false
          })
      } else {
        // 其他节点，调用退回接口
        // 获取流程发起人
        const createUserId = this.detail.createdById || ''
        if (!createUserId) {
          this.$message.error('无法获取流程发起人信息')
          this.returnSubmitting = false
          return
        }

        // 获取当前处理人
        const processUserId = getUserId()

        // 构建提交数据
        const submitData = {
          flowId: this.detail.flowId,
          nodeName: this.selectedReturnNode,
          createUserId: createUserId,
          processUserId: processUserId
        }

        const request = {
          ...api.CAN_RETURN_DATA_NODE,
          params: submitData,
          disableSuccessMsg: true
        }

        this.$request(request)
          .asyncThen((resp) => {
            this.handleReturnNodeDialogClose()
            // 重新加载审批详情数据
            this.getApprovalDetail()
            // 通知父组件刷新数据
            this.$message({
              message: '退回成功',
              type: 'success'
            })
            this.$emit('refresh')
            this.returnSubmitting = false
          })
          .asyncErrorCatch((err) => {
            console.error('退回失败:', err)
            this.$message({
              message: err.message || '退回失败，请重试',
              type: 'error'
            })
            this.returnSubmitting = false
          })
          .finally(() => {
            this.returnSubmitting = false
          })
      }
    },
    // 处理直送按钮点击
    handleResend() {
      if (!this.detail || !this.detail.id) {
        this.$message.error('缺少审批ID，无法执行直送操作')
        return
      }

      this.$confirm('确定要执行直送操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.resending = true
          const request = {
            ...api.RESEND_DATA_APPROVAL,
            params: {
              approvalId: this.detail.id,
              userId: getUserId()
            },
            disableSuccessMsg: true
          }

          this.$request(request)
            .asyncThen((resp) => {
              // 重新加载审批详情数据
              this.getApprovalDetail()
              // 通知父组件刷新数据
              this.$message({
                message: '直送成功',
                type: 'success'
              })
              this.$emit('refresh')
              this.resending = false
            })
            .asyncErrorCatch((err) => {
              console.error('直送失败:', err)
              this.$message({
                message: err.message || '直送失败，请重试',
                type: 'error'
              })
              this.resending = false
            })
            .finally(() => {
              this.resending = false
            })
        })
        .catch(() => {
          // 取消操作
        })
    },
    handleSubmit() {
      this.approvalActionType = 'submit'
      this.approvalDialogTitle = '提交'
      this.approvalFormData = {
        operator: '同意',
        comment: ''
      }
      this.approvalFormData.comment = '同意'
      this.approvalDialogVisible = true
      // 清除表单验证
      this.$nextTick(() => {
        if (this.$refs.approvalForm) {
          this.$refs.approvalForm.clearValidate()
        }
      })
    },
    handleApprovalSubmit() {
      // 表单验证
      this.$refs.approvalForm.validate((valid) => {
        if (!this.detail || !this.detail.id) {
          this.$message.error('缺少审批数据')
          return
        }
        const approvalId = this.detail.id
        if (!approvalId) {
          this.$message.error('缺少审批ID，无法提交审批')
          return
        }
        // 构建提交数据
        // 根据操作类型设置 operator：退回为 'REJECT'，提交为 'PASS'
        const operator = this.approvalActionType === 'reject' ? 'REJECT' : 'PASS'
        const submitData = {
          approvalId: approvalId,
          operator: operator,
          comment: this.approvalFormData.comment,
          userId: getUserId()
        }

        // 调用审批接口
        const request = {
          ...api.HANDLE_ENGINE_CHECK,
          params: submitData,
          disableSuccessMsg: true
        }

        this.approvalSubmitting = true
        this.$request(request)
          .asyncThen((resp) => {
            console.log('审批提交成功')

            this.handleApprovalDialogClose()
            // 重新加载审批详情数据
            this.getApprovalDetail()
            // 通知父组件刷新数据
            this.$emit('refresh')
            this.approvalSubmitting = false
          })
          .asyncErrorCatch((err) => {
            console.error('审批提交失败:', err)
            this.$message.error(err.message || '审批提交失败，请重试')
            this.approvalSubmitting = false
          })
          .finally(() => {
            this.approvalSubmitting = false
          })
      })
    },
    handleApprovalDialogClose() {
      // 关闭弹窗，重置表单
      this.approvalDialogVisible = false
      this.approvalActionType = ''
      this.approvalDialogTitle = '审批'
      this.approvalFormData = {
        operator: '同意',
        comment: ''
      }
      // 清除表单验证
      if (this.$refs.approvalForm) {
        this.$refs.approvalForm.clearValidate()
      }
    },
    handlePageChange(page) {
      this.changeTablePageNumber = page
      // 只更新当前页显示的数据，不需要重新请求接口
      this.updatePagedData()
    },
    changeTypeClass(type) {
      if (type === 'create') return 'change-create'
      if (type === 'delete') return 'change-delete'
      if (type === 'update') return 'change-update'
      return 'change-default'
    },
    // 对steps数组进行去重，优先保留有approvalTime的记录
    deduplicateSteps(steps) {
      if (!Array.isArray(steps) || steps.length === 0) {
        return []
      }

      // 使用Map来存储已见过的唯一标识和对应的记录
      const seen = new Map()
      const result = []

      steps.forEach((step) => {
        // 生成唯一标识：优先使用id，如果没有id则使用多个字段组合
        let uniqueKey = null

        if (step.id) {
          // 如果有id，使用id作为唯一标识
          uniqueKey = `id_${step.id}`
        } else {
          // 如果没有id，使用多个字段组合作为唯一标识
          const userName =
            step.userName ||
            step.operator ||
            step.username ||
            step.handlerName ||
            step.handler ||
            ''
          const approvalTime = step.approvalTime || step.handleTime || step.createTime || ''
          const stepResult = step.result || step.status || ''
          uniqueKey = `combo_${userName}_${approvalTime}_${stepResult}`
        }

        if (!uniqueKey) {
          return // 跳过无法生成唯一标识的记录
        }

        // 检查是否已存在相同唯一标识的记录
        if (seen.has(uniqueKey)) {
          // 如果已存在，比较两条记录，优先保留有approvalTime的记录
          const existingIndex = seen.get(uniqueKey)
          const existingStep = result[existingIndex]

          const currentHasTime = !!(step.approvalTime || step.handleTime || step.createTime)
          const existingHasTime = !!(
            existingStep.approvalTime ||
            existingStep.handleTime ||
            existingStep.createTime
          )

          // 如果当前记录有approvalTime而已存在的没有，则替换
          if (currentHasTime && !existingHasTime) {
            result[existingIndex] = step
          }
          // 如果两条都有或都没有，保留已存在的（第一条）
        } else {
          // 如果这个唯一标识还没有出现过，添加到结果中
          seen.set(uniqueKey, result.length)
          result.push(step)
        }
      })

      // 对所有记录的approvalTime进行格式化
      return result.map((step) => {
        const formattedStep = { ...step }
        if (formattedStep.approvalTime) {
          formattedStep.approvalTime = this.formatTime(formattedStep.approvalTime)
        }
        if (formattedStep.handleTime) {
          formattedStep.handleTime = this.formatTime(formattedStep.handleTime)
        }
        if (formattedStep.createTime) {
          formattedStep.createTime = this.formatTime(formattedStep.createTime)
        }
        return formattedStep
      })
    },
    // 开始编辑流程主题
    handleEditProcessTitle() {
      this.isEditingProcessTitle = true
      this.editingProcessTitle = this.showTopDetail.processTitle || ''
    },
    // 取消编辑流程主题
    handleCancelProcessTitle() {
      this.isEditingProcessTitle = false
      this.editingProcessTitle = ''
    },
    // 保存流程主题
    handleSaveProcessTitle() {
      const flowId = this.flowId || this.detail?.flowId
      if (!flowId) {
        this.$message.error('缺少流程ID，无法保存')
        return
      }

      const newTitle = (this.editingProcessTitle || '').trim()
      if (!newTitle) {
        this.$message.warning('流程主题不能为空')
        return
      }

      this.$confirm(`确认修改主题为${newTitle}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const request = {
            ...api.EDIT_DATA_PROCESS_TITLE,
            params: {
              flowId: flowId,
              title: newTitle
            },
            disableSuccessMsg: true
          }

          this.$request(request)
            .asyncThen((resp) => {
              this.showTopDetail.processTitle = newTitle
              this.isEditingProcessTitle = false
              this.editingProcessTitle = ''
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            })
            .asyncErrorCatch((err) => {
              console.error('修改流程主题失败:', err)
              this.$message({
                message: err.message || '修改失败，请重试',
                type: 'error'
              })
            })
        })
        .catch(() => {
          // 取消操作
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.approval-progress-detail {
  width: 100%;
  min-height: 100%;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  box-sizing: border-box;
  overflow-y: auto;

  .detail-panel {
    width: 100%;
    // max-width: 1200px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 16px 32px;
    border-bottom: 1px solid #ebeef5;

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;
      flex: 1;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .back-button {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #606266;

      ::v-deep .el-icon-arrow-left {
        font-size: 16px;
      }
    }

    .header-info {
      display: flex;
      flex-direction: column;
      gap: 4px;

      .title {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
      }

      .subtitle {
        font-size: 14px;
        color: #909399;
      }
    }
  }

  .detail-content {
    padding: 24px 32px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .block-section {
    border-radius: 8px;
    padding: 12px 24px 16px 12px;

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 16px;
    }
  }

  .info-grid {
    .label {
      font-size: 16px;
      color: #909399;
    }

    .value {
      font-size: 16px;
      color: #303133;
      font-weight: 500;
    }

    .info-item-full {
      display: flex;
      gap: 16px 24px;
      margin-bottom: 16px;
      .label {
        min-width: 100px;
      }
      .value {
        flex: 1;
      }

      .process-title-value-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;

        .process-title-edit-icon {
          cursor: pointer;
          color: #909399;
          font-size: 14px;
          transition: color 0.3s;
          flex-shrink: 0;

          &:hover {
            color: #409eff;
          }
        }
      }

      .process-title-input-wrapper {
        flex: 1;

        .process-title-input {
          ::v-deep .el-input__suffix {
            display: flex;
            align-items: center;
            gap: 8px;
            padding-right: 8px;

            .process-title-icon {
              cursor: pointer;
              font-size: 16px;
              transition: color 0.3s;

              &.el-icon-check {
                color: #67c23a;

                &:hover {
                  color: #529b2e;
                }
              }

              &.el-icon-close {
                color: #909399;

                &:hover {
                  color: #606266;
                }
              }
            }
          }
        }
      }
    }

    .info-row {
      display: flex;
      gap: 16px 24px;
      margin-bottom: 16px;

      .info-item {
        flex: 1;
        display: flex;
        gap: 16px 24px;
        .label {
          min-width: 100px;
        }
      }
    }

    .theme-info-item {
      display: flex;
      gap: 16px 24px;
      margin-bottom: 16px;
      .value {
        flex: 1;
      }
    }

    .remain-info {
      display: flex;
      gap: 16px 24px;

      .info-item {
        flex: 1;
        display: flex;
        gap: 16px 24px;
      }
    }
  }

  .change-table {
    width: 100%;
    margin-bottom: 16px;
    max-height: 500px;
    overflow-y: hidden;

    ::v-deep .el-table__header-wrapper th {
      background: #f0f2f5;
      color: #606266;
      font-weight: 500;
    }

    ::v-deep .el-table__body-wrapper {
      max-height: 500px;
      overflow-y: auto;
    }
  }

  .pagination-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .modify-details-text {
    white-space: pre-line;
    word-break: break-word;
  }

  .change-tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1;
    background: #f4f4f5;
    color: #909399;
  }

  .change-create {
    background: #f0f9eb;
    color: #67c23a;
  }

  .change-update {
    background: #ecf5ff;
    color: #409eff;
  }

  .change-delete {
    background: #fef0f0;
    color: #f56c6c;
  }

  .description-block {
    display: flex;
    gap: 8px;
    font-size: 14px;
    color: #606266;

    .label {
      color: #909399;
    }
  }

  .approval-timeline {
    padding: 20px 5px;
    max-height: 400px;
    overflow-y: auto;

    ::v-deep .el-timeline {
      padding-left: 0;

      .el-timeline-item {
        padding-bottom: 24px;

        &:last-child {
          padding-bottom: 0;
        }

        .el-timeline-item__node {
          width: 12px;
          height: 12px;
          left: 0;
          top: 4px;
          border: 2px solid #fff;
          box-shadow: 0 0 0 2px #409eff;
        }

        .el-timeline-item__wrapper {
          top: 0;
          padding-left: 28px;

          .el-timeline-item__content {
            padding-top: 0;
          }
        }
      }
    }
  }

  .timeline-item-content {
    display: flex;
    flex-direction: column;
    gap: 0;

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

    .node-content {
      background: #f4f7fc;
      border-radius: 4px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .node-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 13px;
      color: #606266;
    }

    .node-user {
      color: #303133;
      font-weight: 500;
    }

    .node-time {
      color: #909399;
      font-size: 12px;
      margin-left: 8px;
    }

    .node-status {
      display: inline-block;
      font-size: 13px;
      font-weight: 500;
      border-radius: 2px;
      width: fit-content;

      &.status-initiate,
      &.status-pass,
      &.status-approve {
        color: #67c23a;
        background: transparent;
      }

      &.status-reject {
        color: #f56c6c;
        background: transparent;
      }

      &.status-approving,
      &.status-pending {
        color: #e6a23c;
        background: transparent;
      }

      &.status-default {
        color: #909399;
        background: transparent;
      }

      &.status-return {
        color: #409eff;
        background: transparent;
      }
    }

    .node-opinion {
      font-size: 13px;
      color: #000;
      line-height: 1.6;
    }
  }

  .empty-progress {
    text-align: center;
    padding: 40px 20px;
    color: #909399;
    font-size: 14px;

    .empty-text {
      display: inline-block;
    }
  }
}

.approval-progress-fade-enter-active,
.approval-progress-fade-leave-active {
  transition: opacity 0.2s ease;
}

.approval-progress-fade-enter,
.approval-progress-fade-leave-to {
  opacity: 0;
}

::v-deep .el-timeline-item__tail {
  left: 7px;
  top: 3px;
}

.return-node-dialog-content {
  padding: 10px 0;

  .empty-hint {
    text-align: center;
    padding: 40px 0;
    color: #909399;
    font-size: 14px;
  }

  .return-node-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 16px;

    .return-node-item {
      display: flex;
      align-items: center;
      padding: 12px;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      transition: all 0.3s;

      &:hover {
        border-color: #409eff;
        background: #ecf5ff;
      }

      .node-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-left: 8px;

        .node-title {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
        }

        .node-user {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }

  .return-opinion-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ebeef5;

    .opinion-label {
      margin-bottom: 8px;
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }
  }
}
::v-deep .el-button {
  line-height: 0.85 !important;
}
</style>
