<template>
  <view class="page">
    <NavBar :title="isCreate ? '新建定时折扣' : '定时折扣详情'" :showBack="true" />
    <scroll-view class="detail-scroll" scroll-y>
      <view class="section">
        <text class="section-title">基本信息</text>
        <view class="form-item">
          <text class="form-label">活动名称</text>
          <input class="form-input" v-model="form.activityName" placeholder="请输入名称" />
        </view>
        <view class="form-item">
          <text class="form-label">折扣类型</text>
          <picker :range="typeOptions" range-key="label" :value="typeIndex" @change="onTypeChange" :disabled="!isCreate">
            <view class="form-picker">{{ typeOptions[typeIndex]?.label || '请选择' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="form-label">折扣开始</text>
          <picker mode="date" :value="form.discountStartTime" @change="onStartChange">
            <view class="form-picker">{{ form.discountStartTime || '请选择' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="form-label">折扣结束</text>
          <picker mode="date" :value="form.discountEndTime" @change="onEndChange">
            <view class="form-picker">{{ form.discountEndTime || '请选择' }}</view>
          </picker>
        </view>
      </view>
    </scroll-view>
    <view class="bottom-actions">
      <view class="save-btn" @click="isCreate ? handleCreate() : handleSave()"><text>{{ isCreate ? '创建' : '保存' }}</text></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import NavBar from '@/components/NavBar.vue';
import { getTimedDiscountById, createTimedDiscount, updateTimedDiscount } from '@/api/timedDiscount';
import { showToast } from '@/utils/common';

const typeOptions = [{ label: '定时折扣', value: 1 }, { label: '夜间折扣', value: 2 }];
const isCreate = ref(true);
const typeIndex = ref(0);
const form = ref<any>({ activityName: '', discountType: 1, discountStartTime: '', discountEndTime: '' });

onLoad((options?: Record<string, string>) => {
  const id = options?.id ? Number(options.id) : 0;
  if (id > 0) { isCreate.value = false; loadDetail(id); }
});

const loadDetail = async (id: number) => {
  try { const data = await getTimedDiscountById(id); form.value = data; const idx = typeOptions.findIndex(t => t.value === data.discountType); typeIndex.value = idx >= 0 ? idx : 0; } catch { showToast('加载失败'); }
};

const onTypeChange = (e: any) => { typeIndex.value = e.detail.value; form.value.discountType = typeOptions[typeIndex.value].value; };
const onStartChange = (e: any) => { form.value.discountStartTime = e.detail.value; };
const onEndChange = (e: any) => { form.value.discountEndTime = e.detail.value; };

const handleCreate = async () => {
  try { await createTimedDiscount(form.value); showToast('创建成功', 'success'); setTimeout(() => uni.navigateBack(), 1500); } catch { showToast('创建失败'); }
};

const handleSave = async () => {
  try { await updateTimedDiscount(form.value.id, form.value); showToast('保存成功', 'success'); } catch { showToast('保存失败'); }
};
</script>

<style lang="scss" scoped>
.page { height: 100vh; background: $bg-color-page; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.detail-scroll { flex: 1; height: 0; }
.section { background: $bg-color-card; margin-bottom: $spacing-2; padding: $spacing-3 $spacing-4; }
.section-title { display: block; font-size: 28rpx; font-weight: 600; color: $text-color-primary; margin-bottom: $spacing-3; padding-bottom: $spacing-2; border-bottom: 1rpx solid $border-color-light; }
.form-item { display: flex; align-items: center; justify-content: space-between; padding: $spacing-2 0; border-bottom: 1rpx solid $border-color-light; }
.form-item:last-child { border-bottom: none; }
.form-label { font-size: 28rpx; color: $text-color-secondary; flex-shrink: 0; width: 180rpx; }
.form-input { flex: 1; text-align: right; font-size: 28rpx; color: $text-color-primary; }
.form-picker { flex: 1; text-align: right; font-size: 28rpx; color: $text-color-muted; }
.bottom-actions { padding: $spacing-3 $spacing-4; padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); background: $bg-color-card; border-top: 1rpx solid $border-color-light; flex-shrink: 0; }
.save-btn { width: 100%; background: $primary-color; padding: 28rpx 0; border-radius: $radius-xl; display: flex; align-items: center; justify-content: center; }
.save-btn text { font-size: $font-size-lg; font-weight: 600; color: $text-color-primary; }
</style>

