<template>
  <view class="container">
    <view class="card filters">
      <view class="row sc">
        <view
          v-for="s in tabs"
          :key="s.value"
          class="chip"
          :class="{ on: s.value === active }"
          hover-class="none"
          @tap="setActive(s.value)"
        >
          {{ s.label }}
        </view>
      </view>
    </view>

    <view class="list">
      <view v-for="o in viewList" :key="o.id" class="card item" @tap="open(o.id)">
        <view class="row between">
          <view class="n">{{ o.projectName }}</view>
          <view
            class="st"
            :class="{
              w: o.uiStatus === '待到店',
              g: o.uiStatus === '已完成',
              d: o.uiStatus === '已取消',
              x: o.uiStatus === '已过期'
            }"
          >
            {{ o.uiStatus }}
          </view>
        </view>
        <view class="muted meta">{{ o.appointmentDate }} {{ o.appointmentSlot }} · {{ o.technicianName }}</view>

        <view class="ops row" v-if="o.uiStatus === '待到店'">
          <view class="op" @tap.stop="reschedule(o)">改约</view>
          <view class="op danger" @tap.stop="cancel(o)">取消预约</view>
        </view>
      </view>
    </view>

    <AiFloat />
  </view>
</template>

<script>
import AiFloat from '@/components/AiFloat.vue'

export default {
  components: { AiFloat },
  data() {
    const rows = [
      {
        id: 'apt_demo_pending_001',
        createdAt: Date.now() - 2 * 60 * 60 * 1000,
        status: '待核销',
        uiStatus: '待到店',
        group: 'pending',
        amount: 238,
        projectId: 'p3',
        projectName: '补水修护屏障护理',
        durationMin: 80,
        orderType: 'booking',
        appointmentDate: '2026-06-22',
        appointmentSlot: '10:30',
        technicianName: '许言',
        note: '想要舒缓泛红',
        verifyCode: 'VCAP20260621001'
      },
      {
        id: 'apt_demo_pending_002',
        createdAt: Date.now() - 6 * 60 * 60 * 1000,
        status: '待核销',
        uiStatus: '待到店',
        group: 'pending',
        amount: 188,
        projectId: 'p4',
        projectName: '肩颈舒缓筋膜放松',
        durationMin: 60,
        orderType: 'booking',
        appointmentDate: '2026-06-24',
        appointmentSlot: '19:00',
        technicianName: '周晴',
        note: '',
        verifyCode: 'VCAP20260621002'
      },
      {
        id: 'apt_demo_done_001',
        createdAt: Date.now() - 9 * 24 * 60 * 60 * 1000,
        status: '已完成',
        uiStatus: '已完成',
        group: 'done',
        amount: 168,
        projectId: 'p2',
        projectName: '深层清洁黑头管理',
        durationMin: 75,
        orderType: 'booking',
        appointmentDate: '2026-06-12',
        appointmentSlot: '15:00',
        technicianName: '林安',
        note: 'T区出油严重',
        verifyCode: 'VCAP20260621003'
      },
      {
        id: 'apt_demo_done_002',
        createdAt: Date.now() - 15 * 24 * 60 * 60 * 1000,
        status: '已完成',
        uiStatus: '已完成',
        group: 'done',
        amount: 99,
        projectId: 'p1',
        projectName: '水氧净透体验',
        durationMin: 60,
        orderType: 'booking',
        appointmentDate: '2026-06-06',
        appointmentSlot: '11:30',
        technicianName: '系统分配',
        note: '',
        verifyCode: 'VCAP20260621004'
      },
      {
        id: 'apt_demo_canceled_001',
        createdAt: Date.now() - 3 * 24 * 60 * 60 * 1000,
        status: '已取消',
        uiStatus: '已取消',
        group: 'canceled',
        amount: 238,
        projectId: 'p3',
        projectName: '补水修护屏障护理',
        durationMin: 80,
        orderType: 'booking',
        appointmentDate: '2026-06-23',
        appointmentSlot: '16:00',
        technicianName: '许言',
        note: '',
        verifyCode: 'VCAP20260621005'
      },
      {
        id: 'apt_demo_canceled_002',
        createdAt: Date.now() - 7 * 24 * 60 * 60 * 1000,
        status: '已取消',
        uiStatus: '已取消',
        group: 'canceled',
        amount: 188,
        projectId: 'p4',
        projectName: '肩颈舒缓筋膜放松',
        durationMin: 60,
        orderType: 'booking',
        appointmentDate: '2026-06-17',
        appointmentSlot: '13:30',
        technicianName: '周晴',
        note: '',
        verifyCode: 'VCAP20260621008'
      },
      {
        id: 'apt_demo_expired_001',
        createdAt: Date.now() - 26 * 60 * 60 * 1000,
        status: '待核销',
        uiStatus: '已过期',
        group: 'expired',
        amount: 188,
        projectId: 'p4',
        projectName: '肩颈舒缓筋膜放松',
        durationMin: 60,
        orderType: 'booking',
        appointmentDate: '2026-06-20',
        appointmentSlot: '13:30',
        technicianName: '周晴',
        note: '',
        verifyCode: 'VCAP20260621006'
      },
      {
        id: 'apt_demo_expired_002',
        createdAt: Date.now() - 4 * 24 * 60 * 60 * 1000,
        status: '待核销',
        uiStatus: '已过期',
        group: 'expired',
        amount: 99,
        projectId: 'p1',
        projectName: '水氧净透体验',
        durationMin: 60,
        orderType: 'booking',
        appointmentDate: '2026-06-19',
        appointmentSlot: '18:00',
        technicianName: '系统分配',
        note: '',
        verifyCode: 'VCAP20260621007'
      }
    ]

    return {
      tabs: [
        { value: 'pending', label: '待到店' },
        { value: 'done', label: '已完成' },
        { value: 'canceled', label: '已取消' },
        { value: 'expired', label: '已过期' }
      ],
      active: 'pending',
      rows,
      viewList: rows.filter((x) => x.group === 'pending')
    }
  },
  onLoad() {
    this.apply()
  },
  onShow() {
    this.apply()
  },
  methods: {
    apply() {
      const v = this.rows.filter((x) => x.group === this.active)
      this.viewList = v && v.length ? v : this.rows.slice(0, 3)
    },
    setActive(v) {
      if (!v || v === this.active) return
      this.active = v
      this.apply()
    },
    open(id) {
      const o = this.rows.find((x) => x.id === id) || this.rows[0]
      const payload = encodeURIComponent(JSON.stringify(o))
      uni.navigateTo({ url: `/pages/orders/detail?payload=${payload}` })
    },
    goProjects() {
      uni.switchTab({ url: '/pages/projects/list' })
    },
    reschedule(o) {
      uni.navigateTo({ url: `/pages/booking/create?projectId=${o.projectId}` })
    },
    cancel(o) {
      uni.showModal({
        title: '确认取消',
        content: '取消后该预约将变更为已取消（原型演示）。',
        success: (res) => {
          if (!res.confirm) return
          this.rows = this.rows.map((x) => (x.id === o.id ? { ...x, status: '已取消', uiStatus: '已取消', group: 'canceled' } : x))
          this.apply()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.filters {
  padding: 16rpx;
}
.sc {
  white-space: nowrap;
}
.chip {
  padding: 14rpx 18rpx;
  margin-right: 12rpx;
  border-radius: 999rpx;
  font-size: 26rpx;
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
  flex: 0 0 auto;
}
.on {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}
.list {
  margin-top: 18rpx;
}
.item {
  padding: 22rpx;
  margin-bottom: 18rpx;
}
.n {
  font-size: 32rpx;
  font-weight: 950;
  max-width: 520rpx;
}
.st {
  padding: 10rpx 14rpx;
  border-radius: 999rpx;
  font-size: 24rpx;
  font-weight: 900;
}
.w {
  background: rgba(59, 130, 246, 0.16);
  color: #1d4ed8;
}
.g {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}
.d {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.x {
  background: rgba(17, 24, 39, 0.12);
  color: #111827;
}
.meta {
  margin-top: 12rpx;
  font-size: 26rpx;
}
.ops {
  margin-top: 16rpx;
  gap: 12rpx;
}
.op {
  padding: 12rpx 16rpx;
  border-radius: 18rpx;
  background: rgba(17, 24, 39, 0.06);
  font-size: 26rpx;
  font-weight: 800;
}
.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
</style>

