<template>
  <view class="admin-marketing-integral-order">
    <!-- 顶部状态选项卡 -->
    <view class="status-tabs box-shadow">
      <view v-for="(item, index) in statusOptions" :key="index" 
            :class="['tab-item', currentStatus == item.value ? 'active' : '']"
            @click="currentStatus = item.value">
        <text class="tab-label">{{ item.label }}</text>
        <text class="tab-count">({{ item.count }})</text>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-card box-shadow">
      <view class="filter-row">
        <view class="filter-item">
          <text class="label">订单状态：</text>
          <picker :range="statusOptions" range-key="label" @change="statusChange">
            <view class="picker-value">{{ getStatusLabel(currentStatus) }} <text class="iconfont icon-arrow-down"></text></view>
          </picker>
        </view>
        <view class="filter-item">
          <text class="label">创建时间：</text>
          <view class="date-range-mock">
            <text class="date-text">全部</text>
            <text class="iconfont icon-calendar"></text>
          </view>
        </view>
        <view class="filter-item search-box">
          <input class="admin-input" placeholder="订单号/收货人/电话" v-model="searchQuery" />
          <button class="admin-btn admin-btn-primary search-btn" @click="handleSearch">搜索</button>
          <button class="admin-btn admin-btn-default reset-btn" @click="handleReset">重置</button>
        </view>
      </view>
    </view>

    <!-- 工具栏 -->
    <view class="table-toolbar">
      <button class="admin-btn admin-btn-default">订单导出</button>
    </view>

    <!-- 表格区域 -->
    <view class="table-card box-shadow">
      <view class="table-header">
        <text class="col-200">订单号</text>
        <text class="col-150">用户信息</text>
        <text class="col-250">商品信息</text>
        <text class="col-100">兑换积分</text>
        <text class="col-100">订单状态</text>
        <text class="col-180">下单时间</text>
        <text class="col-120 center">操作</text>
      </view>

      <view class="table-body">
        <view v-for="(item, index) in tableData" :key="index" class="table-row">
          <view class="col-200">
            <text class="order-id-text">{{ item.orderId }}</text>
          </view>
          
          <view class="col-150">
            <text class="user-nickname-uid">{{ item.nickname }}/{{ item.uid }}</text>
          </view>

          <view class="col-250 product-cell">
            <view class="tabBox">
              <image class="tabBox_img" :src="item.image" mode="aspectFill"></image>
              <view class="tabBox_right">
                <text class="tabBox_tit">{{ item.storeName }} | {{ item.sku }}</text>
                <text class="tabBox_pice">积分{{ item.integral }} x {{ item.num }}</text>
              </view>
            </view>
          </view>

          <view class="col-100">
            <text class="integral-val">{{ item.integral }}</text>
          </view>

          <view class="col-100">
            <text class="status-text">{{ getStatusText(item.status) }}</text>
          </view>

          <view class="col-180">
            <text class="time-text">{{ item.addTime }}</text>
          </view>

          <view class="col-120 center ops-cell">
            <text class="op-link" v-if="item.status === 0" @click="handleShip(item)">发送货</text>
            <text class="op-link" @click="handleMore(item)">更多 <text class="iconfont icon-arrow-down" style="font-size: 10px;"></text></text>
          </view>
        </view>
      </view>

      <!-- 分页区域 -->
      <CommonPagination
        v-if="total > 0"
        :total="total"
        :loading="false"
        :currentPage="currentPage"
        :pageSize="currentSize"
        :pageSizeOptionLabels="pageSizeOptionLabels"
        :pageSizeIndex="pageSizeIndex"
        :visiblePages="visiblePages"
        :totalPage="totalPage"
        :jumpPageInput="jumpPageInput"
        @page-size-change="handlePageSizeChange"
        @page-change="handlePageChange"
        @update:jumpPageInput="updateJumpPageInput"
        @jump-page="handleJumpPage"
      />
    </view>
  </view>
</template>

<script uts>
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
export default {
  components: {
    CommonPagination
  },
  data() {
    return {
      currentStatus: -1,
      searchQuery: '',
      total: 8,
      currentPage: 1,
      currentSize: 15,
      jumpPageInput: '',
      statusOptions: [
        { label: '全部', value: -1, count: 8 },
        { label: '待发货', value: 0, count: 6 },
        { label: '待收货', value: 1, count: 1 },
        { label: '待评价', value: 2, count: 0 },
        { label: '已完成', value: 3, count: 1 }
      ] as any[],
      tableData: [
        {
          orderId: 'wx719261472118538240',
          nickname: '故事的小黄花',
          uid: 80674,
          storeName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
          sku: 'L,卡其',
          image: '/static/logo.png',
          integral: 200,
          num: 1,
          status: 0,
          addTime: '2025-11-10 18:48:18'
        },
        {
          orderId: 'wx717772249846775808',
          nickname: '蓝桥春雪',
          uid: 80582,
          storeName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
          sku: 'M,卡其',
          image: '/static/logo.png',
          integral: 200,
          num: 1,
          status: 0,
          addTime: '2025-11-06 16:10:39'
        },
        {
          orderId: 'wx717763196697444352',
          nickname: './',
          uid: 78504,
          storeName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
          sku: 'S,卡其',
          image: '/static/logo.png',
          integral: 200,
          num: 1,
          status: 0,
          addTime: '2025-11-06 15:34:41'
        },
        {
          orderId: 'wx714911802768490496',
          nickname: '177****1167',
          uid: 36391,
          storeName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
          sku: 'XL,卡其',
          image: '/static/logo.png',
          integral: 0,
          num: 1,
          status: 0,
          addTime: '2025-10-29 18:44:16'
        },
        {
          orderId: 'wx665016819706232832',
          nickname: '陈修然',
          uid: 75658,
          storeName: 'MLB官方 男女情侣软顶棒球帽明星同款运动帽遮阳鸭舌帽休闲CP19',
          sku: 'XS,纽约洋基队/绿色',
          image: '/static/logo.png',
          integral: 299,
          num: 1,
          status: 0,
          addTime: '2025-06-14 02:19:25'
        }
      ] as any[]
    }
  },
  computed: {
    pageSizeOptions(): number[] { return [10, 15, 20, 30, 50] },
    pageSizeOptionLabels(): string[] { return (this.pageSizeOptions as number[]).map((n: number) => `${n}条/页`) },
    pageSizeIndex(): number {
      const idx = (this.pageSizeOptions as number[]).indexOf(this.currentSize as number)
      return idx >= 0 ? idx : 0
    },
    totalPage(): number { return Math.max(1, Math.ceil((this.total as number) / (this.currentSize as number))) },
    visiblePages(): number[] {
      const t = this.totalPage as number
      const cur = this.currentPage as number
      if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
      if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
      if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
      return [1, -1, cur - 1, cur, cur + 1, -1, t]
    }
  },
  methods: {
    getStatusLabel(val : number) : string {
      const item = this.statusOptions.find((opt: any) => opt.value === val)
      return item ? item.label : '全部'
    },
    getStatusText(status : number) : string {
      switch(status) {
        case 0: return '未发货';
        case 1: return '待收货';
        case 2: return '待评价';
        case 3: return '已完成';
        default: return '未知';
      }
    },
    handleShip(item: any) {
      uni.showToast({ title: '去发货: ' + item.orderId, icon: 'none' })
    },
    handleMore(item: any) {
      uni.showActionSheet({
        itemList: ['订单详情', '订单记录', '订单备注'],
        success: (res) => {
          uni.showToast({ title: '点击了' + res.tapIndex, icon: 'none' })
        }
      })
    },
    statusChange(e : any) {
      this.currentStatus = this.statusOptions[e.detail.value].value as number
    },
    handleSearch() {
      uni.showToast({ title: '查询', icon: 'none' })
    },
    handleReset() {
      this.searchQuery = ''
      this.currentStatus = -1
    },
    handlePageChange(p: number) { this.currentPage = p as any },
    handlePageSizeChange(e: any) {
      const idx = Number(e.detail.value)
      this.currentSize = ((this.pageSizeOptions as number[])[idx] ?? (this.pageSizeOptions as number[])[0]) as any
      this.currentPage = 1 as any
    },
    handleJumpPage() {
      const p = parseInt(this.jumpPageInput as string)
      if (!isNaN(p) && p >= 1 && p <= (this.totalPage as number)) this.currentPage = p as any
    },
    updateJumpPageInput(val: string) { this.jumpPageInput = val as any }
  }
}
</script>

<style scoped>
.admin-marketing-integral-order {
  padding: 0;
  background-color: transparent;
  min-height: auto;
}

.box-shadow {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  margin-bottom: 16px;
}

/* 顶部状态卡片 */
.status-tabs {
  display: flex;
  flex-direction: row;
  padding: 0 10px;
}
.tab-item {
  padding: 15px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.tab-item.active {
  color: #2d8cf0;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #2d8cf0;
}
.tab-label {
  font-size: 14px;
}
.tab-count {
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.8;
}

/* 筛选卡片 */
.filter-card {
  padding: 20px;
}
.filter-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.filter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 24px;
  margin-bottom: 5px;
}
.label {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}
.date-range-mock {
  width: 280px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}
.date-text { font-size: 13px; color: #c0c4cc; }

.admin-input {
  width: 200px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
}
.search-btn {
  margin-left: 10px;
}

/* 表格区域 */
.table-card {
  overflow: hidden;
}
.table-header {
  display: flex;
  flex-direction: row;
  background-color: #f8f8f9;
  border-bottom: 1px solid #e8eaec;
  padding: 12px 10px;
}
.table-header text {
  font-size: 14px;
  font-weight: bold;
  color: #515a6e;
}
.table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #e8eaec;
  padding: 15px 10px;
}

/* 列宽定义 */
.col-100 { width: 100px; }
.col-120 { width: 120px; }
.col-150 { width: 150px; }
.col-180 { width: 180px; }
.col-200 { width: 200px; }
.col-250 { width: 250px; flex: 1; }
.center { text-align: center; justify-content: center; }

.order-id-text { font-size: 13px; color: #515a6e; }
.user-nickname-uid { font-size: 13px; color: #515a6e; }

/* 商品信息列 */
.product-cell {
  display: flex;
  flex-direction: row;
}
.tabBox {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  margin-right: 8px;
}
.tabBox_right {
  display: flex;
  flex-direction: column;
}
.tabBox_tit {
  font-size: 12px;
  color: #515a6e;
  line-height: 1.4;
}
.tabBox_pice {
  font-size: 12px;
  color: #808695;
  margin-top: 2px;
}

.integral-val { font-size: 13px; color: #515a6e; }
.status-text { font-size: 13px; color: #515a6e; }
.time-text { font-size: 13px; color: #515a6e; }

.ops-cell {
  display: flex;
  flex-direction: row;
}
.op-link {
  font-size: 13px;
  color: #2d8cf0;
  margin: 0 8px;
  cursor: pointer;
}

/* 分页区域已迁至 CommonPagination 组件 */
</style>

