<template>
  <view class="unavailable-time-page">
    <!-- 顶部导航栏 -->
    <custom-navbar 
      title="不可服务时间"
      :show-back="true"
    ></custom-navbar>
    
    <!-- 内容区域 -->
    <view class="content">
      <!-- 已添加的时间段列表 -->
      <view class="time-list">
        <view 
          v-for="(item, index) in timeSlots" 
          :key="item.id"
          class="time-item"
        >
          <view class="time-info">
            <text class="date">{{item.date}}</text>
            <text class="time">{{item.time_start}}-{{item.time_end}}</text>
          </view>
          <view class="action-btns">
            <text class="delete-btn" @click="deleteTimeSlot(item.id)">删除</text>
          </view>
        </view>
      </view>
      
      <!-- 添加新时间段按钮 -->
      <view class="add-btn"
			@click="showTimePicker">
        <text class="add-icon">+</text>
        <text class="add-text">添加不可服务时间</text>
      </view>
    </view>
    
    <!-- 时间选择弹窗 -->
    <view class="popup"
		  v-if="showTimePickerFlag"
		  :class="{ show: showTimePickerFlag }">
	  <view class="popup-mask" @click="closeTimePicker"></view>
      <view class="time-picker">
        <view class="picker-header">
          <text class="cancel-btn" @click="closeTimePicker">取消</text>
          <text class="title">选择时间</text>
          <text class="confirm-btn" @click="confirmTime">确定</text>
        </view>
        
        <view class="picker-content">
          <!-- 日期选择 -->
          <view class="date-picker">
            <text class="label">日期</text>
            <picker 
              mode="date" 
              :value="currentDate" 
              :start="minDate"
              @change="handleDateChange"
            >
              <view class="picker-value">{{currentDate}}</view>
            </picker>
          </view>
          
          <!-- 开始时间选择 -->
          <view class="time-picker-item">
            <text class="label">开始时间</text>
            <picker 
              mode="time" 
              :value="startTime" 
              @change="handleStartTimeChange"
            >
              <view class="picker-value">{{startTime}}</view>
            </picker>
          </view>
          
          <!-- 结束时间选择 -->
          <view class="time-picker-item">
            <text class="label">结束时间</text>
            <picker 
              mode="time" 
              :value="endTime"
			  :start="minTime"
              @change="handleEndTimeChange"
            >
              <view class="picker-value">{{endTime}}</view>
            </picker>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '../../utils/request'
export default {
  data() {
    return {
      timeSlots: [], // 已添加的时间段列表
      currentDate: '', // 当前选择的日期
      startTime: '08:00', // 开始时间
      endTime: '18:00', // 结束时间
      minDate: '09:00', // 最小可选日期（今天）
      // maxDate: '', // 最大可选日期（3个月后）
	  minTime: '', // 最小可选时间
      editingIndex: -1 ,// 正在编辑的时间段索引
	  showTimePickerFlag: false,
	  id: null,
	  account: ''
    }
  },
  
  created() {
    // 初始化日期范围
    const today = new Date()
    this.currentDate = this.formatDate(today)
    this.minDate = this.formatDate(today)
    // const threeMonthsLater = new Date()
    // threeMonthsLater.setMonth(today.getMonth() + 3)
    // this.maxDate = this.formatDate(threeMonthsLater)
	this.getUserInfo();
	this.getOffserverlist();
  },
  
  methods: {
	getUserInfo() {
		request.post('/user/getuser',{type: 2}).then(result=>{
			this.account = result.data.account;
			this.id = result.data.id;
      })
    },
	getOffserverlist() {
		request.post('/user/offserverlist').then(res=>{
			if(res.state == 1) {
				this.timeSlots = res.data;
			}else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	},
    // 显示时间选择器
    showTimePicker() {
		// console.log(1111)
		//this.editingIndex = -1;
	  this.showTimePickerFlag = true;
    },
    
    // 关闭时间选择器
    closeTimePicker() {
	  this.showTimePickerFlag = false;
    },
    
    // 确认选择的时间
    confirmTime() {
      if (this.validateTime()) {
        const data = {
          date: this.currentDate,
          time_start: `${this.currentDate} ${this.startTime}:00`,
          time_end: `${this.currentDate} ${this.endTime}:00`,
		  user_syr_id: this.id,
		  phone: this.account
        }
        // 添加新时间段
        request.post('/user/addrelaxtime',data).then(res=>{
			if(res.state == 1) {
				this.getOffserverlist()
				this.closeTimePicker()
			}
			uni.showToast({
				title: res.msg,
					icon: 'none'
			})
		})
      }
    },
    
    // 删除时间段
    deleteTimeSlot(id) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这个时间段吗？',
        success: (res) => {
          if (res.confirm) {
            request.post('/user/delrelaxtime',{id}).then(res=>{
            	if(res.state == 1) {
            		this.getOffserverlist()
            	}
            	uni.showToast({
            		title: res.msg,
					icon: 'none'
            	})
            })
          }
        }
      })
    },
    
    // 处理日期变化
    handleDateChange(e) {
      this.currentDate = e.detail.value
    },
    
    // 处理开始时间变化
    handleStartTimeChange(e) {
      this.startTime = e.detail.value;
	  var timeStrs = this.startTime.split(":");
	  var hour = parseInt(timeStrs[0]) + 1;
	  this.minTime = hour + ':00';
    },
    
    // 处理结束时间变化
    handleEndTimeChange(e) {
      this.endTime = e.detail.value
    },
    
    // 验证时间选择是否有效
    validateTime() {
      const start = new Date(`${this.currentDate} ${this.startTime}`)
      const end = new Date(`${this.currentDate} ${this.endTime}`)
      
      if (end <= start) {
        uni.showToast({
          title: '结束时间必须晚于开始时间',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    
    // 格式化日期为 YYYY-MM-DD
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style>
.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}
.popup.show {
  visibility: visible;
  opacity: 1;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.content {
  padding: 24rpx;
}

.time-list {
  margin-bottom: 24rpx;
}

.time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}

.time-info {
  flex: 1;
}

.date {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 8rpx;
  display: block;
}

.time {
  font-size: 24rpx;
  color: #666666;
}

.action-btns {
  display: flex;
  align-items: center;
}

.delete-btn {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
}

.delete-btn {
  color: #999999;
}

.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  background-color: #FFFFFF;
  border-radius: 12rpx;
}

.add-icon {
  font-size: 32rpx;
  color: #E8101E;
  margin-right: 8rpx;
}

.add-text {
  font-size: 28rpx;
  color: #333333;
}

.time-picker {
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.popup.show .time-picker {
  transform: translateY(0);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.cancel-btn,
.confirm-btn {
  font-size: 28rpx;
  padding: 16rpx;
}

.cancel-btn {
  color: #999999;
}

.confirm-btn {
  color: #E8101E;
}

.title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.picker-content {
  padding: 24rpx;
}

.date-picker,
.time-picker-item {
  margin-bottom: 24rpx;
}

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

.picker-value {
  height: 80rpx;
  line-height: 80rpx;
  background-color: #F5F5F5;
  border-radius: 8rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333333;
}

/* APP适配 */
/* #ifdef APP-PLUS */
.time-picker {
  padding-bottom: 0;
}
/* #endif */

/* 小程序适配 */
/* #ifdef MP-WEIXIN */
.time-picker {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
/* #endif */
</style> 