<template>
  <view class="admin-marketing-coupon">
    <view class="content-body">
      <!-- 搜索过滤栏 -->
      <view class="filter-card border-shadow">
        <view class="filter-row">
          <view class="filter-item item-w">
            <text class="label-txt">优惠券名称:</text>
            <view class="input-wrap">
              <input class="search-input" placeholder="请输入优惠券名称" v-model="filter.name" />
              <text class="count-txt">0/18</text>
            </view>
          </view>
          
          <view class="filter-item item-w">
            <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 item-w">
            <text class="label-txt">是否有效:</text>
            <view class="select-mock">
              <text class="select-val">请选择</text>
              <text class="arrow-down">▼</text>
            </view>
          </view>
        </view>

        <view class="filter-row mt-20">
          <view class="filter-item item-w">
            <text class="label-txt">发放方式:</text>
            <view class="select-mock">
              <text class="select-val">请选择</text>
              <text class="arrow-down">▼</text>
            </view>
          </view>
          
          <view class="btn-query" @click="handleQuery">
            <text class="query-txt">查询</text>
          </view>
        </view>
      </view>

      <!-- 数据展示区域 -->
      <view class="table-card border-shadow">
        <view class="card-header">
          <view class="btn-primary-blue" @click="handleAdd">
            <text class="btn-txt">添加优惠券</text>
          </view>
        </view>

        <!-- 表格主体 -->
        <view class="table-container">
          <view class="table-header-row">
            <view class="th" style="width: 80px;">ID</view>
            <view class="th" style="width: 180px;">优惠券名称</view>
            <view class="th" style="width: 120px;">优惠券类型</view>
            <view class="th" style="width: 100px;">面值</view>
            <view class="th" style="width: 120px;">领取方式</view>
            <view class="th" style="width: 150px;">领取日期</view>
            <view class="th" style="width: 120px;">使用时间</view>
            <view class="th" style="width: 120px;">发布数量</view>
            <view class="th" style="width: 100px;">是否开启</view>
            <view class="th" style="flex: 1; min-width: 220px;">操作</view>
          </view>

          <view class="table-body">
            <view v-for="(item, index) in dataList" :key="item.id" class="table-row">
              <view class="td" style="width: 80px;"><text class="td-txt">{{ item.id }}</text></view>
              <view class="td" style="width: 180px;"><text class="td-txt name-bold">{{ item.name }}</text></view>
              <view class="td" style="width: 120px;"><text class="td-txt">{{ item.type }}</text></view>
              <view class="td" style="width: 100px;"><text class="td-txt price-txt">{{ item.value.toFixed(2) }}</text></view>
              <view class="td" style="width: 120px;"><text class="td-txt">{{ item.receiveType }}</text></view>
              <view class="td" style="width: 150px;">
                <text v-if="item.id === 1628" class="td-txt date-small">2023-10-18 00:00 - 2025-11-05 00:00</text>
                <text v-else class="td-txt">{{ item.receiveDate }}</text>
              </view>
              <view class="td" style="width: 120px;"><text class="td-txt">{{ item.useTime }}</text></view>
              <view class="td" style="width: 120px;">
                <view v-if="item.publishTotal > 0" class="pub-info">
                  <text class="pub-txt">发布: {{ item.publishTotal }}</text>
                  <text class="pub-txt danger">剩余: {{ item.publishRemain }}</text>
                </view>
                <text v-else class="td-txt">不限量</text>
              </view>
              <view class="td" style="width: 100px;">
                <view :class="['switch-box', item.isOpen ? 'active' : '']" @click="toggleStatus(index)">
                  <view class="switch-dot"></view>
                </view>
              </view>
              <view class="td" style="flex: 1; min-width: 220px;">
                <view class="op-links">
                  <text class="op-link">领取记录</text>
                  <text class="op-split">|</text>
                  <text class="op-link">编辑</text>
                  <text class="op-split">|</text>
                  <text class="op-link">复制</text>
                  <text class="op-split">|</text>
                  <text class="op-link text-danger">删除</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 分页 -->
        <view class="pagination-footer">
          <text class="total-txt">共 16 条</text>
          <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">2</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, reactive } from 'vue'

interface CouponItem {
  id: number
  name: string
  type: string
  value: number
  receiveType: string
  receiveDate: string
  useTime: string
  publishTotal: number
  publishRemain: number
  isOpen: boolean
}

const filter = reactive({
  name: ''
})

const dataList = ref<CouponItem[]>([
  { id: 1643, name: '满100减30', type: '通用券', value: 30.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '10天', publishTotal: 0, publishRemain: 0, isOpen: false },
  { id: 1642, name: '满10减7', type: '通用券', value: 7.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '10天', publishTotal: 0, publishRemain: 0, isOpen: true },
  { id: 1641, name: '会员优惠券', type: '通用券', value: 200.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '200天', publishTotal: 0, publishRemain: 0, isOpen: true },
  { id: 1640, name: '会员优惠券', type: '通用券', value: 29.90, receiveType: '用户领取', receiveDate: '不限时', useTime: '200天', publishTotal: 0, publishRemain: 0, isOpen: true },
  { id: 1639, name: '会员优惠券', type: '通用券', value: 1.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '200天', publishTotal: 0, publishRemain: 0, isOpen: true },
  { id: 1638, name: '商品券', type: '商品券', value: 1.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '200天', publishTotal: 0, publishRemain: 0, isOpen: true },
  { id: 1636, name: '测试多个商品消耗一个券', type: '商品券', value: 500.00, receiveType: '系统赠送', receiveDate: '不限时', useTime: '3天', publishTotal: 0, publishRemain: 0, isOpen: true },
  { id: 1635, name: '优惠券', type: '通用券', value: 10.00, receiveType: '系统赠送', receiveDate: '不限时', useTime: '10天', publishTotal: 0, publishRemain: 0, isOpen: true },
  { id: 1634, name: '限时优惠', type: '通用券', value: 20.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '5天', publishTotal: 0, publishRemain: 0, isOpen: true },
  { id: 1633, name: '店庆券', type: '品类券', value: 100.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '10天', publishTotal: 0, publishRemain: 0, isOpen: true },
  { id: 1632, name: '优惠券', type: '品类券', value: 99.00, receiveType: '用户领取', receiveDate: '不限时', useTime: '10天', publishTotal: 8999, publishRemain: 8604, isOpen: true },
  { id: 1628, name: '全场通用券', type: '通用券', value: 9.90, receiveType: '用户领取', receiveDate: 'RANGE', useTime: '不限时', publishTotal: 59999, publishRemain: 59331, isOpen: true }
])

const handleQuery = () => { console.log('Querying...') }
const handleAdd = () => { console.log('Adding coupon...') }
const toggleStatus = (index: number) => { 
  dataList.value[index].isOpen = !dataList.value[index].isOpen 
}
</script>

<style scoped lang="scss">
.admin-marketing-coupon {
  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; }
.filter-row { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 24px; }
.mt-20 { margin-top: 20px; }

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

.label-txt { font-size: 14px; color: #606266; min-width: 80px; text-align: right; }

.input-wrap {
  flex: 1;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
}
.search-input { flex: 1; height: 100%; font-size: 14px; }
.count-txt { font-size: 12px; color: #c0c4cc; }

.select-mock {
  flex: 1;
  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: #c0c4cc; }
.arrow-down { font-size: 10px; color: #c0c4cc; }

.btn-query {
  background-color: #2d8cf0;
  padding: 0 20px;
  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; }
.card-header { padding: 20px; }

.btn-primary-blue {
  background-color: #2d8cf0;
  padding: 8px 16px;
  border-radius: 4px;
  display: inline-flex;
  cursor: pointer;
}
.btn-txt { color: #fff; font-size: 14px; }

.table-container { padding: 0 20px 20px; }
.table-header-row { display: flex; flex-direction: row; background-color: #f8f8f9; border-bottom: 1px solid #e8eaec; }
.th { padding: 12px 10px; font-size: 14px; color: #515a6e; font-weight: bold; }
.table-row { display: flex; flex-direction: row; border-bottom: 1px solid #e8eaec; border-left: 1px solid transparent; }
.table-row:hover { background-color: #ebf7ff; }

.td { padding: 12px 10px; display: flex; align-items: center; }
.td-txt { font-size: 14px; color: #515a6e; }
.name-bold { font-weight: 500; color: #333; }
.price-txt { color: #515a6e; }
.date-small { font-size: 12px; line-height: 1.4; color: #999; }

.pub-info { display: flex; flex-direction: column; }
.pub-txt { font-size: 12px; color: #2d8cf0; }
.pub-txt.danger { color: #ed4014; }

/* Switch 开关 */
.switch-box {
  width: 44px;
  height: 22px;
  background-color: #dcdfe6;
  border-radius: 11px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}
.switch-box.active { background-color: #2d8cf0; }
.switch-dot {
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 9px;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all 0.3s;
}
.switch-box.active .switch-dot { transform: translateX(22px); }

.op-links { display: flex; flex-direction: row; align-items: center; }
.op-link { color: #2d8cf0; font-size: 14px; cursor: pointer; margin: 0 5px; }
.op-split { color: #e8eaec; margin: 0 5px; }
.text-danger { color: #ed4014; }

/* 分页 */
.pagination-footer {
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #f0f0f0;
}
.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; color: #666;
}
.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>

