<template>
  <el-container>
    <!-- 导航栏 -->
    <el-header>
      <Header />
    </el-header>

    <el-main>
      <div class="container">
        <!-- 标题、输入框和按钮 -->
		<!-- <div class="bg"></div> -->
        <div class="top-section">
          <h1 class="title">运单查询</h1>
          <div class="input-group">
            <el-input
              v-model="form.trackingNumber"
              placeholder="请输入快递单号"
              clearable
              style="width: 300px; margin-right: 20px;"
              @input="validateTrackingNumber"
              @keyup.enter="searchPackage"
            ></el-input>
            <el-button @click="searchPackage" type="primary" :loading="loading">查询</el-button>
          </div>
        </div>

        <!-- 选项卡 -->
        <el-tabs v-model="activeTab" type="card" style="margin-top: 20px;" @tab-click="handleTabClick">
          <el-tab-pane label="我寄的" name="sent">
            <el-table v-if="sentPackages.length" :data="sentPackages" style="margin-top: 20px;">
              <el-table-column label="快递单号" prop="trackingNumber"></el-table-column>
              <el-table-column label="包裹名称" prop="packageName"></el-table-column>
              <el-table-column label="寄件人" prop="sender"></el-table-column>
              <el-table-column label="寄件人地址" prop="senderaddress"></el-table-column>
              <el-table-column label="收件人" prop="receiver"></el-table-column>
              <el-table-column label="收件人地址" prop="receiveraddress"></el-table-column>
              <el-table-column label="状态" prop="status">
                <template #default="scope">
                  <span :class="getStatusClass(scope.row.status)">{{ scope.row.status }}</span>
                </template>
              </el-table-column>
              <el-table-column label="最新位置" prop="latestLocation"></el-table-column>
            </el-table>
            <p v-else>暂无数据</p>
          </el-tab-pane>
          <el-tab-pane label="我收的" name="received">
            <el-table v-if="receivedPackages.length" :data="receivedPackages" style="margin-top: 20px;">
              <el-table-column label="快递单号" prop="trackingNumber"></el-table-column>
              <el-table-column label="包裹名称" prop="packageName"></el-table-column>
              <el-table-column label="寄件人地址" prop="senderaddress"></el-table-column>
              <el-table-column label="寄件人" prop="sender"></el-table-column>
              <el-table-column label="收件人地址" prop="receiveraddress"></el-table-column>
              <el-table-column label="收件人" prop="receiver"></el-table-column>
              <el-table-column label="状态" prop="status">
                <template #default="scope">
                  <span :class="getStatusClass(scope.row.status)">{{ scope.row.status }}</span>
                </template>
              </el-table-column>
              <el-table-column label="最新位置" prop="latestLocation"></el-table-column>
            </el-table>
            <p v-else>暂无数据</p>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>

    <el-footer>
      <Footer />
    </el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElInput, ElButton, ElTable, ElTableColumn } from 'element-plus'

// 定义包裹数据的类型
interface Package {
  trackingNumber: string;
  packageName: string;
  sender: string;
  senderaddress: string;
  receiver: string;
  receiveraddress: string;
  status: string;
  latestLocation: string;
}

// 模拟数据
const mockData: Package[] = [
  {
    trackingNumber: '123',
    packageName: '书籍',
    sender: '张帅齐',
    senderaddress: '北京市海淀区',
    receiver: '李四',
    receiveraddress: '上海市浦东新区',
    status: '未签收',
    latestLocation: '北京市海淀区',
  },
  {
    trackingNumber: '456',
    packageName: '衣物',
    sender: '林涛',
    senderaddress: '上海市浦东新区',
    receiver: '李四',
    receiveraddress: '北京市海淀区',
    status: '正在运输',
    latestLocation: '上海市浦东新区',
  },
  {
    trackingNumber: '789',
    packageName: '电子产品',
    sender: '陈子润',
    senderaddress: '北京市海淀区',
    receiver: '李四',
    receiveraddress: '北京市海淀区',
    status: '已签收',
    latestLocation: '北京市海淀区',
  },
  {
    trackingNumber: '011',
    packageName: '书籍',
    sender: '张帅齐',
    senderaddress: '北京市海淀区',
    receiver: '李四',
    receiveraddress: '北京市海淀区',
    status: '已签收',
    latestLocation: '北京市海淀区',
  },
  {
    trackingNumber: '012',
    packageName: '书籍',
    sender: '孙贺贺',
    senderaddress: '北京市海淀区',
    receiver: '李四',
    receiveraddress: '北京市海淀区',
    status: '已签收',
    latestLocation: '北京市海淀区',
  },
  {
    trackingNumber: '013',
    packageName: '书籍',
    sender: '梁佳琪',
    senderaddress: '北京市海淀区',
    receiver: '李四',
    receiveraddress: '北京市海淀区',
    status: '未签收',
    latestLocation: '北京市海淀区',
  }
]

const form = ref({
  trackingNumber: ''
})

const activeTab = ref('sent')

const sentPackages = ref<Package[]>([]) // 初始为空数组
const receivedPackages = ref<Package[]>([]) // 初始为空数组

const error = ref('')
const loading = ref(false)

// 验证快递单号
const validateTrackingNumber = () => {
  if (form.value.trackingNumber && !/^\d+$/.test(form.value.trackingNumber)) {
    error.value = '快递单号只能包含数字'
  } else {
    error.value = ''
  }
}

// 处理选项卡点击事件
const handleTabClick = (tab: any) => {
  // 清空当前的包裹数据
  sentPackages.value = [];
  receivedPackages.value = [];

  if (tab.paneName === 'sent') {
    sentPackages.value = mockData.filter(item => ['123', '456', '789'].includes(item.trackingNumber));
    activeTab.value = 'sent'; // 确保 activeTab 更新
  } else if (tab.paneName === 'received') {
    receivedPackages.value = mockData.filter(item => ['011', '012', '013'].includes(item.trackingNumber));
    activeTab.value = 'received'; // 确保 activeTab 更新
  }
}

// 初始化加载“我寄的”运单数据
const initSentPackages = () => {
  sentPackages.value = mockData.filter(item => ['123', '456', '789'].includes(item.trackingNumber));
}

// 在组件初始化时调用
onMounted(() => {
  initSentPackages();
})

// 查询包裹的函数
const searchPackage = async () => {
  if (!form.value.trackingNumber) {
    ElMessage.error('请输入快递单号')
    return
  }

  if (error.value) {
    ElMessageBox.alert(error.value, '错误', {
      confirmButtonText: '确定',
      type: 'error',
    })
    return
  }

  loading.value = true
  try {
    const result = mockData.find(item => item.trackingNumber === form.value.trackingNumber)
    if (result) {
      ElMessage.success('查询成功')
      // 自动跳转到对应的选项卡
      if (['123', '456', '789'].includes(result.trackingNumber)) {
        activeTab.value = 'sent'
        sentPackages.value = [result] // 只显示查询到的包裹
        receivedPackages.value = [] // 清空收到的包裹
      } else if (['011', '012', '013'].includes(result.trackingNumber)) {
        activeTab.value = 'received'
        receivedPackages.value = [result] // 只显示查询到的包裹
        sentPackages.value = [] // 清空寄出的包裹
      }
    } else {
      ElMessageBox.alert('未找到该快递单号的信息，请确认单号是否正确。', '错误', {
        confirmButtonText: '确定',
        type: 'error',
      })
    }
  } finally {
    loading.value = false
  }
}

// 获取状态的颜色类
const getStatusClass = (status: string) => {
  switch (status) {
    case '已签收':
      return 'status-success';
    case '正在运输':
      return 'status-warning';
    default:
      return 'status-fail';
  }
}
</script>

<style scoped>
/* 将容器设置为 flex 布局，居中对齐 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 从顶部开始排列 */
  padding: 20px;
  /* background: #f5f5f5; */
}

/* 标题样式 */
.title {
  font-size: 32px;
  font-weight: bold;
  color: #0093dd;
  margin-bottom: 20px;
  text-align: center;
  margin-top: 0px; /* 为标题留出导航栏的空间 */
}

/* 顶部区域样式 */
.top-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 600px;
}

/* 输入框和按钮容器 */
.input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.input-group .el-input {
  margin-right: 20px;
  width: 300px;
}

.el-button {
  padding: 10px 20px;
  font-size: 16px;
}

/* 表格样式 */
.el-table {
  width: 100%;
  max-width: 1000px; /* 增加表格的最大宽度 */
  margin-top: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.el-table th,
.el-table td {
  text-align: center;
  padding: 12px 0;
}

.el-table th {
  background: #f0f0f0;
  font-weight: bold;
}

.el-table tr:nth-child(even) {
  background: #f9f9f9;
}

.el-table tr:hover {
  background: #e0e0e0;
}

/* 状态颜色样式 */
.status-success {
  color: green;
}

.status-fail {
  color: rgb(255, 0, 0);
}

.status-warning {
  color: orange;
}

/* 选项卡样式 */
.el-tabs {
  width: 100%;
  max-width: 1000px; /* 增加选项卡的最大宽度 */
  margin-top: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.el-tabs__header {
  margin: 0;
  padding: 0 20px;
  background: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

.el-tabs__nav-wrap::after {
  display: none;
}

.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  color: #333;
  transition: background 0.3s, color 0.3s, border-bottom 0.3s;
  border-bottom: 2px solid transparent; /* 默认情况下没有下划线 */
}

.el-tabs__item.is-active {
  background: #fff;
  color: #409eff;
  border-bottom: 2px solid red !important; /* 激活状态下有红色下划线 */
}

.el-tabs__item:hover {
  background: #e0e0e0;
  color: #409eff;
  border-bottom: 2px solid #f60d0d !important; /* 悬停时有下划线 */
}

/* Element UI 容器样式 */
.el-header {
  padding: 0;
  height: 100;
}

.el-main {
  margin-top: 80px;
  padding: 20px 0;
  overflow: hidden; 
  height: calc(100vh - 200px); /* 调整高度以适应屏幕 */
}

.el-footer {
  margin-top: 0px;
  padding: 20px 0;
  /* background: #333; */
  color: #fff;
  text-align: center;
}
.bg{
	background-image: url('./assets/check-bg.jpg'); /* 替换为你的图片路径 */
	  background-size: cover; /* 覆盖整个元素 */
	  background-position: center; /* 背景图居中 */
	  background-repeat: no-repeat; /* 不重复背景图 */
	  width: 100%; /* 宽度填满整个容器 */
	  height: 100%; /* 高度填满整个容器 */
	  position: absolute; /* 绝对定位 */
	  top: 0;
	  left: 0;
	  z-index: -1; /* 确保背景图在内容下方 */
}
</style>