<template>
  <view class="reservation">
    <view class="form-container">
      <form>
        <view class="form-item">
          <label>功能房</label>
          <input type="text" v-model="list.roomName" disabled placeholder-class="input-placeholder" />
        </view>
        
        <view class="form-item">
          <label>主题</label>
          <input type="text" v-model="formData.rtTheme" placeholder="请输入活动主题" placeholder-class="input-placeholder" />
        </view>
        
        <view class="form-item">
          <label>申请人</label>
          <input type="text" v-model="formData.rtCreatRole" placeholder="请输入申请人姓名" placeholder-class="input-placeholder" />
        </view>
		
		<view class="form-item">
		  <label>手机号码</label>
		  <input type="text" v-model="formData.mobilePhone" placeholder="请输入申请人手机号码" placeholder-class="input-placeholder" />
		</view>
        
        <view class="form-item">
          <label>使用部门/学院</label>
          <picker mode="selector" :range="deptXZJGList" @change="handleDeptChange">
            <view class="picker">
              {{ formData.rtDepar || '请选择' }}
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <label>参与人数</label>
          <input type="number" v-model="formData.rtPeople" :placeholder="'最多可容纳'+list.roomCapacity+'人'" placeholder-class="input-placeholder" />
        </view>
        
        <view class="form-item">
          <label>预约用途</label>
          <picker range-key="dictLabel" :value="rangeIndex" :range="Reserveduse" @change="classChange">
            <view class="uni-input">
              <text v-if="Reserveduse.length" class="val">{{Reserveduse[rangeIndex].dictLabel}}</text>
              <text v-else class="placeholder">请选择预约用途</text>
              <uni-icons type="down" size="16" color="#202020"></uni-icons>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <label>人员类型</label>
          <view class="trigger" @click="showDrawer = true">
            <view class="uni-input">
              <text v-if="selectedRoles.length">{{ selectedRoles.join(", ") }}</text>
              <text v-else class="placeholder">请选择人员类型</text>
              <uni-icons type="down" size="16" color="#202020"></uni-icons>
            </view>
          </view>
        </view>
      </form>
    </view>

    <view class="time-selection">
      <view class="time-header">
        <text>选择时间段</text>
        <text><text style="color: red;">*</text>请选择可用时间段</text>
      </view>
      
      <view class="time-slots">
        <view v-for="(item,index) in slotslist" :key="index" class="slot-item">
          <button @click="selectTimeSlot(item,index)" 
                  :disabled="item.isOccupy==1"
                  :class="{
                    'active': timeindex===index, 
                    'disabled': item.isOccupy==1,
                    'warning': formData.rtPeople > list.roomCapacity
                  }">
            {{item.openingHours}}
          </button>
        </view>
      </view>
      
      <view class="usage-matters">
        <text>使用事项：</text>
        <text>{{list.roomMatter}}</text>
      </view>
      
      <button type="primary" 
              :disabled="isSubmitting || !isFormValid" 
              class="submit-btn"
              @tap="onSubmit">
        {{isSubmitting ? '提交中...' : '提交预约'}}
      </button>
    </view>
    
    <!-- 人员类型选择抽屉 -->
    <view v-if="showDrawer" class="drawer-overlay" @click="showDrawer = false"></view>
    <view v-if="showDrawer" class="drawer">
      <view class="drawer-header">
        <text>选择人员类型</text>
        <text class="drawer-close" @click="showDrawer = false">完成</text>
      </view>
      <view class="drawer-body">
        <uni-data-checkbox 
          :multiple="true" 
          v-model="selectedRoles" 
          mode="tag"
          :map="{text:'dictLabel',value:'dictValue'}" 
          :localdata="rolelist">
        </uni-data-checkbox>
      </view>
    </view>
  </view>
</template>

<script>
import { 
  selectRtFuReservationTime, 
  addRoomReservation, 
  getXZJGDept 
} from '@/api/OneStopCommunity/room.js';
import { getDicts } from '@/api/system/dict/data.js';

export default {
  data() {
    return {
      showDrawer: false,
      selectedRoles: [],
      isSubmitting: false,
      timeindex: null,
      formData: {
        rtTheme: "",
        rtCreatRole: "",
        rtDepar: "",
        rtPeople: "",
      },
      rangeIndex: 0,
      roomNo: "",
      rtTime: "",
      list: {},
      slotslist: [],
      Reserveduse: [],
      rolelist: [],
      deptXZJGList: []
    };
  },
  computed: {
    isFormValid() {
      return (
        this.formData.rtTheme &&
        this.formData.rtCreatRole &&
        this.formData.rtDepar &&
        this.formData.rtPeople > 0 &&
        this.formData.rtPeople <= this.list.roomCapacity &&
        this.Reserveduse.length > 0 &&
        this.selectedRoles.length > 0 &&
        this.timeindex !== null &&
		this.formData.mobilePhone
      );
    }
  },
  methods: {
    handleDeptChange(e) {
      this.formData.rtDepar = this.deptXZJGList[e.detail.value];
    },
    classChange(e) {
      this.rangeIndex = e.detail.value;
    },
    selectTimeSlot(item, index) {
      this.timeindex = index;
    },
    async getXZJGDeptList() {
      try {
        const res = await getXZJGDept();
		//二级学院排列位置调整
		let depts = res.data;
		let quList = depts.slice(14,25)
		depts.splice(14,11);
		depts.splice(0, 0, ...quList);
		this.deptXZJGList = depts;
        //this.deptXZJGList = res.data;
      } catch (error) {
        console.error('获取部门列表失败:', error);
        uni.showToast({ title: '获取部门列表失败', icon: 'none' });
      }
    },
    async getlist() {
      try {
        const res = await selectRtFuReservationTime({
          roomNo: this.list.roomNo,
          rtTime: this.rtTime
        });
        this.slotslist = res.data || [];
      } catch (error) {
        console.error('获取时间段失败:', error);
        uni.showToast({ title: '获取可用时间段失败', icon: 'none' });
      }
    },
    async getReserved() {
      try {
        const res = await getDicts('routine_rtfureservations_rt_purpose');
        this.Reserveduse = res.data;
      } catch (error) {
        console.error('获取预约用途失败:', error);
      }
    },
    async getrole() {
      try {
        const res = await getDicts('routine_rtfureservation_rt_role');
        this.rolelist = res.data;
      } catch (error) {
        console.error('获取人员类型失败:', error);
      }
    },
    validateForm() {
      if (!this.formData.rtTheme) {
        uni.showToast({ title: '请输入活动主题', icon: 'none' });
        return false;
      }
      
      if (!this.formData.rtCreatRole) {
        uni.showToast({ title: '请输入申请人姓名', icon: 'none' });
        return false;
      }
	  
	  if (!this.formData.mobilePhone) {
	    uni.showToast({ title: '请输入申请人手机号码', icon: 'none' });
	    return false;
	  }
      
      if (!this.formData.rtDepar) {
        uni.showToast({ title: '请选择使用部门/学院', icon: 'none' });
        return false;
      }
      
      if (!this.formData.rtPeople || this.formData.rtPeople <= 0) {
        uni.showToast({ title: '请输入有效的参与人数', icon: 'none' });
        return false;
      }
      
      if (this.formData.rtPeople > this.list.roomCapacity) {
        uni.showToast({ 
          title: `人数超过限制(最多${this.list.roomCapacity}人)`, 
          icon: 'none' 
        });
        return false;
      }
      
      if (!this.Reserveduse.length || !this.Reserveduse[this.rangeIndex]) {
        uni.showToast({ title: '请选择预约用途', icon: 'none' });
        return false;
      }
      
      if (this.selectedRoles.length === 0) {
        uni.showToast({ title: '请选择人员类型', icon: 'none' });
        return false;
      }
      
      if (this.timeindex === null) {
        uni.showToast({ title: '请选择预约时间段', icon: 'none' });
        return false;
      }
      
      return true;
    },
    async onSubmit() {
      if (this.isSubmitting) return;
      
      if (!this.validateForm()) return;
      
      this.isSubmitting = true;
      
      try {
        const form = {
          ...this.formData,
          rtPurpose: this.Reserveduse[this.rangeIndex].dictLabel,
          rtRole: this.selectedRoles.join(","),
          roomNo: this.list.roomNo,
          roomName: this.list.roomName,
          rtNo: this.slotslist[this.timeindex].rtNo,
          rtTime: this.rtTime,
          rtTimePeriod: this.slotslist[this.timeindex].openingHours
        };
        
        console.log('提交数据:', form);
        
        const res = await addRoomReservation(form);
        
        if (res.code === 200) {
          uni.showToast({ title: '预约成功' });
          setTimeout(() => {
            uni.redirectTo({ url: "../appointment/index" });
          }, 1500);
        } else {
          uni.showToast({ title: res.msg || '预约失败', icon: 'none' });
        }
      } catch (error) {
        console.error('预约提交失败:', error);
        uni.showToast({ title: '预约提交失败', icon: 'none' });
      } finally {
        this.isSubmitting = false;
      }
    }
  },
  onLoad(option) {
    this.rtTime = option.rtTime;
    this.list = JSON.parse(option.list);
    this.formData.roomName = this.list.roomName;
    
    Promise.all([
      this.getlist(),
      this.getReserved(),
      this.getrole(),
      this.getXZJGDeptList()
    ]).catch(error => {
      console.error('初始化失败:', error);
    });
  }
};
</script>

<style lang="scss" scoped>
.reservation {
  background-color: #f4f4f4;
  min-height: 100vh;
  padding-bottom: 40rpx;
  
  .form-container {
    padding: 40rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .form-item {
      margin-bottom: 30rpx;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      
      label {
        display: block;
        margin-bottom: 20rpx;
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
      
      input, .picker {
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 20rpx;
        border: 1rpx solid #e1e1e1;
        border-radius: 10rpx;
        font-size: 28rpx;
        color: #333;
      }
      
      .uni-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .val {
          flex: 1;
        }
        
        .placeholder {
          color: #b6b6b6;
        }
      }
      
      .trigger {
        .uni-input {
          height: 80rpx;
          line-height: 80rpx;
          padding: 0 20rpx;
          border: 1rpx solid #e1e1e1;
          border-radius: 10rpx;
        }
      }
    }
  }
  
  .time-selection {
    background-color: #fff;
    padding: 40rpx;
    border-radius: 20rpx 20rpx 0 0;
    
    .time-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      text:first-child {
        font-size: 32rpx;
        font-weight: 550;
      }
      
      text:last-child {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .time-slots {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10rpx;
      
      .slot-item {
        width: 33.33%;
        padding: 10rpx;
        box-sizing: border-box;
        
        button {
          height: 80rpx;
          line-height: 80rpx;
          font-size: 26rpx;
          border-radius: 10rpx;
          background-color: #f9fbfc;
          color: #1890FF;
          border: 1rpx solid #1890FF;
          
          &.active {
            background-color: #1890FF;
            color: #fff;
          }
          
          &.disabled {
            background-color: #f5f5f5;
            color: #c1c1c1;
            border-color: #e1e1e1;
          }
          
          &.warning {
            border-color: #ff9900;
            color: #ff9900;
          }
        }
      }
    }
    
    .usage-matters {
      margin-top: 40rpx;
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      
      text:first-child {
        font-weight: bold;
        margin-right: 10rpx;
      }
    }
    
    .submit-btn {
      margin-top: 50rpx;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 32rpx;
      border-radius: 45rpx;
      background-color: #1890FF;
      
      &[disabled] {
        background-color: #c1ccdf;
      }
    }
  }
  
  .drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
  }
  
  .drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
    z-index: 999;
    box-shadow: 0 -5rpx 20rpx rgba(0, 0, 0, 0.1);
    
    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #eee;
      
      text:first-child {
        font-size: 32rpx;
        font-weight: bold;
      }
      
      .drawer-close {
        color: #1890FF;
        font-size: 28rpx;
      }
    }
    
    .drawer-body {
      max-height: 60vh;
      overflow-y: auto;
      padding-bottom: 40rpx;
    }
  }
}

.input-placeholder {
  color: #b6b6b6;
  font-size: 28rpx;
}
</style>