<template>
  <view class="container">
    <!-- 日期导航 -->
    <view class="date-nav">
      <scroll-view scroll-x class="date-scroll">
        <view
            v-for="(item, index) in dateList"
            :key="index"
            class="date-item"
            :class="currentDate === item.date ? 'active' : ''"
            @click="selectDate(item.date)"
        >
          <text class="week-day">{{item.weekDay}}</text>
          <text class="date-text" v-if="!item.isToday">{{item.date}}</text>
          <text class="today-text" v-else>今天</text>
        </view>
      </scroll-view>
    </view>

    <!-- 选择时段 -->
    <text class="section-title">选择时段</text>
    <view class="time-tabs">
      <view class="time-tab" :class="timeTab === 'morning' ? 'active' : 'inactive'" @click="changeTimeTab('morning')">
        <image src="/static/ic_meet_02.png" class="time-icon"/>
        上午
      </view>
      <view class="time-tab" :class="timeTab === 'afternoon' ? 'active' : 'inactive'" @click="changeTimeTab('afternoon')">
        <image src="/static/ic_meet_03.png" class="time-icon"/>
        下午
      </view>
    </view>

    <!-- 会议人数 -->
    <text class="section-title">会议人数</text>
    <input type="number" v-model="formData.peopleNum" placeholder="请输入会议人数" class="input-field"/>

    <!-- 会议主题 -->
    <text class="section-title">会议主题</text>
    <input type="text" v-model="formData.theme" placeholder="请输入会议名称" class="input-field"/>

    <!-- 会议时间 -->
    <text class="section-title">会议时间</text>
    <view class="select-field">
      <uni-datetime-picker class="datetime-picker" type="datetime" :hide-second="true" v-model="formData.time"/>
    </view>

    <!-- 选择会议室 -->
    <text class="section-title">选择会议室</text>
    <picker @change="onMeetingRoomChange" :value="meetingRoomIndex" :range="meetingRooms" range-key="name">
      <view class="select-field">
        <text>{{ formData.meetingRoom || '请选择会议室' }}</text>
        <image class="arrow-icon" src="/static/ic_right_arrow_g.png"/>
      </view>
    </picker>

    <!-- 增值服务 -->
    <text class="section-title">增值服务</text>
    <view class="select-field" @click="toggleServiceExpand">
      <text>会议物品</text>
      <image class="arrow-icon" :src="serviceExpanded ? '/static/ic_down_arrow_g.png' : '/static/ic_right_arrow_g.png'"/>
    </view>

    <!-- 展开的服务内容 -->
    <view class="service-content" v-if="serviceExpanded">
      <view class="service-category" v-for="(category, catIndex) in services" :key="catIndex">
        <text class="category-title">{{category.name}}</text>
        <view class="service-items">
          <view class="service-item" v-for="(item, itemIndex) in category.items" :key="itemIndex">
            <view class="service-info">
              <text class="service-name">{{item.name}}</text>
              <text class="service-price">¥{{item.price}}/{{item.unit}}</text>
            </view>
            <view class="quantity-control">
              <view class="quantity-btn minus" @tap="adjustQuantity(catIndex, itemIndex, -1)">-</view>
              <input type="number" v-model="item.quantity" disabled class="quantity-input"/>
              <view class="quantity-btn plus" @tap="adjustQuantity(catIndex, itemIndex, 1)">+</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 新增增值服务备注栏 -->
      <view class="service-remark">
        <textarea v-model="formData.remark" placeholder="请输入增值服务备注信息（选填）" style="width: 100%" maxlength="120"> </textarea>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <view class="price-display">
        <text class="price-symbol">¥</text>
        <text class="price-amount">{{totalPrice}}</text>
      </view>
      <button class="submit-btn" @tap="submitForm">发起会议并支付</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: '',
      dateList: [],
      timeTab: 'afternoon',
      formData: {
        time:'',
        peopleNum: '',
        meetingRoom: '',
        theme: '',
        checkIn: false,
        remark: ''
      },
      // 新增服务展开状态
      serviceExpanded: false,
      meetingRoomIndex: 0,
      meetingTime: '2025-07-07 14:00-18:00',
      meetingRooms: [
        { name: '3栋1号会议室 (3078)', capacity: '可容纳20人', facility: '带电视', price: 29 },
        { name: '3栋2号会议室 (5124)', capacity: '可容纳50人', facility: '带投影仪', price: 49 },
        { name: '1栋3号会议室 (1247)', capacity: '可容纳100人', facility: '', price: 99 }
      ],
      services: [
        {
          name: '茶水',
          items: [
            { id: 1, name: '清茶', price: 5, unit: '杯', quantity: 0 },
            { id: 2, name: '碧螺春', price: 8, unit: '杯', quantity: 0 },
            { id: 3, name: '红茶', price: 10, unit: '杯', quantity: 0 },
            { id: 4, name: '怡宝矿泉水', price: 2, unit: '瓶', quantity: 0 }
          ]
        },
        {
          name: '会议物品',
          items: [
            { id: 5, name: '纸巾', price: 1, unit: '包', quantity: 0 },
            { id: 6, name: '一次性毛巾', price: 3, unit: '个', quantity: 0 },
            { id: 7, name: '湿巾', price: 2, unit: '包', quantity: 0 },
            { id: 8, name: '文件袋', price: 5, unit: '个', quantity: 0 }
          ]
        },
        {
          name: '其他物品',
          items: [
            { id: 9, name: '话筒', price: 10, unit: '个', quantity: 0 },
            { id: 10, name: '音乐', price: 20, unit: '场', quantity: 0 },
            { id: 11, name: '假花', price: 15, unit: '束', quantity: 0 }
          ]
        }
      ],
      totalPrice: 0
    };
  },
  created() {
    this.initDateList();
    this.calculateTotalPrice();
  },
  methods: {
    // 新增切换服务展开状态方法
    toggleServiceExpand() {
      this.serviceExpanded = !this.serviceExpanded;
    },
    initDateList() {
      const today = new Date();
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

      for (let i = 0; i < 14; i++) {
        const date = new Date();
        date.setDate(today.getDate() + i);

        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const weekDay = weekDays[date.getDay()];
        const dateStr = `${month}-${day}`;

        this.dateList.push({
          date: dateStr,
          weekDay: weekDay,
          isToday: i === 0
        });
      }

      this.currentDate = this.dateList[0].date;
    },

    selectDate(date) {
      this.currentDate = date;
    },

    changeTimeTab(tab) {
      this.timeTab = tab;
    },

    onMeetingRoomChange(e) {
      this.meetingRoomIndex = e.detail.value;
      this.formData.meetingRoom = this.meetingRooms[this.meetingRoomIndex].name;
      this.calculateTotalPrice();
    },

    adjustQuantity(catIndex, itemIndex, delta) {
      const item = this.services[catIndex].items[itemIndex];
      const newQuantity = item.quantity + delta;
      if (newQuantity >= 0) {
        item.quantity = newQuantity;
        this.calculateTotalPrice();
      }
    },

    calculateTotalPrice() {
      let total = 0;

      // 会议室费用
      if (this.meetingRoomIndex >= 0) {
        total += this.meetingRooms[this.meetingRoomIndex].price;
      }

      // 增值服务费用
      this.services.forEach(category => {
        category.items.forEach(item => {
          total += item.price * item.quantity;
        });
      });

      this.totalPrice = total;
    },

    submitForm() {
      if (!this.formData.peopleNum || !this.formData.meetingRoom) {
        uni.showToast({
          title: '请完善必填信息',
          icon: 'none'
        });
        return;
      }

      uni.showLoading({ title: '提交中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '预约成功',
          success: () => {
            // 跳转支付页面
          }
        });
      }, 1000);
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx 30rpx 120rpx;
}

/* 日期导航 */
.date-nav {
  background: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;

  .date-scroll {
    white-space: nowrap;
  }

  .date-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx 20rpx;
    margin: 0 10rpx;
    border-radius: 8rpx;

    &.active {
      background: #e8f4ff;

      .week-day, .today-text, .date-text {
        color: #4a90e2;
      }
    }

    .week-day {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 5rpx;
    }

    .date-text, .today-text {
      font-size: 32rpx;
      color: #333;
    }

    .today-text {
      color: #4a90e2;
    }
  }
}

.section-title {
  display: block;
  font-size: 32rpx;
  color: #000;
  font-weight: 500;
  margin: 30rpx 0 20rpx;
}

.time-tabs {
  display: flex;
  margin-bottom: 30rpx;

  .time-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160rpx;
    height: 70rpx;
    border-radius: 10rpx;
    margin-right: 30rpx;
    font-size: 28rpx;

    &.active {
      background: #2E93FF;
      color: #fff;
    }

    &.inactive {
      background: #EBF5FF;
      color: #808080;
    }

    .time-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }
  }
}

.input-field, .select-field {
  height: 80rpx;
  background: #F7F7F7;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;

  .arrow-icon {
    width: 20rpx;
    height: 20rpx;
  }
}

.service-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;

  .category-title {
    display: block;
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 20rpx;
  }

  .service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .service-info {
      flex: 1;

      .service-name {
        font-size: 28rpx;
        color: #333;
      }

      .service-price {
        font-size: 24rpx;
        color: #2E93FF;
        margin-left: 20rpx;
      }
    }

    .quantity-control {
      display: flex;
      align-items: center;

      .quantity-btn {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
        color: #666;

        &.minus {
          border: 1rpx solid #ddd;
        }

        &.plus {
          background: #2E93FF;
          color: #fff;
        }
      }

      .quantity-input {
        width: 80rpx;
        height: 50rpx;
        text-align: center;
        margin: 0 10rpx;
        background: #f5f5f5;
        border-radius: 8rpx;
      }
    }
  }
}

.remark-input {
  width: 100%;
  height: 200rpx;
  background: #F7F7F7;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  margin-bottom: 30rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

  .price-display {
    display: flex;
    align-items: baseline;

    .price-symbol {
      font-size: 28rpx;
      color: #ff6b00;
      margin-right: 5rpx;
    }

    .price-amount {
      font-size: 36rpx;
      color: #ff6b00;
      font-weight: bold;
    }
  }

  .submit-btn {
    width: 400rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #2E93FF;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
  }
}

/* 服务内容区域样式 */
.service-content {
  background: #F7F7F7;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;

  .service-category {
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .category-title {
      display: block;
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 20rpx;
    }

    .service-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .service-info {
        flex: 1;

        .service-name {
          font-size: 28rpx;
          color: #333;
        }

        .service-price {
          font-size: 24rpx;
          color: #2E93FF;
          margin-left: 20rpx;
        }
      }

      .quantity-control {
        display: flex;
        align-items: center;

        .quantity-btn {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 36rpx;
          color: #666;

          &.minus {
            border: 1rpx solid #ddd;
          }

          &.plus {
            background: #2E93FF;
            color: #fff;
          }
        }

        .quantity-input {
          width: 80rpx;
          height: 50rpx;
          text-align: center;
          margin: 0 10rpx;
          background: #f5f5f5;
          border-radius: 8rpx;
        }
      }
    }
  }
}

/* 新增增值服务备注样式 */
.service-remark {
  margin-top: 30rpx;
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  height: 180rpx;
}
.datetime-picker {
  width: 100%;

  :deep .uni-date-x uni-date-single {
    background-color: #f31818 !important;
    border: none !important;
    height: 80rpx;
    border-radius: 8rpx;

    .uni-date__x-input {
      height: 80rpx;
      line-height: 80rpx;
      padding-left: 20rpx;
    }

    .uni-date__x-icon {
      right: 20rpx;
    }
  }
}
</style>