<template>
  <view class="marketing-combination-product">
    <view class="page-header">
      <view class="header-left">
        <text class="page-title">拼团商品</text>
        <view class="breadcrumb">
          <text class="bread-item">营销</text>
          <text class="bread-sep">/</text>
          <text class="bread-item">拼团管理</text>
          <text class="bread-sep">/</text>
          <text class="bread-item active">拼团商品</text>
        </view>
      </view>
    </view>

    <view class="filter-card border-shadow">
      <view class="filter-row">
        <view class="filter-item">
          <text class="label">上架状态：</text>
          <view class="select-mock">
            <text class="select-val">{{ statusFilterLabel }}</text>
            <text class="arrow">▼</text>
          </view>
        </view>
        <view class="filter-item">
          <text class="label">拼团搜索：</text>
          <input class="search-input" v-model="keyword" placeholder="请输入拼团名称/ID" />
        </view>
        <view class="btn-query" @click="applySearch">
          <text class="query-txt">查询</text>
        </view>
      </view>
    </view>

    <view class="table-card border-shadow">
      <view class="card-header">
        <view class="btn-primary" @click="handleAdd">
          <text class="btn-txt">+ 添加拼团商品</text>
        </view>
        <view class="btn-outline" @click="handleExport">
          <text class="outline-txt">导出</text>
        </view>
      </view>

      <view class="table-container">
        <view class="table-head">
          <view class="th cell-id">ID</view>
          <view class="th cell-img">拼团图片</view>
          <view class="th cell-title">拼团名称</view>
          <view class="th cell-price">原价</view>
          <view class="th cell-price">拼团价</view>
          <view class="th cell-num">拼团人数</view>
          <view class="th cell-num">参与人数</view>
          <view class="th cell-num">成团数量</view>
          <view class="th cell-num">限量</view>
          <view class="th cell-num">限量剩余</view>
          <view class="th cell-status">活动状态</view>
          <view class="th cell-time">活动时间</view>
          <view class="th cell-show">上架状态</view>
          <view class="th cell-ops">操作</view>
        </view>

        <view class="table-body">
          <view v-for="item in list" :key="item.id" class="table-row">
            <view class="td cell-id"><text class="td-txt">{{ item.id }}</text></view>
            <view class="td cell-img">
              <image class="product-thumb" :src="item.image" mode="aspectFill"></image>
            </view>
            <view class="td cell-title">
              <text class="title-txt line-clamp-2">{{ item.title }}</text>
            </view>
            <view class="td cell-price"><text class="td-txt">{{ item.ot_price }}</text></view>
            <view class="td cell-price"><text class="td-txt-price">{{ item.price }}</text></view>
            <view class="td cell-num"><text class="td-txt">{{ item.people }}</text></view>
            <view class="td cell-num"><text class="td-txt">{{ item.joined }}</text></view>
            <view class="td cell-num"><text class="td-txt">{{ item.pink_count }}</text></view>
            <view class="td cell-num"><text class="td-txt">{{ item.quota_show }}</text></view>
            <view class="td cell-num"><text class="td-txt">{{ item.quota }}</text></view>
            <view class="td cell-status">
              <view :class="['status-tag', item.activity_status]">
                <text class="tag-txt">{{ item.activity_status_name }}</text>
              </view>
            </view>
            <view class="td cell-time">
              <view class="time-box">
                <text class="time-txt">开始:{{ item.start_time }}</text>
                <text class="time-txt">结束:{{ item.stop_time }}</text>
              </view>
            </view>
            <view class="td cell-show">
              <view :class="['switch-box', item.is_show ? 'active' : '']" @click="toggleShow(item)">
                <view class="switch-dot"></view>
              </view>
            </view>
            <view class="td cell-ops">
              <view class="op-links">
                <text class="op-link" @click="handleEdit(item)">编辑</text>
                <text class="op-split">|</text>
                <text class="op-link" @click="handleCopy(item)">复制</text>
                <text class="op-split">|</text>
                <text class="op-link text-danger" @click="handleDelete(item)">删除</text>
                <text class="op-split">|</text>
                <text class="op-link" @click="handleStats(item)">统计</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"><</text>
          <text class="p-btn active">1</text>
          <text class="p-btn">></text>
        </view>
      </view>
    </view>
  </view>
</template>

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

interface CombinationProduct {
  id: number
  image: string
  title: string
  ot_price: string
  price: string
  people: number
  joined: number
  pink_count: number
  quota_show: number
  quota: number
  activity_status: string
  activity_status_name: string
  start_time: string
  stop_time: string
  is_show: boolean
}

const keyword = ref('')
const statusFilter = ref('all')
const total = ref(3)

const list = ref<CombinationProduct[]>([
  {
    id: 191,
    image: 'https://img12.360buyimg.com/n1/jfs/t1/185449/19/11995/4379/60d96d27E6a877c8e/3c38d4e92a2a7a5a.jpg',
    title: 'FOMIX 蛋壳椅 进口头层牛皮自然色单人沙发椅 Egg chair设计师蛋椅',
    ot_price: '7999.00',
    price: '999.00',
    people: 48,
    joined: 52,
    pink_count: 4,
    quota_show: 198,
    quota: 134,
    activity_status: 'ongoing',
    activity_status_name: '进行中',
    start_time: '2025-07-01 00:00',
    stop_time: '2025-08-23 23:59',
    is_show: true
  },
  {
    id: 190,
    image: 'https://img14.360buyimg.com/n1/jfs/t1/172605/32/17036/114175/609a473eE6997455c/df82c6168e36712b.jpg',
    title: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤UWG440060',
    ot_price: '0.00',
    price: '99.00',
    people: 20,
    joined: 22,
    pink_count: 2,
    quota_show: 136,
    quota: 112,
    activity_status: 'ongoing',
    activity_status_name: '进行中',
    start_time: '2025-07-01 00:00',
    stop_time: '2027-09-30 23:59',
    is_show: true
  },
  {
    id: 192,
    image: 'https://img13.360buyimg.com/n1/jfs/t1/192173/5/11913/21447/60e57e95Ef82688f3/bc875f643e8c95a3.jpg',
    title: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270',
    ot_price: '200.00',
    price: '77.00',
    people: 18,
    joined: 20,
    pink_count: 2,
    quota_show: 77,
    quota: 54,
    activity_status: 'ongoing',
    activity_status_name: '进行中',
    start_time: '2025-07-01 00:00',
    stop_time: '2028-08-17 23:59',
    is_show: true
  }
])

const statusFilterLabel = computed(() => '全部')

const applySearch = () => { console.log('Searching...') }
const handleAdd = () => {
  uni.navigateTo({
    url: '/pages/mall/admin/marketing/combination/create'
  })
}
const handleExport = () => { console.log('Exporting...') }
const handleEdit = (item: CombinationProduct) => { console.log('Editing...', item.id) }
const handleCopy = (item: CombinationProduct) => { console.log('Copying...', item.id) }
const handleDelete = (item: CombinationProduct) => { console.log('Deleting...', item.id) }
const handleStats = (item: CombinationProduct) => { console.log('Stats...', item.id) }
const toggleShow = (item: CombinationProduct) => {
  item.is_show = !item.is_show
}
</script>

<style scoped lang="scss">
.marketing-combination-product {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

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

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.breadcrumb {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.bread-item { font-size: 13px; color: #606266; }
.bread-sep { font-size: 13px; color: #c0c4cc; margin: 0 8px; }
.bread-item.active { color: #909399; }

.filter-card {
  padding: 20px;
  margin-bottom: 20px;
}

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

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

.label { font-size: 14px; color: #606266; white-space: nowrap; }

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

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

.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 {
}

.card-header {
  padding: 20px;
  display: flex;
  flex-direction: row;
  gap: 12px;
}

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

.btn-outline {
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
}
.outline-txt { color: #606266; font-size: 14px; }

.table-container {
  padding: 0 20px 20px;
}

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

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

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

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

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

/* 列宽分配 */
.cell-id { width: 60px; }
.cell-img { width: 90px; }
.cell-title { flex: 1; min-width: 200px; }
.cell-price { width: 100px; }
.cell-num { width: 80px; }
.cell-status { width: 100px; }
.cell-time { width: 220px; }
.cell-show { width: 120px; }
.cell-ops { width: 220px; justify-content: flex-end; }

.product-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.title-txt { font-size: 13px; color: #333; line-height: 1.5; }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #ecf5ff;
}
.status-tag.ongoing { background-color: #ecf5ff; }
.tag-txt { font-size: 12px; color: #409eff; }

.time-box {
  display: flex;
  flex-direction: column;
}
.time-txt { font-size: 12px; color: #909399; }

/* Switch */
.switch-box {
  width: 44px;
  height: 22px;
  background-color: #dcdfe6;
  border-radius: 11px;
  position: relative;
  transition: background-color 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: transform 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: 13px; 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;
}
.total-txt { font-size: 13px; color: #606266; }
.page-val { font-size: 13px; 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 #e8eaec; 
  border-radius: 4px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 13px;
  color: #666;
}
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
</style>
