<template>
  <div class="purchase-detail-page">
    <!-- 导航栏 -->
    <van-nav-bar
      title="采购详情"
      left-arrow
      @click-left="goBack"
    />

    <van-loading v-if="detailLoading" class="loading-container" size="24px">
      加载中...
    </van-loading>

    <div v-else-if="currentPurchase" class="page-content">
      <!-- 采购单号标题 -->
      <div class="purchase-header">
        <div class="purchase-title">
          {{ currentPurchase.purchaseNo }}
        </div>
        <div class="project-status" v-if="route.query.readonly !== 'true'">
          待审批
        </div>
        <div class="project-status completed" v-else>
          已审批
        </div>
      </div>

      <!-- Tab标签页 -->
      <van-tabs v-model:active="activeTab" sticky>
        <!-- 订单信息 -->
        <van-tab title="订单信息" name="order">
          <div class="tab-content">
            <div class="card">
              <div class="card-header">
                <span>基本信息</span>
              </div>
              <div class="card-body">
                <div class="info-grid">
                  <div class="info-item">
                    <span class="label">采购单号</span>
                    <span class="value">{{ currentPurchase.purchaseNo || '' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">发起日期</span>
                    <span class="value">{{ formatDate(currentPurchase.createTime) }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">采购员</span>
                    <span class="value">{{ currentPurchase.purchaserName || '' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">联系电话</span>
                    <span class="value">{{ currentPurchase.purchaserMobile || '' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">联系邮箱</span>
                    <span class="value">{{ currentPurchase.purchaserEmail || '' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">入库仓</span>
                    <span class="value">{{ currentPurchase.warehouseName || '' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">付款方式</span>
                    <span class="value">{{ currentPurchase.payMethod==='1'?'出库付款':'入库付款' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">汇智负责人</span>
                    <span class="value">{{ currentPurchase.ownerName || '' }}</span>
                  </div>
                  <div class="info-item full-width">
                    <span class="label">备注</span>
                    <span class="value">{{ currentPurchase.remark || '无' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>

        <!-- 采购列表 -->
        <van-tab title="采购列表" name="items">
          <div class="tab-content">
            <div v-if="purchaseItems.length > 0">
              <div v-for="(item, index) in purchaseItems" :key="item.id" class="product-card">
                <div class="product-header">
                  <span class="product-index">{{ index + 1 }}</span>
                  <div class="product-main-info">
                    <div class="product-code-price">
                      <span class="product-code">{{ item.productCode }}</span>
                      <span class="product-total-price">{{ formatAmount(item.price * item.quantity) }}</span>
                    </div>
                  </div>
                </div>
                <div class="product-details">
                  <div class="product-row">
                    <span class="product-label">产品型号</span>
                    <span class="product-value">{{ item.productModel }}</span>
                  </div>
                  <div class="product-row">
                    <span class="product-label">描述</span>
                    <span class="product-value">{{ item.productDescription }}</span>
                  </div>
                  <div class="product-row">
                    <span class="product-label">数量</span>
                    <span class="product-value">{{ item.quantity }}</span>
                  </div>
                  <div class="product-row">
                    <span class="product-label">单价</span>
                    <span class="product-value">{{ formatAmount(item.price) }}</span>
                  </div>
                </div>
              </div>

              <!-- 总计 -->
              <div class="product-summary">
                <div class="summary-row">
                  <span class="summary-label">产品总数</span>
                  <span class="summary-value">{{ purchaseItems.length }}</span>
                </div>
                <div class="summary-row final-total">
                  <span class="summary-label">总金额</span>
                  <span class="summary-value final-amount">{{ formatAmount(getTotalAmount()) }}</span>
                </div>
              </div>
            </div>

            <!-- 无产品信息时的提示 -->
            <div v-else class="empty-state">
              <van-empty description="暂无采购产品" />
            </div>
          </div>
        </van-tab>

        <!-- 附件 -->
        <van-tab title="附件" name="attachment">
          <div class="tab-content">
            <div class="card" v-if="attachmentList.length">
              <div class="card-body">
                <div class="file-list">
                  <div v-for="file in attachmentList" :key="file.id" class="file-item"
                       @click="previewFile(file)">
                    <van-icon name="description"/>
                    <div class="file-info">
                      <div class="file-name">{{ file.fileName }}</div>
                      <div class="file-meta"> {{ formatDate(file.uploadTime) }}</div>
                    </div>
                    <van-icon name="arrow"/>
                  </div>
                </div>
              </div>
            </div>

            <!-- 无附件时的提示 -->
            <div v-else class="empty-state">
              <van-empty description="暂无附件"/>
            </div>
          </div>
        </van-tab>

        <!-- 审批历史 -->
        <van-tab title="审批历史" name="approval">
          <div class="tab-content">
            <div class="card" v-if="approvalHistory.length">
              <div class="card-body">
                <van-steps direction="vertical" :active="approvalHistory.length">
                  <van-step v-for="(record, index) in approvalHistory" :key="record.todoId || index">
                    <template #inactive-icon>
                      <van-icon
                          :name="getStepIcon(record.approveStatus)"
                          :color="getApprovalStatusColor(record.approveStatus)"
                      />
                    </template>
                    <template #active-icon>
                      <van-icon
                          :name="getStepIcon(record.approveStatus)"
                          :color="getApprovalStatusColor(record.approveStatus)"
                      />
                    </template>
                    <div class="approval-item">
                      <div class="approval-user">提交人：{{ record.approveUserName }}</div>
                      <div v-if="record.nextAllApproveUserName" class="approval-next-user">
                        接受人：{{ record.nextAllApproveUserName }}
                      </div>
                      <div class="approval-time">{{ formatDate(record.approveTime, 'YYYY-MM-DD HH:mm') }}</div>
                      <div v-if="record.approveOpinion" class="approval-opinion">
                        审批意见：{{ record.approveOpinion }}
                      </div>
                    </div>
                  </van-step>
                </van-steps>
              </div>
            </div>

            <!-- 无审批历史时的提示 -->
            <div v-else class="empty-state">
              <van-empty description="暂无审批历史" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 审批操作按钮 -->
    <div v-if="showApprovalButtons" class="approval-actions">
      <van-button
        type="default"
        size="large"
        @click="showApprovalDialog(0)"
        :loading="submitting"
      >
        驳回
      </van-button>
      <van-button
        type="primary"
        size="large"
        @click="showApprovalDialog(1)"
        :loading="submitting"
      >
        通过
      </van-button>
    </div>

    <!-- 审批意见弹窗 -->
    <van-popup
      v-model:show="approvalDialogVisible"
      position="bottom"
      round
      :style="{ height: '50%' }"
    >
      <div class="approval-dialog">
        <div class="dialog-header">
          <span>审批意见</span>
          <van-icon name="cross" @click="approvalDialogVisible = false"/>
        </div>
        <div class="dialog-body">
          <!-- 默认意见标签 -->
          <div class="opinion-tags">
            <div class="tags-title">常用意见</div>
            <div class="tags-container">
              <van-tag
                v-for="tag in getOpinionTags()"
                :key="tag"
                :type="selectedTag === tag ? 'primary' : 'default'"
                size="medium"
                @click="selectTag(tag)"
                class="opinion-tag"
              >
                {{ tag }}
              </van-tag>
            </div>
          </div>

          <!-- 意见输入框 -->
          <div class="opinion-input">
            <van-field
              v-model="approvalOpinion"
              type="textarea"
              :placeholder="currentApprovalStatus === 0 ? '请输入驳回原因' : '请输入审批意见'"
              rows="4"
              autosize
              maxlength="500"
              show-word-limit
            />
          </div>
        </div>
        <div class="dialog-footer">
          <van-button
            type="primary"
            block
            @click="submitApproval"
            :loading="submitting"
          >
            确认{{ currentApprovalStatus === 0 ? '驳回' : '通过' }}
          </van-button>
        </div>
      </div>
    </van-popup>
    <!-- PDF预览弹窗 -->
    <van-popup
      v-model:show="pdfPreviewVisible"
      position="bottom"
      round
      :style="{ height: '90%' }"
      closeable
    >
      <div class="pdf-preview-container">
        <div class="pdf-content">
          <vue-pdf-embed
            v-if="pdfUrl"
            :source="pdfUrl"
            class="vue-pdf-embed"
            @loaded="handlePdfLoaded"
            @loading-failed="handlePdfError"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { showToast, showSuccessToast } from 'vant'
import { usePurchaseStore } from '@/store/purchase'
import { getPurchaseApprovalHistory, submitPurchaseApproval } from '@/api/purchase'
import { formatAmount, formatDate, getApprovalStatusColor, getFilePreviewUrl } from '@/utils'
import type {ApprovalStatus, ApproveBtn, AttachmentFile, FileType} from '@/types'
import VuePdfEmbed from 'vue-pdf-embed'
import * as pdfjsLib from 'pdfjs-dist'

// 设置 PDF worker
// 使用 import.meta.url 来确保在 Vite 环境下正确加载 worker
const workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString()
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc

const route = useRoute()
const router = useRouter()
const purchaseStore = usePurchaseStore()
const { currentPurchase, currentPurchaseTodo, purchaseItems, detailLoading } = storeToRefs(purchaseStore)

// Tab页签
const activeTab = ref('order')

// 审批历史
const approvalHistory = ref<any[]>([])

// 审批相关
const approvalDialogVisible = ref(false)
const pdfPreviewVisible = ref(false)
const pdfUrl = ref('')
const pdfLoading = ref(false)
const approvalOpinion = ref('')
const currentApprovalStatus = ref<ApproveBtn>(3)
const submitting = ref(false)
const selectedTag = ref('')

// 获取附件列表
const attachmentList = computed(() => {
  if (!currentPurchase.value) return []
  
  // 如果有fileLog且不为空，则将其包装为数组返回
  if ((currentPurchase.value as any).fileLog) {
    return [(currentPurchase.value as any).fileLog]
  }
})

// 是否显示审批按钮
const showApprovalButtons = computed(() => {
  // 如果是只读模式(来自已审批列表),则不显示审批按钮
  if (route.query.readonly === 'true') {
    return false
  }
  // 其他情况显示审批按钮
  return true
})

// 获取步骤图标
const getStepIcon = (status?: ApprovalStatus) => {
  if (status === undefined || status === null) return 'clock'
  const iconMap = {
    1: 'clock',
    2: 'close',
    3: 'success'
  }
  return iconMap[status] || 'clock'
}


// 预览文件
const previewFile = (file: AttachmentFile) => {
  if (!file.filePath) {
    showToast('文件路径不存在')
    return
  }

  const url = getFilePreviewUrl(file.filePath)
  const isPdf = file.fileName?.toLowerCase().endsWith('.pdf') || file.filePath?.toLowerCase().endsWith('.pdf')

  if (isPdf) {
    pdfUrl.value = url
    pdfPreviewVisible.value = true
    pdfLoading.value = true
  } else {
    window.open(url, '_blank')
  }
}

const handlePdfLoaded = () => {
  pdfLoading.value = true
}

const handlePdfError = (error: any) => {
  console.error('PDF加载失败:', error)
  pdfLoading.value = false
  showToast('PDF加载失败')
}

// 计算总金额
const getTotalAmount = () => {
  if (!purchaseItems.value || purchaseItems.value.length === 0) return 0
  return purchaseItems.value.reduce((sum, item) => sum + (item.price * item.quantity), 0)
}

// 返回上一页
const goBack = () => {
  const from = route.query.from as string;
  if (from) {
    router.push(`/?tab=${from}`);
  } else {
    if (window.history.length > 1) {
      router.back();
    } else {
      router.push('/'); 
    }
  }
}

// 显示审批弹窗
const showApprovalDialog = (status: ApproveBtn) => {
  currentApprovalStatus.value = status
  approvalOpinion.value = ''
  selectedTag.value = ''
  approvalDialogVisible.value = true
}

// 获取默认意见标签
const getOpinionTags = () => {
  if (currentApprovalStatus.value === 0) {
    // 驳回常用意见
    return ['经审查有问题,驳回']
  } else {
    // 通过常用意见
    return ['所有信息已阅,审核通过']
  }
}

// 选择标签
const selectTag = (tag: string) => {
  if (selectedTag.value === tag) {
    // 如果点击的是已选中的标签,则取消选择并清空输入框
    selectedTag.value = ''
    approvalOpinion.value = ''
  } else {
    // 选择新标签并填入输入框
    selectedTag.value = tag
    approvalOpinion.value = tag
  }
}

// 提交审批
const submitApproval = async () => {
  if (!currentPurchaseTodo.value) {
    showToast('审批信息不完整')
    return
  }

  const opinion = approvalOpinion.value.trim()
  if (currentApprovalStatus.value === 0 && !opinion) {
    showToast('请输入驳回原因')
    return
  }

  submitting.value = true

  try {
    const params = {
      businessKey: currentPurchase.value?.purchaseNo,
      processKey: currentPurchaseTodo.value.processKey,
      taskId: currentPurchaseTodo.value.taskId,
      variables: {
        comment: opinion,
        approveBtn: currentApprovalStatus.value
      }
    }

    console.log('提交审批参数:', params)

    await submitPurchaseApproval(params)

    showToast('1234')
    showSuccessToast(currentApprovalStatus.value === 0 ? '驳回成功' : '审批通过')
    approvalDialogVisible.value = false

    // 审批完成后返回列表
    router.push('/list?tab=purchase')
  } catch (error) {
    console.error('提交审批失败:', error)
    showToast('提交审批失败')
  } finally {
    submitting.value = false
  }
}

// 获取审批历史
const fetchApprovalHistory = async (purchaseNo: string) => {
  try {
    const response = await getPurchaseApprovalHistory(purchaseNo)
    if (response.data && response.data.data) {
      approvalHistory.value = response.data.data
      console.log('获取审批历史成功:', approvalHistory.value)
    }
  } catch (error) {
    console.error('获取审批历史失败:', error)
    approvalHistory.value = []
  }
}

onMounted(async () => {
  const purchaseNo = route.params.id as string
  if (purchaseNo) {
    console.log('采购详情页面加载，采购单号:', purchaseNo)
    try {
      await purchaseStore.fetchPurchaseDetail(purchaseNo)
      console.log('获取采购详情成功:', currentPurchase.value)

      // 获取审批历史
      await fetchApprovalHistory(purchaseNo)
    } catch (error) {
      console.error('获取采购详情失败:', error)
      showToast('获取采购详情失败')
    }
  }
})
</script>

<style lang="scss" scoped>
.purchase-detail-page {
  min-height: 100vh;
  background-color: var(--background-color-secondary);
  padding-bottom: 80px; // 为底部按钮留出空间
}

.page-content {
  // tabs组件自己控制间距
}

.purchase-header {
  background: var(--background-color-primary);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--divider-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.purchase-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color-primary);
  flex: 1;
  word-break: break-all;
}

.project-status {
  background: #FFF7E6;
  color: #D48806;
  padding: 4px 12px;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #FFD591;

  &.completed {
    background: #F6FFED;
    color: #52C41A;
    border: 1px solid #B7EB8F;
  }
}

.tab-content {
  padding: var(--spacing-lg);
}

.loading-container {
  padding: 60px var(--spacing-lg);
  text-align: center;
}

.empty-state {
  padding: 60px var(--spacing-lg);
}

.card {
  background: var(--background-color-primary);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.card-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--divider-color);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color-primary);
}

.card-body {
  padding: var(--spacing-lg);
}

.info-grid {
  display: grid;
  gap: var(--spacing-md);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  &.full-width {
    flex-direction: column;
    gap: 8px;
  }

  .label {
    color: var(--text-color-secondary);
    font-size: 14px;
    min-width: 100px;
    flex-shrink: 0;
  }

  .value {
    color: var(--text-color-primary);
    font-size: 14px;
    text-align: right;
    word-break: break-all;
    flex: 1;
  }
}

// 产品相关样式
.product-card {
  background: var(--background-color-primary);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

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

.product-header {
  background: var(--background-color-secondary);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.product-index {
  background: var(--primary-color);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.product-main-info {
  flex: 1;
}

.product-code-price {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .product-code {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-primary);
  }

  .product-total-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
  }
}

.product-details {
  padding: var(--spacing-md);
}

.product-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);

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

.product-label {
  color: var(--text-color-secondary);
  font-size: 14px;
  min-width: 80px;
  flex-shrink: 0;
}

.product-value {
  color: var(--text-color-primary);
  font-size: 14px;
  text-align: right;
  flex: 1;
  word-break: break-all;
}

// 产品总计样式
.product-summary {
  background: var(--background-color-primary);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  border: 2px solid var(--primary-color);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);

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

.summary-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color-primary);
}

.summary-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color-primary);

  &.final-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
  }
}

.final-total {
  border-top: 2px solid var(--divider-color);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);

  .summary-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
  }
}

// 附件列表样式
.file-list {
  .file-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--background-color-tertiary);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;

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

    &:active {
      background: var(--border-color);
    }

    .van-icon:first-child {
      color: var(--primary-color);
      margin-right: var(--spacing-md);
    }

    .file-info {
      flex: 1;

      .file-name {
        font-size: 14px;
        color: var(--text-color-primary);
        margin-bottom: var(--spacing-xs);
      }

      .file-meta {
        font-size: 12px;
        color: var(--text-color-tertiary);
      }
    }

    .van-icon:last-child {
      color: var(--text-color-tertiary);
    }
  }
}

// 审批历史样式
.approval-item {
  .approval-user,
  .approval-time,
  .approval-next-user {
    font-size: 12px;
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-xs);
  }

  .approval-next-user {
    color: var(--primary-color);
    font-weight: 500;
  }

  .approval-opinion {
    font-size: 12px;
    color: var(--text-color-primary);
    background: var(--background-color-tertiary);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    line-height: 1.4;
  }
}

:deep(.van-steps--vertical) {
  padding-left: 0;
}

:deep(.van-step__content) {
  padding-bottom: var(--spacing-lg);
}

// 审批操作按钮
.approval-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-lg);
  background: var(--background-color-primary);
  border-top: 1px solid var(--divider-color);
  display: flex;
  gap: var(--spacing-lg);

  .van-button {
    flex: 1;
  }
}

// 审批弹窗
.approval-dialog {
  height: 100%;
  display: flex;
  flex-direction: column;

  .dialog-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--divider-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;

    .van-icon {
      cursor: pointer;
    }
  }

  .dialog-body {
    flex: 1;
    padding: var(--spacing-lg);
    overflow-y: auto;
  }

  .dialog-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--divider-color);
  }
}

// 意见标签样式
.opinion-tags {
  margin-bottom: var(--spacing-lg);

  .tags-title {
    font-size: 14px;
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-md);
    font-weight: 500;
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);

    .opinion-tag {
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}

.opinion-input {
  .van-field {
    border: 1px solid var(--divider-color);
    border-radius: var(--border-radius-sm);
    background: var(--background-color-secondary);
  }
}

.pdf-preview-container {
  height: 100%;
  padding-top: 40px;
  background: var(--background-color-secondary);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.pdf-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.pdf-content {
  min-height: 100%;
  background: white;
}

.vue-pdf-embed {
  width: 100%;
  display: block;
}
</style>
