<template>
	<!-- 时间设置 -->
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">时间设置</block>
		</cu-custom>
		
		<view class="base-info flex justify-between" @click="toSelectWeeksPage()">
			<text>
				重复
			</text>
			<view>
				{{ weeksName }}
				<u-icon name="arrow-right" class="arrow-right"></u-icon>
			</view>
		</view>
		
			<view
				v-for="(item, index) in timeSettingList"
				:key="index">
				<view class="base-info flex justify-between" @click="editTimeSlot(index)">
					<text>
						时间段
					</text>
					<view class="text-bold text-df">
            {{ item.hoursFromString}} 至 {{ item.hoursEndString }}
						<u-icon name="arrow-right" class="margin-left-sm"></u-icon>
					</view>
				</view>
			</view>



		<u-popup border-radius="10" v-model="timeSlotShow" mode="bottom" length="30%">
			<smhTimeRange :time="time" @confrim="confrim" @cancel="cancel"></smhTimeRange>
		</u-popup>
		

        <view class="flex justify-center align-center btn-box text-lg">
            <view class="btn" @click="del" style="margin-right:100rpx;">删除</view>
            <view class="btn active-bg" @click="addOrUpdateInfo">保存</view>
        </view>
		
		
	</view>
</template>

<script>
	import smhTimeRange from "@/components/smh-time-range/smh-time-range.vue"
	
	export default {
		data() {
			return {
				sectionId: '',
				weeks: '',
				weeksName: '',
				index: '',

				timeSlotShow: false,
				time: [0,0,0,0,0],
				timeSettingList: [],
				show: false,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d',
						}
					}
				],
				customStyle: {
					marginTop: '20rpx',
					color: '',
					height: '70rpx',
				}
			}
		},
		components: {
			smhTimeRange
		},
		created() {
			this.initData();
		},
		// 接收 上个页面传递过来的参数
		onLoad(option) {
      console.log(option)
			this.sectionId = option.sectionId;
			this.weeks = option.weeks;
      if(this.sectionId) {
        this.timeSettingList.push({
          sectionId: option.sectionId,
          hoursFromString: option.hoursFromString,
          hoursEndString: option.hoursEndString
        })
        //回填weeksName和
      }else {
        this.timeSettingList.push({
          sectionId: null,
          hoursFromString: '00:00',
          hoursEndString: '00:00'
        })
      }
		},

		onShow() {
		    uni.$on("handClickWeeks", res => {
                console.log('选择时间更新')
        this.weeks = res.data.toString();
        this.getWeeksName();
        // 清除监听
        uni.$off('handClickWeeks');
		    })
		},
		methods: {
      addOrUpdateInfo(){
        if(( this.timeSettingList != null &&  this.timeSettingList != undefined && this.timeSettingList.length>0 )
            && (this.weeks != null &&  this.weeks != undefined && this.weeks != '') ){
          var param ={
            isEnable:"0",
            weeks:this.weeks,
            serverId:uni.getStorageSync('userInfo').serverId,
            hoursFromString:this.timeSettingList[0].hoursFromString,
            hoursEndString:this.timeSettingList[0].hoursEndString,
          }
          if(this.sectionId) {
            param.sectionId = this.sectionId;
            this.$u.api.updateServerTimeSection(param).then(res => {
              if (res.code === 200) {
                uni.showToast({
                  title: '修改成功',
                  icon: 'none'
                });
                uni.navigateTo({
                  url: './serveTime'
                })
              }else {
                uni.showToast({
                  title: '修改失败',
                  icon: 'none'
                });
              }
            })
          }else {
            this.$u.api.addServerTimeSection(param).then(res => {
              if (res.code === 200) {
                uni.showToast({
                  title: '修改成功',
                  icon: 'none'
                });
                uni.navigateTo({
                  url: './serveTime'
                })
              }else {
                uni.showToast({
                  title: '修改失败',
                  icon: 'none'
                });
              }
            })
          }
        }else {
          uni.showToast({
            title: '请设置日期和时间段',
            icon: 'none'
          });
        }


      },
      getWeeksName(){
        let weeksName = '';
        if(this.weeks == '0,1,2,3,4,5,6') {
          weeksName += '每天';
        } else {
          if(this.weeks.indexOf(0) != -1) {
            weeksName += '周日 ';
          }
          if(this.weeks.indexOf(1) != -1) {
            weeksName += '周一 ';
          }
          if(this.weeks.indexOf(2) != -1) {
            weeksName += '周二 ';
          }
          if(this.weeks.indexOf(3) != -1) {
            weeksName += '周三 ';
          }
          if(this.weeks.indexOf(4) != -1) {
            weeksName += '周四 ';
          }
          if(this.weeks.indexOf(5) != -1) {
            weeksName += '周五 ';
          }
          if(this.weeks.indexOf(6) != -1) {
            weeksName += '周六 ';
          }
        }
        this.weeksName = weeksName;
      },
			initData(){
                //编辑回填
				if(this.sectionId) {
          this.getWeeksName();
        //回填weeksName和
				}
			},
            
			// 点击 '重复' 触发
			toSelectWeeksPage() {
				uni.navigateTo({
				    url: './selectWeeks?weeks=' + this.weeks + '&sectionId=' + this.sectionId
				});
			},
		
	
			// 编辑 时间段
			editTimeSlot(index) {
				this.index = index;
				let start = this.timeSettingList[index].hoursFromString.split(':');
				let end = this.timeSettingList[index].hoursEndString.split(':');
				this.time = [Number(start[0]),Number(start[1])/10,0,Number(end[0]),Number(end[1])/10]

				this.timeSlotShow = true;
			},

            //选择时间
			confrim(e){
				this.timeSlotShow = false;
				if (this.index === '') {
					let timeArr = e.time.split(' - ');
					this.timeSettingList.push({
						timeSlot: e.time,
						sectionId: '',
						hoursFromString: timeArr[0],
						hoursEndString: timeArr[1]
					})
				} else {
					this.timeSettingList[this.index].timeSlot = e.time;
					let timeArr = e.time.split(' - ');
					this.timeSettingList[this.index].hoursFromString = timeArr[0]
					this.timeSettingList[this.index].hoursEndString = timeArr[1]
				}
				this.index = '';
			},
			cancel(e){
				this.timeSlotShow = false;
			},
			// 删除时间
			del() {
        this.$u.api.updateServerTimeSection({sectionId:this.sectionId,delFlag:'2'}).then(res => {
          console.log(res);
          if(res.code === 200) {
            uni.$emit("delEvent");
            uni.navigateTo({
              url: './serveTime'
            })
          }
        })

			},
			// 点击 保存触发
			save() {
				if(typeof(this.weeks) == 'undefined' || this.weeks == '') {
					uni.showToast({
						title: "请选择周几",
						duration: 1500, mask:false, icon:'none'
					});
					return;
				}
				if(this.timeSettingList.length === 0) {
					uni.showToast({
						title: "请选择时间段",
						duration: 1500, mask:false, icon:'none'
					});
					return;
				}
				let data = {};
				let businessSectionJson = JSON.stringify(this.timeSettingList);
				data['businessSectionJson'] = businessSectionJson;
				data['weeks'] = this.weeks;
				data['sectionId'] = this.sectionId;


				uni.$emit("saveEvent");
                uni.navigateBack({
                    delta: 1
                })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 30rpx;
		line-height: 24rpx;
		color: #111;
	}
	
	.base-info {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding: 40rpx 40rpx 40rpx 40rpx;
		background-color: #fff;
		height: 100rpx;
		border-radius: 15rpx;
	}
	
	.arrow-right {
		margin-left: 6rpx;
	}
	
	.add-class {
		margin-left: 200rpx;
		width: 300rpx;
	}

    .btn {
        width: 250rpx;
        height: 82rpx;
        line-height: 82rpx;
        text-align: center;
        background: #FFFFFF;
        border-radius: 10rpx;
        border: 2rpx solid #ED6F44;
    }
	
	.btn-box {
        width: 100%;
        position: fixed;
        bottom: 90rpx;
        left: 0;
        padding: 0 75rpx;
    }
</style>
