<template>
  <el-dialog
    v-model="showDialog"
    destroy-on-close
    width="600"
  >
    <div v-loading="loading">
      <div class="logistics-container">
        <!-- 头部 -->
        <div class="header">
          <h1><i class="el-icon-s-promotion" />物流跟踪</h1>
          <h2 v-show="form.postCode" style="display: flex;justify-content: space-between"> <span> {{ form.postName||'京东物流' }} </span> <span>{{ form.postCode }}</span> </h2>
          <div class="subtitle">实时跟踪您的包裹运输状态</div>
        </div>
        
        <div class="main-content">
          <!-- 侧边栏 -->
          <!--          <div class="sidebar">-->
          <!--            <div class="section-title">-->
          <!--              <i class="el-icon-s-order" /> 包裹信息-->
          <!--            </div>-->
          <!--            -->
          <!--            <div class="package-info-card">-->
          <!--              <div class="info-row">-->
          <!--                <div class="info-label">运单号</div>-->
          <!--                <div class="info-value tracking-number">{{ form.postCode }}</div>-->
          <!--              </div>-->
          <!--              <div class="info-row">-->
          <!--                <div class="info-label">当前状态</div>-->
          <!--                <div class="info-value">-->
          <!--                  <span :class="['current-status', statusClass]">{{ trackingInfo.statusText }}</span>-->
          <!--                </div>-->
          <!--              </div>-->
          <!--              <div class="info-row">-->
          <!--                <div class="info-label">承运公司</div>-->
          <!--                <div class="info-value">京东快递</div>-->
          <!--              </div>-->
          <!--              <div class="info-row">-->
          <!--                <div class="info-label">发货地</div>-->
          <!--                <div class="info-value">{{ trackingInfo.origin }}</div>-->
          <!--              </div>-->
          <!--              <div class="info-row">-->
          <!--                <div class="info-label">目的地</div>-->
          <!--                <div class="info-value">{{ trackingInfo.destination }}</div>-->
          <!--              </div>-->
          <!--              <div class="info-row">-->
          <!--                <div class="info-label">预计送达</div>-->
          <!--                <div class="info-value">{{ trackingInfo.estimatedDelivery }}</div>-->
          <!--              </div>-->
          <!--              <div class="info-row">-->
          <!--                <div class="info-label">重量/尺寸</div>-->
          <!--                <div class="info-value">{{ trackingInfo.weight }}</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            -->
          <!--            <div class="section-title">-->
          <!--              <i class="el-icon-s-opportunity" /> 物流统计-->
          <!--            </div>-->
          <!--            -->
          <!--            <div class="stats">-->
          <!--              <div class="stat-item">-->
          <!--                <div class="stat-value">{{ trackingInfo.totalDays }}</div>-->
          <!--                <div class="stat-label">运输天数</div>-->
          <!--              </div>-->
          <!--              <div class="stat-item">-->
          <!--                <div class="stat-value">{{ trackingInfo.totalNodes }}</div>-->
          <!--                <div class="stat-label">途经节点</div>-->
          <!--              </div>-->
          <!--              <div class="stat-item">-->
          <!--                <div class="stat-value">{{ trackingInfo.kmTraveled }}</div>-->
          <!--                <div class="stat-label">运输里程</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          
          <!-- 主内容区 -->
          <div class="content">
            <!--            <div class="section-title">-->
            <!--              <i class="el-icon-search" /> 运单查询-->
            <!--            </div>-->
            <!--            -->
            <!--            <div class="search-box">-->
            <!--              <el-input-->
            <!--                v-model="trackingNumberInput"-->
            <!--                placeholder="请输入运单号进行查询"-->
            <!--                style="max-width: 400px;"-->
            <!--                @keyup.enter="searchTracking"-->
            <!--              >-->
            <!--                <template #append>-->
            <!--                  <el-button icon="Search" @click="searchTracking">查询</el-button>-->
            <!--                </template>-->
            <!--              </el-input>-->
            <!--              -->
            <!--              <div style="margin-top: 10px; font-size: 13px; color: #909399;">-->
            <!--                示例运单号: SF1234567890, YT9876543210, ZT5678901234-->
            <!--              </div>-->
            <!--            </div>-->
            
            <div class="section-title">
              <i class="el-icon-s-marketing" /> 运输轨迹
            </div>
            
            <div class="tracking-timeline">
              <div
                v-for="(node, index) in trackingNodes"
                :key="index"
                class="timeline-item"
              >
                <div :class="['timeline-icon', node.state]">
                  <i :class="node.state" style="font-size: 18px;" />
                  <el-icon size="18">
                    <CircleCheck color="green" />
                  </el-icon>
                </div>
                <div class="timeline-content">
                  <div class="timeline-title">{{ node.categoryName }}</div>
                  <div class="timeline-time">{{ node.operationTime }}</div>
                  <div class="timeline-location">{{ node.operationRemark }}</div>
                  <div v-if="node.description" style="margin-top: 6px; color: #606266; font-size: 14px;">
                    {{ node.operationRemark }}
                  </div>
                </div>
              </div>
              <div v-if="!trackingNodes.length" style="padding-left: 8px;">
                暂无物流信息
              </div>
            </div>
            
            <!--            <div class="section-title" style="margin-top: 30px;">-->
            <!--              <i class="el-icon-map-location" /> 运输路径-->
            <!--            </div>-->
            <!--            -->
            <!--            <div class="map-container">-->
            <!--              <i class="el-icon-map-location" style="font-size: 48px; margin-right: 12px;" />-->
            <!--              <div>物流运输路径可视化地图</div>-->
            <!--            </div>-->
            
            <!--            <div class="actions">-->
            <!--              <el-button type="primary" icon="Printer" @click="printPage">打印运单</el-button>-->
            <!--              <el-button icon="Share" @click="shareTracking">分享物流</el-button>-->
            <!--              <el-button icon="Download" @click="downloadDetails">下载详情</el-button>-->
            <!--              <el-button icon="Service" @click="contactService">联系客服</el-button>-->
            <!--            </div>-->
          </div>
        </div>
      </div>
    </div>
  
  </el-dialog>

</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { queryTrace } from '@/api/exam/payment'

const { proxy } = getCurrentInstance()
const trackingNumberInput = ref('SF1234567890')
const showDialog = ref(false)
const loading = ref(false)
const form = ref({})
// 物流跟踪信息
const trackingInfo = ref({
  trackingNumber: 'SF1234567890',
  status: 'in-transit',
  statusText: '运输中',
  carrier: '顺丰速运',
  origin: '深圳市南山区',
  destination: '北京市朝阳区',
  estimatedDelivery: '2026年3月28日',
  weight: '2.5kg / 30×20×15cm',
  totalDays: 5,
  totalNodes: 8,
  kmTraveled: '2150'
})


// 运输节点数据
const trackingNodes = ref([
  // {
  //   'operationTitle': '上门接货退货完成',
  //   'operatorName': '李四',
  //   'categoryName': '已取消',
  //   'operationTime': '2022-04-11 08:21:55',
  //   'waybillCode': 'JDV001234567890',
  //   'state': '200054',
  //   'category': 690,
  //   'operationRemark': '快件因【客户取消发货】被取消'
  // },
  // {
  //   'operationTitle': '运单修改补打',
  //   'operatorName': '李四',
  //   'categoryName': '全流程',
  //   'operationTime': '2022-04-08 16:56:04',
  //   'waybillCode': 'JDV001234567890',
  //   'state': '200002',
  //   'operationRemark': '您的快件因信息修改，正在重新中转'
  // },
  // {
  //   'operationTitle': '上门接货退货完成',
  //   'operatorName': '王五',
  //   'categoryName': '已取消',
  //   'operationTime': '2022-04-08 11:15:28',
  //   'waybillCode': 'JDV001234567890',
  //   'state': '200054',
  //   'category': 690,
  //   'operationRemark': '快件因【客户取消发货】被取消'
  // },
  // {
  //   'operationTitle': '其他',
  //   'operatorName': '010K96932',
  //   'categoryName': '揽收中',
  //   'operationTime': '2022-04-07 20:25:01',
  //   'waybillCode': 'JDV001234567890',
  //   'state': '200000',
  //   'category': 390,
  //   'operationRemark': '您的快件改址申请已提交成功'
  // },
  // {
  //   'operationTitle': '揽收',
  //   'operatorName': '王五',
  //   'categoryName': '已揽收',
  //   'operationTime': '2022-04-07 20:22:50',
  //   'waybillCode': 'JDV001234567890',
  //   'state': '200001',
  //   'category': 420,
  //   'operationRemark': '京东快递 已收取快件'
  // },
  // {
  //   'operationTitle': '揽收任务分配',
  //   'operatorName': '王五',
  //   'categoryName': '揽收中',
  //   'operationTime': '2022-04-07 20:17:26',
  //   'waybillCode': 'JDV001234567890',
  //   'state': '200034',
  //   'category': 390,
  //   'operationRemark': '揽收任务已分配给王五      。疫情期间，为保证安全，京东快递每日对网点消毒，快递员每日测温佩戴口罩，请您安心！'
  // }
])

// 根据状态计算样式类
const statusClass = computed(() => {
  const state = trackingInfo.value.state
  if (state == 'delivered') return 'status-delivered'
  if (state == 'in-transit') return 'status-in-transit'
  return 'status-pending'
})
const id = ref('')

function open(row) {
  showDialog.value = true
  form.value = row
  id.value = row.payId
  if (row.postType === '0') {
    getLogisticsInfo()
  } else {
    trackingNodes.value = []
  }
}

// 搜索物流信息
const searchTracking = () => {
  if (!trackingNumberInput.value.trim()) {
    proxy.$modal.msgWarning('请输入运单号')
    return
  }
  
  // 模拟搜索
  proxy.$modal.msgSuccess(`正在查询运单 ${trackingNumberInput.value} 的物流信息`)
  
  // 更新运单号
  trackingInfo.value.trackingNumber = trackingNumberInput.value
  
  // 这里实际开发中应该调用API获取物流信息
  // 现在只是模拟数据更新
  trackingInfo.value.carrier = trackingNumberInput.value.startsWith('SF') ? '顺丰速运'
    : trackingNumberInput.value.startsWith('YT') ? '圆通速递'
      : trackingNumberInput.value.startsWith('ZT') ? '中通快递' : '其他物流公司'
}

// 打印页面
const printPage = () => {
  proxy.$modal.msgWarning('打印功能（实际开发中会调用浏览器打印）')
}

// 分享物流
const shareTracking = () => {
  proxy.$modal.msgSuccess('物流信息已复制到剪贴板，可以分享给他人')
}

// 下载详情
const downloadDetails = () => {
  proxy.$modal.msgWarning('下载物流详情（实际开发中会生成PDF文件）')
}

// 联系客服
const contactService = () => {
  proxy.$modal.msgWarning('客服电话：400-123-4567（模拟）')
}

// 获取物流信息
const getLogisticsInfo = async() => {
  loading.value = true
  const res = await queryTrace(id.value)
  trackingNodes.value = res.data
  loading.value = false
  console.log(res)
}


defineExpose({
  open
})

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  background-color: #f5f7fa;
  color: #303133;
  padding: 20px;
}

.logistics-container {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.header {
  background: linear-gradient(135deg, #409EFF, #337ecc);
  color: white;
  padding: 24px 30px;
}

.header h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.header .subtitle {
  opacity: 0.9;
  font-size: 14px;
}

.main-content {
  display: flex;
  padding: 0;
}

.sidebar {
  width: 400px;
  border-right: 1px solid #ebeef5;
  padding: 30px;
  background-color: #fafbfc;
}

.content {
  flex: 1;
  padding: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 8px;
}

.package-info-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px;
}

.info-row {
  display: flex;
  margin-bottom: 12px;
}

.info-label {
  width: 100px;
  color: #606266;
  font-size: 14px;
}

.info-value {
  flex: 1;
  color: #303133;
  font-weight: 500;
}

.tracking-timeline {
  margin-top: 30px;
}

.timeline-item {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  position: relative;
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.timeline-icon.delivered {
  background-color: #f0f9eb;
  color: #67c23a;
}

.timeline-icon.in-transit {
  background-color: #f4f4f5;
  color: #909399;
}

.timeline-icon.pending {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
}

.timeline-time {
  color: #909399;
  font-size: 13px;
  margin-bottom: 4px;
}

.timeline-location {
  color: #606266;
  font-size: 14px;
}

.current-status {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
}

.status-delivered {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status-in-transit {
  background-color: #ecf5ff;
  color: #409eff;
}

.status-pending {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.map-container {
  height: 300px;
  background-color: #f5f7fa;
  border-radius: 8px;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 16px;
}

.search-box {
  margin-bottom: 30px;
}

.tracking-number {
  font-family: monospace;
  font-size: 18px;
  letter-spacing: 1px;
  background-color: #f5f7fa;
  padding: 8px 12px;
  border-radius: 4px;
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #409eff;
}

.stat-label {
  font-size: 13px;
  color: #909399;
  margin-top: 4px;
}

@media (max-width: 992px) {
  .main-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ebeef5;
  }
}

</style>