<template>
  <view class="container">
    <!-- 花束选择 -->
    <view class="section">
      <text class="section-title">选择花束</text>
      <scroll-view class="flower-list" scroll-x>
        <view 
          v-for="(item, index) in flowers" 
          :key="index"
          class="flower-item"
          :class="{active: selectedFlower === index}"
          @click="selectFlower(index)"
        >
          <image :src="item.image" class="flower-image"></image>
          <text class="flower-name">{{ item.name }}</text>
          <text class="flower-price">¥{{ item.price }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 收花人信息 -->
    <view class="section">
      <text class="section-title">收花人信息</text>
      <view class="form-item">
        <text class="label">姓名</text>
        <input v-model="receiver.name" placeholder="请输入收花人姓名" />
      </view>
      <view class="form-item">
        <text class="label">电话</text>
        <input v-model="receiver.phone" type="number" placeholder="请输入收花人电话" />
      </view>
      <view class="form-item">
        <text class="label">地址</text>
        <input v-model="receiver.address" placeholder="请输入详细地址" />
      </view>
    </view>

    <!-- 祝福语 -->
    <view class="section">
      <text class="section-title">祝福语</text>
      <textarea 
        v-model="greeting" 
        placeholder="写下您的祝福..." 
        class="greeting-input"
      ></textarea>
    </view>

    <!-- 订单汇总 -->
    <view class="order-summary">
      <text class="summary-text">总计: ¥{{ flowers[selectedFlower].price }}</text>
    </view>

    <!-- 提交按钮 -->
    <view class="action-bar">
      <button class="submit-btn" @click="submitOrder">立即下单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedFlower: 0,
      flowers: [
        {
          name: '浪漫玫瑰',
          price: 199,
          image: '/static/flowers/rose.jpg'
        },
        {
          name: '温馨康乃馨',
          price: 159,
          image: '/static/flowers/carnation.jpg'
        },
        {
          name: '向日葵花束',
          price: 179,
          image: '/static/flowers/sunflower.jpg'
        },
        {
          name: '百合花束',
          price: 219,
          image: '/static/flowers/lily.jpg'
        }
      ],
      receiver: {
        name: '',
        phone: '',
        address: ''
      },
      greeting: ''
    }
  },
  methods: {
    selectFlower(index) {
      this.selectedFlower = index
    },
    submitOrder() {
      if (!this.validateForm()) return
      
      uni.showLoading({
        title: '提交中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '下单成功',
          icon: 'success'
        })
        this.resetForm()
      }, 1500)
    },
    validateForm() {
      if (!this.receiver.name) {
        uni.showToast({ title: '请输入收花人姓名', icon: 'none' })
        return false
      }
      if (!this.receiver.phone) {
        uni.showToast({ title: '请输入收花人电话', icon: 'none' })
        return false
      }
      if (!this.receiver.address) {
        uni.showToast({ title: '请输入收花地址', icon: 'none' })
        return false
      }
      return true
    },
    resetForm() {
      this.receiver = {
        name: '',
        phone: '',
        address: ''
      }
      this.greeting = ''
    }
  }
}
</script>

<style scoped>
.container {
  padding-bottom: 120rpx;
}

.section {
  padding: 30rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.flower-list {
  white-space: nowrap;
}

.flower-item {
  display: inline-block;
  width: 200rpx;
  margin-right: 20rpx;
  text-align: center;
  padding: 10rpx;
  border-radius: 10rpx;
  border: 1rpx solid #eee;
}

.flower-item.active {
  border-color: #ff2d55;
  background-color: #fff5f7;
}

.flower-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
}

.flower-name {
  display: block;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.flower-price {
  display: block;
  font-size: 26rpx;
  color: #ff2d55;
  margin-top: 5rpx;
}

.form-item {
  margin-bottom: 20rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  margin-bottom: 10rpx;
  color: #666;
}

input {
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.greeting-input {
  width: 100%;
  height: 160rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.order-summary {
  position: fixed;
  bottom: 120rpx;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
}

.summary-text {
  font-size: 32rpx;
  color: #ff2d55;
  font-weight: bold;
  float: right;
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}

.submit-btn {
  background-color: #ff2d55;
  color: #fff;
  font-size: 32rpx;
}
</style>