<template>
  <view class="admin-page">
    <view class="admin-sections">
      <!-- 筛选区域 -->
      <view class="admin-card filter-card">
        <view class="filter-row">
        <view class="filter-item">
          <text class="label">订单类型：</text>
          <view class="mock-select">
            <text>全部订单</text>
            <view class="arrow-down"></view>
          </view>
        </view>
        <view class="filter-item">
          <text class="label">支付方式：</text>
          <view class="mock-select">
            <text>全部</text>
            <view class="arrow-down"></view>
          </view>
        </view>
        <view class="filter-item long">
          <text class="label">创建时间：</text>
          <view class="mock-date-range">
            <image class="cal-icon" src="/static/icons/calendar.png" mode="aspectFit" />
            <text class="placeholder">开始日期  -  结束日期</text>
          </view>
        </view>
        <view class="filter-item search">
          <text class="label">订单搜索：</text>
          <view class="search-group">
            <view class="search-select">
              <text>全部</text>
              <view class="arrow-down"></view>
            </view>
            <input class="search-input" placeholder="请输入" />
          </view>
        </view>
      </view>
      <view class="btn-row">
        <button class="btn btn-primary">查询</button>
        <button class="btn btn-default">重置</button>
      </view>
    </view>

    <!-- 列表数据区域 -->
    <view class="admin-card content-card">
      <!-- 状态 Tabs -->
      <view class="status-tabs">
        <view 
          v-for="(tab, index) in statusTabs" 
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="activeTab = index"
        >
          <text class="tab-text">{{ tab.name }}</text>
          <text v-if="tab.count" class="tab-count">({{ tab.count }})</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-bar">
        <button class="action-btn btn-blue">订单核销</button>
        <button class="action-btn btn-outline">批量发货</button>
        <button class="action-btn btn-outline">批量删除</button>
        <button class="action-btn btn-outline">订单导出</button>
      </view>

      <!-- 数据表格 -->
      <view class="order-table">
        <view class="thead">
          <view class="th col-check">
            <checkbox :checked="false" color="#1890ff" />
          </view>
          <view class="th col-order">订单号 | 类型</view>
          <view class="th col-product">商品信息</view>
          <view class="th col-user">用户信息</view>
          <view class="th col-price">实际支付</view>
          <view class="th col-pay">支付方式</view>
          <view class="th col-time">支付时间</view>
          <view class="th col-status">订单状态</view>
          <view class="th col-op">操作</view>
        </view>
        
        <view class="tbody">
          <view v-for="(item, index) in orderData" :key="index" class="tr">
            <view class="td col-check">
              <checkbox :checked="false" color="#1890ff" />
            </view>
            <!-- 订单号|类型 -->
            <view class="td col-order">
              <text class="order-sn">{{ item.sn }}</text>
              <text class="order-type" :class="item.typeColor">[{{ item.typeName }}]</text>
              <text v-if="item.cancelStatus" class="cancel-text">{{ item.cancelStatus }}</text>
            </view>
            <!-- 商品信息 -->
            <view class="td col-product">
              <view class="product-info-wrap">
                <image class="p-img" :src="item.product.img" mode="aspectFill" />
                <text class="p-name">{{ item.product.name }}</text>
              </view>
            </view>
            <!-- 用户信息 -->
            <view class="td col-user">
              <text class="u-info">{{ item.user.phone }} | {{ item.user.id }}</text>
            </view>
            <!-- 实际支付 -->
            <view class="td col-price">
              <text class="price-val">{{ item.actualPrice }}</text>
            </view>
            <!-- 支付方式 -->
            <view class="td col-pay">
              <text class="pay-text">{{ item.payMethod }}</text>
            </view>
            <!-- 支付时间 -->
            <view class="td col-time">
              <text class="time-text">{{ item.payTime }}</text>
            </view>
            <!-- 订单状态 -->
            <view class="td col-status">
              <text class="status-text">{{ item.statusName }}</text>
            </view>
            <!-- 操作 -->
            <view class="td col-op">
              <view class="op-links">
                <text class="op-link primary" v-if="item.primaryAction">{{ item.primaryAction }}</text>
                <view class="op-link-more">
                  <text class="more-text">更多</text>
                  <view class="arrow-down-blue"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const activeTab = ref(2) // 默认选中待发货或待核销（手动对齐截图）

const statusTabs = [
  { name: '全部', count: null },
  { name: '待支付', count: 793 },
  { name: '待发货', count: 3695 },
  { name: '待核销', count: null },
  { name: '待收货', count: null },
  { name: '待评价', count: null },
  { name: '已完成', count: null },
  { name: '已退款', count: null },
  { name: '已删除', count: null }
]

const orderData = ref([
  {
    sn: 'cp541336970228400128',
    typeName: '秒杀订单',
    typeColor: 'blue',
    cancelStatus: '用户已取消',
    product: {
      img: '/static/logo.png',
      name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
    },
    user: { phone: '188****4074', id: '82694' },
    actualPrice: '未支付',
    payMethod: '--',
    payTime: '--',
    statusName: '未支付',
    primaryAction: ''
  },
  {
    sn: 'cp541289248708362240',
    typeName: '核销订单',
    typeColor: 'purple',
    cancelStatus: '',
    product: {
      img: '/static/logo.png',
      name: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇墨水...'
    },
    user: { phone: '你就给', id: '82703' },
    actualPrice: '90.1',
    payMethod: '余额支付',
    payTime: '2026-02-02 16:10:17',
    statusName: '未核销',
    primaryAction: '立即核销'
  },
  {
    sn: 'cp541268226856714240',
    typeName: '普通订单',
    typeColor: 'green',
    cancelStatus: '',
    product: {
      img: '/static/logo.png',
      name: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060'
    },
    user: { phone: '王毅不睡了', id: '82689' },
    actualPrice: '未支付',
    payMethod: '--',
    payTime: '--',
    statusName: '未支付',
    primaryAction: '编辑'
  },
  {
    sn: 'cp541262080745930752',
    typeName: '秒杀订单',
    typeColor: 'blue',
    cancelStatus: '',
    product: {
      img: '/static/logo.png',
      name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
    },
    user: { phone: '177****8361', id: '82697' },
    actualPrice: '未支付',
    payMethod: '--',
    payTime: '--',
    statusName: '未支付',
    primaryAction: '编辑'
  }
])
</script>

<style scoped lang="scss">
.filter-card {
}

.filter-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
}

.filter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  
  .label {
    font-size: 14px;
    color: #333;
    width: 70px;
  }
}

.mock-select {
  width: 160px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text { font-size: 14px; color: #595959; }
}

.mock-date-range {
  width: 240px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 0 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  .cal-icon { width: 14px; height: 14px; margin-right: 8px; opacity: 0.4; }
  .placeholder { font-size: 14px; color: #bfbfbf; }
}

.search-group {
  display: flex;
  flex-direction: row;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  height: 32px;
  overflow: hidden;
}

.search-select {
  width: 80px;
  border-right: 1px solid #d9d9d9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: #fafafa;
  text { font-size: 14px; color: #595959; }
}

.search-input {
  flex: 1;
  border: none;
  padding: 0 12px;
  font-size: 14px;
  width: 120px;
}

.arrow-down {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #bfbfbf;
}

.btn-row {
  margin-top: 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.btn {
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.btn-primary { background-color: #1890ff; color: #fff; border: none; }
.btn-default { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }

.content-card {
}

.status-tabs {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 16px;
}

.tab-item {
  padding: 16px 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 2px;
  
  .tab-text { font-size: 14px; color: #595959; }
  .tab-count { font-size: 14px; color: #595959; }
  
  &.active {
    .tab-text, .tab-count { color: #1890ff; font-weight: 500; }
    &::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #1890ff;
    }
  }
}

.action-bar {
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.action-btn {
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 4px;
  margin: 0;
  display: flex;
  align-items: center;
}

.btn-blue { background-color: #1890ff; color: #fff; border: none; }
.btn-outline { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }

/* 表格样式 */
.order-table {
  width: 100%;
  overflow-x: auto;
}

.thead {
  display: flex;
  flex-direction: row;
  background-color: #f0f7ff;
  min-width: 1200px;
}

.th {
  padding: 12px 8px;
  font-size: 14px;
  color: #595959;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.tr {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
  min-width: 1200px;
  &:hover { background-color: #fafafa; }
}

.td {
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 列宽控制 */
.col-check { width: 50px; justify-content: center; align-items: center; }
.col-order { width: 220px; }
.col-product { flex: 1; }
.col-user { width: 160px; }
.col-price { width: 100px; }
.col-pay { width: 100px; }
.col-time { width: 160px; }
.col-status { width: 100px; }
.col-op { width: 120px; }

/* 单元格具体内容样式 */
.order-sn { font-size: 13px; color: #262626; margin-bottom: 4px; }
.order-type { font-size: 12px; }
.blue { color: #1890ff; }
.purple { color: #722ed1; }
.green { color: #52c41a; }
.cancel-text { font-size: 12px; color: #ff4d4f; margin-top: 4px; }

.product-info-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.p-img { width: 44px; height: 44px; border-radius: 4px; background-color: #f5f5f5; flex-shrink: 0; }
.p-name { font-size: 13px; color: #595959; line-height: 1.5; }

.u-info { font-size: 13px; color: #595959; }
.price-val { font-size: 14px; color: #262626; }
.pay-text, .time-text, .status-text { font-size: 13px; color: #595959; }

.op-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.op-link { font-size: 13px; cursor: pointer; }
.primary { color: #1890ff; }

.op-link-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.more-text { font-size: 13px; color: #1890ff; }
.arrow-down-blue {
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #1890ff;
}
</style>
