<template>
  <view class="admin-marketing-integral-record">
    <!-- 筛选 -->
    <view class="box-shadow filter-card">
      <view class="filter-row">
        <view class="filter-item">
          <text class="label">时间选择：</text>
          <view class="date-range-mock">
            <text class="date-text">全部</text>
            <text class="iconfont icon-calendar" style="font-size: 16px; color: #c0c4cc;"></text>
          </view>
        </view>
        <view class="filter-item">
          <text class="label">交易类型：</text>
          <picker mode="selector" :range="typeOptions" range-key="label" @change="typeChange">
            <view class="admin-input-picker">
              <text>{{ typeLabel }}</text>
              <text class="iconfont icon-arrow-down" style="font-size: 14px; color: #c0c4cc;"></text>
            </view>
          </picker>
        </view>
        <view class="filter-item">
          <text class="label">搜索：</text>
          <input class="admin-input" v-model="searchQuery" placeholder="请输入昵称" />
          <button class="search-btn btn-primary" @click="handleSearch">搜索</button>
          <button class="reset-btn btn-default" @click="handleReset">重置</button>
        </view>
      </view>
    </view>

    <!-- 表格 -->
    <view class="box-shadow table-card">
      <view class="table-header">
        <view class="col-80"><text>ID</text></view>
        <view class="col-150"><text>关联订单</text></view>
        <view class="col-150"><text>交易时间</text></view>
        <view class="col-100"><text>交易积分</text></view>
        <view class="col-120"><text>用户</text></view>
        <view class="col-120"><text>交易类型</text></view>
        <view class="col-150"><text>备注</text></view>
        <view class="col-100"><text>备注</text></view>
      </view>
      <view class="table-content">
        <view v-for="(item, index) in tableData" :key="index" class="table-row">
          <view class="col-80"><text class="cell-text">{{ item.id }}</text></view>
          <view class="col-150"><text class="cell-link">{{ item.relation || '-' }}</text></view>
          <view class="col-150"><text class="cell-text">{{ item.add_time }}</text></view>
          <view class="col-100">
            <text :class="item.pm == 1 ? 'z-price' : 'f-price'">{{ item.pm == 1 ? '+' : '-' }} {{ item.number }}</text>
          </view>
          <view class="col-120"><text class="cell-text">{{ item.nickname }}</text></view>
          <view class="col-120"><text class="cell-text">{{ item.type_name }}</text></view>
          <view class="col-150"><text class="cell-text mark-text">{{ item.mark }}</text></view>
          <view class="col-100">
            <text class="op-link" @click="handleMark(item)">修改备注</text>
          </view>
        </view>
      </view>
      
      <!-- 分页 -->
      <view class="table-pagination">
        <text class="total-text">共 {{ total }} 条</text>
        <view class="page-ops">
          <button class="page-btn" disabled>上一页</button>
          <text class="current-page">1</text>
          <button class="page-btn">下一页</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script uts>
export default {
  data() {
    return {
      searchQuery: '',
      currentType: '',
      typeOptions: [
        { label: '全部', value: '' },
        { label: '积分订单', value: 'integral_order' },
        { label: '签到奖励', value: 'sign' },
        { label: '后台充值', value: 'system' }
      ] as any[],
      total: 5,
      tableData: [
        {
          id: 1256,
          relation: '',
          add_time: '2025-11-12 09:30',
          number: 10,
          pm: 1,
          nickname: '故事的小黄花',
          type_name: '签到奖励',
          mark: '连续签到3天奖励'
        },
        {
          id: 1255,
          relation: 'wx719261472118538240',
          add_time: '2025-11-10 18:48',
          number: 200,
          pm: 0,
          nickname: '故事的小黄花',
          type_name: '积分兑换',
          mark: '兑换商品扣除'
        },
        {
          id: 1254,
          relation: '',
          add_time: '2025-11-05 14:20',
          number: 1000,
          pm: 1,
          nickname: '蓝桥春雪',
          type_name: '后台充值',
          mark: '管理员手动充值'
        }
      ] as any[]
    }
  },
  computed: {
    typeLabel(): string {
      const found = this.typeOptions.find((o: any): boolean => o.value == this.currentType)
      return found != null ? (found['label'] as string) : '全部'
    }
  },
  methods: {
    typeChange(e: any) {
      this.currentType = this.typeOptions[e.detail.value].value as string
    },
    handleSearch() {
      uni.showToast({ title: '搜索: ' + this.searchQuery, icon: 'none' })
    },
    handleReset() {
      this.searchQuery = ''
      this.currentType = ''
    },
    handleMark(item: any) {
      uni.showToast({ title: '修改备注: ' + item.id, icon: 'none' })
    }
  }
}
</script>

<style scoped>
.admin-marketing-integral-record {
  padding: 16px;
  background-color: #f5f7f9;
  min-height: 100vh;
}

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

.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: 200px;
  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-picker {
  width: 150px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.admin-input-picker text { font-size: 14px; color: #606266; }

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

.search-btn, .reset-btn {
  margin-left: 10px;
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 4px;
}
.btn-primary { background-color: #2d8cf0; color: #fff; border: none; }
.btn-default { background-color: #fff; color: #606266; border: 1px solid #dcdfe6; }

/* 表格 */
.table-card {
  overflow-x: auto;
}
.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-80 { width: 80px; }
.col-100 { width: 100px; }
.col-120 { width: 120px; }
.col-150 { width: 150px; }
.col-180 { width: 180px; }

.cell-text { font-size: 13px; color: #515a6e; }
.cell-link { font-size: 13px; color: #2d8cf0; }
.mark-text { color: #808695; }

.z-price { font-size: 14px; color: #19be6b; font-weight: bold; }
.f-price { font-size: 14px; color: #ed4014; font-weight: bold; }

.op-link {
  font-size: 13px;
  color: #2d8cf0;
  cursor: pointer;
}

/* 分页 */
.table-pagination {
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.total-text { font-size: 14px; color: #515a6e; margin-right: 15px; }

.page-ops {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.page-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  background: #fff;
  margin: 0;
}
.current-page {
  padding: 0 12px;
  font-size: 14px;
  color: #2d8cf0;
}
</style>


