<template>
  <view class="admin-aftersale-order">
    <view class="content-body">
      <!-- 顶部过滤栏 -->
      <view class="filter-card border-shadow">
        <view class="filter-item">
          <text class="label-txt">退款状态:</text>
          <view class="select-mock">
            <text class="select-val">全部</text>
            <text class="arrow-down">▼</text>
          </view>
        </view>
        
        <view class="filter-item">
          <text class="label-txt">退款时间:</text>
          <view class="date-picker-mock">
            <text class="date-txt">开始日期</text>
            <text class="date-split">-</text>
            <text class="date-txt">结束日期</text>
            <text class="calendar-ic">📅</text>
          </view>
        </view>

        <view class="filter-item">
          <text class="label-txt">订单搜索:</text>
          <input class="search-input" placeholder="请输入订单号" v-model="searchQuery" />
        </view>
        
        <view class="btn-query" @click="handleQuery">
          <text class="query-txt">查询</text>
        </view>
      </view>

      <!-- 数据表格区域 -->
      <view class="table-card border-shadow">
        <view class="table-container">
          <view class="table-header-row">
            <view class="th" style="width: 180px;">退款订单号</view>
            <view class="th" style="width: 180px;">原订单号</view>
            <view class="th" style="flex: 1.5;">商品信息</view>
            <view class="th" style="width: 120px;">用户信息</view>
            <view class="th" style="width: 100px;">实际支付</view>
            <view class="th" style="width: 160px;">发起退款时间</view>
            <view class="th" style="width: 100px;">退款状态</view>
            <view class="th" style="width: 100px;">订单状态</view>
            <view class="th" style="width: 150px;">退款信息</view>
            <view class="th" style="width: 100px;">操作</view>
          </view>

          <view class="table-body">
            <view v-for="(item, index) in orderList" :key="item.id" class="table-row">
              <view class="td" style="width: 180px;"><text class="td-txt">{{ item.refundId }}</text></view>
              <view class="td" style="width: 180px;"><text class="td-txt">{{ item.orderId }}</text></view>
              <view class="td" style="flex: 1.5;">
                <view class="product-info">
                  <image class="product-img" :src="item.productImg" mode="aspectFill"></image>
                  <view class="product-detail">
                    <text class="p-name ellipsis-2">{{ item.productName }}</text>
                  </view>
                </view>
              </view>
              <view class="td" style="width: 120px;"><text class="td-txt">{{ item.userInfo }}</text></view>
              <view class="td" style="width: 100px;"><text class="td-txt">{{ item.payPrice.toFixed(2) }}</text></view>
              <view class="td" style="width: 160px;"><text class="td-txt">{{ item.refundTime }}</text></view>
              <view class="td" style="width: 100px;"><text class="td-txt">{{ item.refundStatus }}</text></view>
              <view class="td" style="width: 100px;"><text class="td-txt">{{ item.orderStatus }}</text></view>
              <view class="td" style="width: 150px;"><text class="td-txt">{{ item.refundReason }}</text></view>
              <view class="td" style="width: 100px;">
                <view class="op-more">
                  <text class="op-txt">更多</text>
                  <text class="op-arrow">▼</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 分页 -->
        <view class="pagination-footer">
          <view class="page-total">
            <text class="total-txt">共 {{ total }} 条</text>
          </view>
          <view class="page-select">
            <text class="page-val">15条/页 ▼</text>
          </view>
          <view class="page-btns">
            <text class="p-btn disabled"><</text>
            <text class="p-btn active">1</text>
            <text class="p-btn">></text>
          </view>
          <view class="page-jump">
            <text class="jump-txt">前往</text>
            <input class="jump-input" placeholder="1" />
            <text class="jump-txt">页</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

interface RefundOrder {
  id: number
  refundId: string
  orderId: string
  productImg: string
  productName: string
  userInfo: string
  payPrice: number
  refundTime: string
  refundStatus: string
  orderStatus: string
  refundReason: string
}

const searchQuery = ref('')
const total = ref(11)
const orderList = ref<RefundOrder[]>([
  { 
    id: 1, 
    refundId: '541647750949765120', 
    orderId: 'cp541646979248160768', 
    productImg: '/static/logo.png',
    productName: 'FOMIX 蛋壳椅 进口头层牛皮橙色单人沙发椅Egg chair设计师蛋壳椅 Egg chai...',
    userInfo: '181****3601',
    payPrice: 7580.00,
    refundTime: '2026-02-03 15:54:47',
    refundStatus: '仅退款',
    orderStatus: '未发货',
    refundReason: '其它原因'
  },
  { 
    id: 2, 
    refundId: '541638371601022976', 
    orderId: 'cp541638302298537984', 
    productImg: '/static/logo.png',
    productName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060',
    userInfo: '陌年微凉',
    payPrice: 89.05,
    refundTime: '2026-02-03 15:17:30',
    refundStatus: '仅退款',
    orderStatus: '未发货',
    refundReason: '收货地址填错了'
  },
  { 
    id: 3, 
    refundId: '540965628471672832', 
    orderId: 'cp540873996820807680', 
    productImg: '/static/logo.png',
    productName: '爱奇艺智能 奇遇LT01 投影仪 家用卧室超高清手机便携式投影机 (4K超清 支...',
    userInfo: '隆胜科技',
    payPrice: 1.00,
    refundTime: '2026-02-01 18:44:16',
    refundStatus: '仅退款',
    orderStatus: '未发货',
    refundReason: '收货地址填错了'
  },
  { 
    id: 4, 
    refundId: '5409655559492149248', 
    orderId: 'cp540964778781179904', 
    productImg: '/static/logo.png',
    productName: '广儿穿了就会霹死',
    userInfo: '隆胜科技',
    payPrice: 579.00,
    refundTime: '2026-02-01 18:44:00',
    refundStatus: '仅退款',
    orderStatus: '未发货',
    refundReason: '收货地址填错了'
  },
  { 
    id: 5, 
    refundId: '540965491796082688', 
    orderId: 'cp540964551848361984', 
    productImg: '/static/logo.png',
    productName: 'CHICVEN「摩登工业」科技感反光渐变羽绒服立领面包服外套女冬季',
    userInfo: '隆胜科技',
    payPrice: 900.00,
    refundTime: '2026-02-01 18:43:43',
    refundStatus: '仅退款',
    orderStatus: '未发货',
    refundReason: '收货地址填错了'
  },
  {
    id: 6,
    refundId: '540579611755413504',
    orderId: 'cp537676043612323840',
    productImg: '/static/logo.png',
    productName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060',
    userInfo: '杨咩咩Tel',
    payPrice: 0.00,
    refundTime: '2026-01-31 17:10:22',
    refundStatus: '仅退款',
    orderStatus: '未发货',
    refundReason: '收货地址填错了'
  }
])

const handleQuery = () => { console.log('Querying...') }
</script>

<style scoped lang="scss">
.admin-aftersale-order {
  background-color: #f0f2f5;
  min-height: 100vh;
  padding: 24px;
}

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

.content-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 过滤栏 */
.filter-card {
  padding: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.filter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.label-txt { font-size: 14px; color: #606266; }

.select-mock {
  width: 220px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  cursor: pointer;
}
.select-val { font-size: 14px; color: #606266; }
.arrow-down { font-size: 10px; color: #c0c4cc; }

.date-picker-mock {
  width: 240px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
}
.date-txt { font-size: 14px; color: #c0c4cc; }
.date-split { color: #dcdfe6; }
.calendar-ic { font-size: 14px; color: #c0c4cc; margin-left: auto; }

.search-input {
  width: 260px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 14px;
}

.btn-query {
  background-color: #2d8cf0;
  padding: 0 24px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
}
.query-txt { color: #fff; font-size: 14px; }

/* 表格区域 */
.table-card {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.table-container { 
  display: flex;
  flex-direction: column;
  min-width: 1400px;
}

.table-header-row {
  display: flex;
  flex-direction: row;
  background-color: #f8f8f9;
  border-bottom: 1px solid #e8eaec;
}

.th {
  padding: 15px 10px;
  font-size: 14px;
  color: #515a6e;
  font-weight: bold;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e8eaec;
}

.table-row:hover {
  background-color: #ebf7ff;
}

.td {
  padding: 12px 10px;
  display: flex;
  align-items: center;
}

.td-txt { font-size: 14px; color: #515a6e; }

/* 商品信息列 */
.product-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.product-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: #f5f5f5;
  flex-shrink: 0;
}
.product-detail {
  flex: 1;
}
.p-name {
  font-size: 12px;
  color: #515a6e;
  line-height: 1.4;
}
.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 操作列 */
.op-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  color: #2d8cf0;
  cursor: pointer;
}
.op-txt { font-size: 14px; }
.op-arrow { font-size: 10px; }

/* 分页 */
.pagination-footer {
  padding: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.total-txt { font-size: 14px; color: #606266; }
.page-val { font-size: 14px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
.page-btns { display: flex; flex-direction: row; gap: 8px; }
.p-btn { 
  width: 32px; 
  height: 32px; 
  border: 1px solid #dcdfe6; 
  border-radius: 4px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 14px;
}
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; }

.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.jump-txt { font-size: 14px; color: #606266; }
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
</style>


