<template>
	<view class="container">
<!--		<cu-custom bgColor="bg-white" :isBack="false">-->
<!--			<block slot="backText"></block>-->
<!--			<block slot="content">设置服务时间</block>-->

<!--		</cu-custom>-->
    <view class="cu-bar fixed padding flex align-center" :style="[{height:CustomBar + 'rpx'}]" style="background-color: #EDEDED ;">
      <view class="action" @tap="backPage" >
        <text class="cuIcon-close" style="color: #666666;"></text>
      </view>
      <view class="content" style="font-weight: bold;">
        设置服务时间
      </view>
      <view  class="cuIcon-more" style="font-size: 40rpx;">
      </view>
    </view>
		<view class="padding-sm">
            <view  style="height: 50px;">

            </view>
            <view class="setting-info flex justify-between align-center bg-ff">
                <view class="font-30">
                    停止接单
                </view>
                <view class="flex justify-center align-center font-26 color-66">
                    <view class="margin-right-sm">开启后，将不再接预约单</view>
                    <u-switch v-model="serverTime.stopOrder"  active-color="#fc6035" inactive-color="#ccc" size="40" @change="updateServerTime()" :disabled="onlyShow" ></u-switch>
                </view>
            </view>

             <view v-if="serverTime.stopOrder ==0" class="setting-info flex justify-between align-center bg-ff"  @click="!onlyShow?timeSlotShow=true:''">
                <view class="font-30">
                    接单间隔（小时）
                </view>
                <view class="flex justify-center align-center font-26 color-66">
                    <view class="margin-right-sm" v-if="serverTime.serverGrap==''">请选择间隔时长</view>
                    <view class="margin-right-sm font-30 text-bold color-11" v-else>{{serverTime.serverGrap}}</view>
                    <u-icon name="arrow-right" class="color-00"></u-icon>
                </view>
            </view>

			<uni-swipe-action v-if="serverTime.stopOrder ==0" >
				<uni-swipe-action-item  v-for="item in serverTime.sectionList" :key="item.sectionId" :right-options="!onlyShow?options:''"  @click="del(item.sectionId)" class="item-box">
					<view class="base-info flex">
						<view class="hours-weeks-class" @click="!onlyShow?toTimeSettingPage(item.sectionId, item.weeks,item):''">
							<view class="hours-class">
								{{ item.hoursFrom | timeFormat}} 至 {{ item.hoursEnd | timeFormat}}
							</view>
							<view class="weeks-class">
								{{ item.weekNames }}
							</view>
						</view>
						<view class="is-enable-class flex justify-center align-center">
							<u-switch active-color="#fc6035" inactive-color="#ccc" :disabled="onlyShow"
							v-model="item.isEnable" size="40" @change="enableChange(item.sectionId, item.isEnable)"></u-switch>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>


		<view v-if="serverTime.stopOrder ==0 && !onlyShow" class=" text-lg text-bold padding-lr-lg padding-tb-lg bg-white" style="position: absolute;bottom: 0px;width: 100%;">
			<view class="flex justify-center align-center" @tap="toAddTimeSettingPage()">
                <u-icon name="plus" class="text-main" style="margin-right:32rpx;font-weight: bolder;"></u-icon>
                <span class="text-lg color-11">添加时间</span>
			</view>
		</view>

        <u-popup border-radius="10" v-model="timeSlotShow" mode="bottom">
            <view class="flex align-center justify-between title padding-lr-xl">
                <span class="font-34 text-bold">选择接单间隔时长（小时）</span>
                <image src="../../static/common/close.png" style="width:30rpx;height:30rpx;" @tap="timeSlotShow=false"></image>
            </view>

            <view class="time-box font-30 text-bold flex flex-wrap">
                <view class="time-item" v-for="(item) in timeList" :key="item" :class="activeTime==item?'active':''" @tap="activeTime=item">{{item}}</view>
            </view>

            <view class="padding-bottom-xl font-34">
                <view class="sub color-ff text-center" @tap="confirm">确认</view>
            </view>

        </u-popup>
	</view>
</template>

<script>
	export default {
    filters: {
      timeFormat(time) {
        if (time == null || time == undefined || time == '') {
          return '';
        }
        return time.substring(time.length-3, time.length - 8);
      },
    },
		data() {
			return {
        onlyShow:true,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
        timeList: [0.5,1.0,1.5,2.0,2.5,3.0,3.5,4.0],
        activeTime: "",
        timeSlotShow: false,
        serverTime:{

        },
			}
		},
		// 接收 上个页面传递过来的参数
		onLoad(option) {

		},
		created() {
			this.initData();
		},
    watch: {
        timeSlotShow() {
          if(!this.timeSlotShow) {
                this.activeTime = this.serverTime.serverGrap
            }
        }
    },
		onShow() {
            //更新服务时间列表，由timeSetting页面$emit
			uni.$on("saveEvent", res => {
				this.initData();
			    // 清除监听
			    uni.$off('saveEvent');
			});
			uni.$on("delEvent", res => {
				this.initData();
			    // 清除监听
			    uni.$off('delEvent');
			})
		},
		methods: {
      backPage(){
        uni.redirectTo({
          url: '../index/index'
        });
      },
      timeFormatMethod(time) {
        if (time == null || time == undefined || time == '') {
          return '';
        }
        return time.substring(time.length-3, time.length - 8);
      },
			// 删除 营业时间
			del(sectionId) {
				this.$u.api.updateServerTimeSection({sectionId:sectionId,delFlag:'2'}).then(res => {
					console.log(res);
					if(res.code === 200) {
						this.initData();
					}
				})
			},
            //列表数据初始化
      initData(){
          var that = this;
          that.serverId = uni.getStorageSync('userInfo').serverId;
          if (that.serverId == undefined || that.serverId == null || that.serverId == '') {
            uni.reLaunch({
              url: '../login/indexChoice'
            })
          }else {
            this.$u.api.getServerTimeInfo({serverId:that.serverId}).then(res => {
              console.log(res);
              if (res.code === 200) {
                res.data.sectionList.forEach(item => {
                  item.isEnable = item.isEnable=='1' ? true : false
                })
                that.onlyShow = res.data.allowEdit==1?false:true;
                if(that.onlyShow){
                  uni.showToast({
                    title: '不允许编辑接单时间',
                    icon: 'none'
                  });
                }
                that.serverTime = res.data;
                that.activeTime =  that.serverTime.serverGrap
              }
            })
          }
        },
			// 点击 添加时间触发
			toAddTimeSettingPage() {
				// 跳转时间设置页面
				uni.navigateTo({
				    url: './timeSetting'
				});
			},
			// 点击 每一条进入编辑页面
			toTimeSettingPage(sectionId, weeks,item) {
				uni.navigateTo({
				    url: './timeSetting?sectionId=' + sectionId + '&weeks=' + weeks+ '&hoursFromString=' + this.timeFormatMethod(item.hoursFrom)+ '&hoursEndString=' + this.timeFormatMethod(item.hoursEnd)
				});
			},
      //启用/关闭此时间段
			enableChange(sectionId, isEnable) {
        var that = this;
        var weeksCommon = [];
        var flag = true;
        that.serverTime.sectionList.forEach(item => {
          if(item.isEnable){
            if(item.weeks != undefined && item.weeks != null && item.weeks != ''){
              item.weeks.split(",").forEach(weekItem => {
                if(weeksCommon.indexOf(weekItem)>=0){
                  flag = false;
                  return false;
                }else {
                  weeksCommon.push(weekItem)
                }
              });
            }
          }
        })
        if(!flag){
          uni.showToast({
            title: '每天只能设定一个时间段',
            icon: 'none'
          });
          that.initData();
          return;
        }
        var param ={
          sectionId:sectionId,
          isEnable:isEnable ? "1" : "0",
        }
        this.$u.api.updateServerTimeSection(param).then(res => {
          if (res.code === 200) {

          }else {
            uni.showToast({
              title: '修改失败',
              icon: 'none'
            });
          }
        })
			},
      //选择间隔
      confirm() {
          this.timeSlotShow = false
          this.serverTime.serverGrap = this.activeTime
          this.updateServerTime();
      },
      //停止接单
      updateServerTime() {
        var that = this;
        var param ={
          serverId:that.serverId,
          stopOrder:that.serverTime.stopOrder ? "1" : "0",
          serverGrap:that.serverTime.serverGrap,
        }
        this.$u.api.updateServerTimeInfo(param).then(res => {
          if (res.code === 200) {

          }else {
            uni.showToast({
              title: '修改失败',
              icon: 'none'
            });
          }
        })
      }

		}
	}
</script>

<style lang="less" scoped>
	.item-box {
		margin-bottom: 15rpx;
	}
	.uni-swipe_button {
		border-radius: 0 15rpx 15rpx 0;
	}
	.container {
		font-size: 25rpx;
		line-height: 24rpx;
	}
	.setting-info {
        height: 100rpx;
        border-radius: 15rpx;
        margin-bottom: 15rpx;
        padding: 0 16rpx 0 30rpx;
    }

	.base-info {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 15rpx 0 0 15rpx;
		width: 100%;
	}

	.hours-weeks-class {
		width: 85%;
	}

	.is-enable-class {
		width: 15%;
	}

	.hours-class {
		margin-left: 10rpx;
		margin-bottom: 20rpx;
		color: #111;
		font-size: 30rpx;
		line-height: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;


	}

	.weeks-class {
		font-size: 28rpx;
		margin-left: 10rpx;
		margin-top: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.title {
        height: 100rpx;
        border-bottom: 2rpx solid #eee;
    }
    .time-box {
        padding-top: 36rpx;
        padding-bottom: 150rpx;
        padding-left: 30rpx;
        .time-item {
            width: 150rpx;
            height: 98rpx;
            line-height: 98rpx;
            text-align: center;
            background: #FAFAFA;
            border-radius: 8rpx;
            border: 2rpx solid #E3E3E3;
            margin-right: 30rpx;
            margin-top: 40rpx;
        }
        .active {
            background: #FFF4F1;
            border: 2rpx solid #fc6035;
            color: #fc6035;
        }
    }

    .sub {
        width: 600rpx;
        height: 90rpx;
        line-height: 90rpx;
        background: #FC6035;
        box-shadow: 0rpx 5rpx 14rpx 0rpx #EB4553;
        border-radius: 45rpx;
        margin-left: 75rpx;
    }
    span {
      display: inline-block;
    }

</style>
