<template>
	<view class="content">
		<view class="box-pack-between ft32 item flex-y-center flex-grow-1" style="margin: 0;">
			<text>模式设置</text>
			<view class="ft24 item-off flex">
				<view class="flex-grow-1 flex-center" @click="bindcheck(item.type)" :data-index="index" v-for="(item,index) of switch_list"
				 :key="index" :class="item.type==moshi?'act':''">{{item.name}}</view>
			</view>
		</view>

		<block v-if="moshi==2">

			<view class="box-pack-between ft32 item flex-y-center flex-grow-1" style="margin: 0;">
				<text>展示方式</text>
				<view class="ft24 item-off flex">
					<view class="flex-grow-1 flex-center" @click="bindtime(item.type)" :data-index="index" v-for="(item,index) of switch_time"
					 :key="index" :class="item.type==moshi_type?'act':''">{{item.name}}</view>
				</view>
			</view>

			<view class="item" v-if="moshi_type==1&&list_way.length>0">
				<view class="por list_way-item" v-if="item.name&&item.checked" v-for="(item,index) of list_way" :key='index'>
					<view class="flex-y-center">
						<image class="list_way-item-del" @click="delScene(index)" src="../../static/images/del.png"></image>
						<text class="">{{item.name}}</text>
					</view>
				</view>
			</view>

			<view class="item-bg" v-if="moshi_type==2">
				<view class="mgr57">
					<view class="box-pack-between" @click="getll">
						<text class="item-bg-32">默认流量池</text>
						<text class="iconfont icon-prev"></text>
					</view>
					<view style="margin-top: 20rpx;">
						<view class="por list_way-item" style="background: #FFFFFF;" v-if="item.name&&item.checked" v-for="(item,index) of list_way"
						 :key='index'>
							<view class="flex-y-center">
								<image class="list_way-item-del" @click="delScene(index)" :data-index='index' src="../../static/images/del.png"></image>
								<text class="">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="mgr40">
					<view class="item-bg-32 box-pack-between" style="padding-bottom: 20rpx;">
						<text>优先级</text>
						<text class="enit" @click="enit" v-if="rule_val.length>0">重新编辑</text>
					</view>
					<view v-if="rule_val.length>0" class="main-home">
						<view class="main-home-deta" v-for="(item,index) of rule_val" :key='index'>
							<view class="box-pack-between">
								<text class="text-1 wd80px">{{item.type==2?'周':item.type==3?'月':'天'}}</text>
								<view class="text-1 wd180px"> {{item.type==1?item.val_name:item.val}}</view>
								<view class="text-1 wd200px">{{item.powerpool_name}}</view>
							</view>
						</view>
					</view>
					<block v-else>
						<dragSort :list="deta" :props="props" @bindlabel="bindTimeChange" @change="onDragSortChange"></dragSort>
					</block>
				</view>

				<view class="main-home" v-if="deta_index=='天'">
					<view class="main-home-deta" v-for="(item,index) of arr_time" :key='index'>
						<view class="box-pack-between">
							<text>{{item.time_name}}</text>
							<text @click="addfn">{{item.fnname}}</text>
							<image class="del" @click="del(index)" :data-title="item" src="../../static/images/del.png" mode=""></image>
						</view>
					</view>

					<view class="ft26 flex-center" @click="addtime">
						<view class="main-item">+添加时间 </view>
					</view>
				</view>

				<view class="main-home" v-if="deta_index=='周'">
					<view class="main-home-deta" v-for="(item,index) of week" :key='index'>
						<view class="box-pack-between">
							<text>{{item.week_name}}</text>
							<text @click="addfn">{{item.fnname}}</text>
							<image class="del" @click="del(index)" :data-title="item" src="../../static/images/del.png" mode=""></image>
						</view>
					</view>
					<view class="ft26 flex-center" @click="addtime">
						<view class="main-item">+添加星期</view>
					</view>
				</view>

				<view class="main-home" v-if="deta_index=='月'">
					<view class="main-home-deta" v-for="(item,index) of month" :key='index'>
						<view class="box-pack-between">
							<text>{{item.month_name}}</text>
							<text @click="addfn">{{item.fnname}}</text>
							<image class="del" @click="del(index)" :data-title="item" src="../../static/images/del.png" mode=""></image>
						</view>
					</view>
					<view class="ft26 flex-center" @click="addtime">
						<view class="main-item">+添加日期 </view>
					</view>
				</view>

			</view>
		</block>

		<!-- 授权 -->
		<zx-uni-popup ref="popup" type="bottom">
			<view class="shoot">
				<view class="flex shoot-header box-pack-between">
					<text class="" @click="cancel">取消</text>
					<text class="confirm" @click="confirm">确认</text>
				</view>
				<view class="flex">
					<block v-if="deta_index=='天'">
						<scroll-view scroll-y class="flex-grow-1 hg400">
							<view class="header-item flex-center" :class="act_index1==index?'act':''" @click="choise1" :data-title="item"
							 :data-index="index" :key="index" v-for="(item,index) of time_list1">
								{{item}}
							</view>
						</scroll-view>
						<scroll-view scroll-y class="flex-grow-1 hg400">
							<view class="header-item flex-center" @click="choise2" :data-title="item" :data-index="index" :class="act_index2==index?'act':''"
							 :key="index" v-for="(item,index) of time_list2">
								{{item}}
							</view>
						</scroll-view>
					</block>

					<block v-if="deta_index=='周'">
						<scroll-view scroll-y class="flex-grow-1 hg400">
							<view class="header-item flex-center" @click="choise1" :data-num="item.num" :data-title="item.name" :data-index="index"
							 :class="act_index1==index?'act':''" :key="index" v-for="(item,index) of week1">
								{{item.name}}
							</view>
						</scroll-view>
					</block>

					<block v-if="deta_index=='月'">
						<scroll-view scroll-y class="flex-grow-1 hg400">
							<view class="header-item-month" @click="choise1" :data-num="item.num" :data-title="item.name" :data-index="index"
							 :class="act_index1==index?'act':''" :key="index" v-for="(item,index) of month1">
								<view class="flex-center">
									{{item.name}}
								</view>
							</view>
						</scroll-view>
					</block>

					<scroll-view :class="deta_index=='月'?'wd40':''" scroll-y class="flex-grow-1 hg400" bindscrolltolower="bindscrolltolower">
						<view class="header-item text-1" @click="choise3" :data-title="item.name" :data-id="item.id" :data-index="index"
						 :class="act_index3==index?'act':''" :key="index" v-for="(item,index) of list">
							{{item.name}}
						</view>
					</scroll-view>

				</view>
			</view>
		</zx-uni-popup>

	</view>
</template>

<script>
	import dragSort from '../../components/drag-sort/index.vue'
	import zxUniPopup from '@/components/zx-uni-popup/uni-popup.vue';
	export default {
		components: {
			dragSort,
			zxUniPopup,
		},

		props: {
			list_way: Array,
			thismoshi: Number,
			this_moshi_type: Number,
			rule_arr_val: Array,
		},

		watch: {
			thismoshi: {
				deep: true, // 深度监听
				handler(newVal, oldVal) {
					this.moshi = newVal;
				}
			},
			this_moshi_type: {
				deep: true,
				handler(newVal, oldVal) {
					this.moshi_type = newVal;
				}
			},
			rule_arr_val: {
				deep: true,
				handler(newVal, oldVal) {
					var rule_arr = [];
					for (var i of newVal) {
						if (i.type == 1) {
							var val_arr = i.val.split(",");
							var pp = val_arr[0] + ':00' + '-' + val_arr[1] + ':00';
							i.val_name = pp;
						}
						rule_arr.push(i.type + '-' + i.val + '-' + i.powerpool_id);
					}
					this.rule_val = newVal;
					this.$emit('confirm', rule_arr.join(";"))
				}
			},
		},

		data() {
			return {
				rule_val: [],
				moshi: this.thismoshi,
				moshi_type: this.this_moshi_type,
				switch_list: [{
					name: "普通模式",
					type: 1,
				}, {
					name: "高级模式",
					type: 2,
				}, ],
				switch_time: [{
						name: "时间",
						type: 2,
					},
					{
						name: "轮询",
						type: 1,
					},
				],

				props: {
					label: 'label'
				},

				deta: [{
						label: "天"
					},
					{
						label: "周"
					},
					{
						label: "月"
					},
				],
				deta_index: -1,

				time_list1: [
					"01:00",
					"02:00",
					"03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
					"12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",
					"24:00",
				],

				time_list2: [
					"01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
					"12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",
					"24:00",
				],

				week: [],
				week1: [{
						name: "星期日",
						num: 7,
					},
					{
						name: "星期一",
						num: 1,
					}, {
						name: "星期二",
						num: 2,
					}, {
						name: "星期三",
						num: 3,
					}, {
						name: "星期四",
						num: 4,
					}, {
						name: "星期五",
						num: 5,
					}, {
						name: "星期六",
						num: 6,
					}
				],
				month: [],
				month1: [{
						name: 1,
					}, {
						name: 2
					}, {
						name: 3,
					}, {
						name: 4
					}, {
						name: 5,
					}, {
						name: 6
					}, {
						name: 7,
					}, {
						name: 8
					}, {
						name: 9,
					}, {
						name: 10
					}, {
						name: 11,
					}, {
						name: 12
					}, {
						name: 13,
					},
					{
						name: 14
					}, {
						name: 15,
					}, {
						name: 16
					}, {
						name: 17,
					}, {
						name: 18
					}, {
						name: 19,
					}, {
						name: 20
					}, {
						name: 21,
					}, {
						name: 22
					}, {
						name: 23,
					}, {
						name: 24
					}, {
						name: 25,
					}, {
						name: 26
					}, {
						name: 27,
					}, {
						name: 28
					}, {
						name: 29
					},
					{
						name: 30
					}, {
						name: 31
					},

				],
				act_index1: -1,
				act_index2: -1,
				act_index3: -1,
				time1: "",
				time2: "",
				fnname: "",
				fnid: "",
				arr_time: [],
				time_arr: [],
				list: [],
				// moshi: 1,
				// moshi_type: 2,
				powerpool_id: "",
				level: "",
				// rule: "",
				page: 1,
				rule: [],
				month_name: "",
				deta: [{
					label: "天",
					level: 1,
				}, {
					label: "周",
					level: 2
				}, {
					label: "月",
					level: 3
				}, ],
				rule_arr: [],
			}
		},

		computed: {

		},

		onShow(e) {
			
		},

		onLoad() {

		},

		methods: {

			enit(e) {
				this.rule_val = [];
				this.$emit('confirm', "")
			},

			onDragSortChange(e) {
				var array = this.deta;
				var label = e.data;
				for (var i in array) {
					if (array[i].label == e.data.label) {
						array.splice(i, 1)
					}
				}
				var arr = array;
				if (e.frontData) {
					for (var i in arr) {
						if (arr[i].label == e.frontData.label) {
							arr.splice(Number(i) + 1, 0, label);
						}
					}
					this.deta = arr;
				}
				if (!e.frontData) {
					array.unshift(label)
					this.deta = array;
				}
				for (var i of this.deta) {
					if (i.label == '天') {
						i.level = 1
					}
					if (i.label == '周') {
						i.level = 2
					}
					if (i.label == '月') {
						i.level = 3
					}
				}
				this.$emit('bindlevel', this.deta)
			},


			addfn(e) {

			},

			bindscrolltolower(e) {
				this.http();
			},

			http() {
				this.request({
					url: "powerpool/poollists",
					data: {
						page: this.page,
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code === '200') {
						for (var i of res.data) {
							i.checked = false;
						}
						this.list = this.list.concat(res.data);
						this.page = this.page + 1;
					}
				})
			},

			del(index) {
				if (this.deta_index == '天') {
					this.arr_time.splice(index, 1)
				}
				if (this.deta_index == '周') {
					this.week.splice(index, 1)
				}
				if (this.deta_index == '月') {
					this.month.splice(index, 1);
				}
				this.publue()
			},


			delScene(index) {
				this.$emit('ondel', index)
			},

			cancel() {
				this.$refs.popup.close();
			},

			addtime(e) {
				this.page = 1;
				this.list = [];
				this.http();
				this.$refs.popup.open();
			},

			choise1(e) {
				let index = e.currentTarget.dataset.index,
					title = e.currentTarget.dataset.title;
				this.time1 = title;
				this.act_index1 = index;
				if (this.deta_index == '周') {
					var num = e.currentTarget.dataset.num;
					this.num = num;
					this.week_name = title;
				}

				if (this.deta_index == '月') {
					this.month_name = title;
				}

			},

			choise2(e) {
				let index = e.currentTarget.dataset.index,
					title = e.currentTarget.dataset.title;
				this.time2 = title;
				this.act_index2 = index;
			},

			choise3(e) {
				let id = e.currentTarget.dataset.id,
					index = e.currentTarget.dataset.index,
					title = e.currentTarget.dataset.title;
				this.fnname = title;
				this.fnid = id;
				this.act_index3 = index;
			},

			confirm(e) {
				if (!this.fnid) {
					uni.showToast({
						title: "请选择记录",
						icon: 'none'
					})
					return
				}
				if (this.deta_index == '周') {
					this.week.push({
						level: 2,
						week_name: this.week_name,
						time: this.num,
						fnid: this.fnid,
						fnname: this.fnname,
					})
				} else if (this.deta_index == '月') {
					this.month.push({
						level: 3,
						month_name: this.month_name,
						fnid: this.fnid,
						fnname: this.fnname,
						time: this.month_name,
					})
				} else {
					var time_sting = parseInt(this.time1) + "," + parseInt(this.time2);
					var time = this.time1 + "-" + this.time2;
					this.arr_time.push({
						level: 1,
						time_name: time,
						time: time_sting,
						fnid: this.fnid,
						fnname: this.fnname,
					});
					//展示
					this.time_arr.push(time_sting);
					this.check_time(JSON.stringify(this.time_arr));
				}
				this.publue()
			},
			publue() {
				var arr3;
				if (this.deta[0].level == 1 && this.deta[1].level == 2 && this.deta[2].level == 3) {
					arr3 = [...this.arr_time, ...this.week, ...this.month];
				}

				if (this.deta[0].level == 1 && this.deta[1].level == 3 && this.deta[2].level == 2) {

					arr3 = [...this.arr_time, ...this.month, ...this.week];

				}

				if (this.deta[0].level == 2 && this.deta[1].level == 1 && this.deta[2].level == 3) {
					arr3 = [...this.week, ...this.arr_time, ...this.month];
				}
				if (this.deta[0].level == 2 && this.deta[1].level == 3 && this.deta[2].level == 1) {
					arr3 = [...this.week, ...this.month, ...this.arr_time];
				}

				if (this.deta[0].level == 3 && this.deta[1].level == 1 && this.deta[2].level == 2) {
					arr3 = [...this.month, ...this.arr_time, ...this.week];
				}

				if (this.deta[0].level == 3 && this.deta[1].level == 2 && this.deta[2].level == 1) {
					arr3 = [...this.month, ...this.week, ...this.arr_time];
				}
				var rule_arr = [];
				for (var i of arr3) {
					rule_arr.push(i.level + '-' + i.time + '-' + i.fnid);
				}
				// this.rule_arr = rule_arr.join(";");
				this.$emit('confirm', rule_arr.join(";"))
				this.$refs.popup.close();
			},


			check_time(arr) {
				this.request({
					url: "videofuneng/check_time",
					data: {
						time: arr,
					},
				}).then(res => {
					if (res.code === '200') {

					}
				}).catch(res => {
					this.arr_time.pop();
					this.time_arr.pop();
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			// 模式
			bindcheck(index) {
				this.moshi = index;
				this.$emit('oncheck', index)
			},

			// 优先级 天，
			bindTimeChange(index) {
				this.act_index1 = -1;
				this.act_index2 = -1;
				this.act_index3 = -1;
				this.time1 = "";
				this.time2 = "";
				this.fnname = "";
				this.fnid = "";
				this.deta_index = index;
			},

			getll() {
				this.$emit('onTime', 3)
			},

			bindtime(index) {
				this.moshi_type = index;
				this.$emit('onTime', index)
			},
		},
	}
</script>

<style>
	.item {
		padding: 32rpx 40rpx;
	}

	.wd80px {
		width: 80rpx;
		text-align: center;
	}

	.wd180px {
		width: 180rpx;
		text-align: center;
	}

	.wd200px {
		width: 200rpx;
		text-align: center;
	}

	.shoot {
		height: 500rpx;
		background: #FFFFFF;
	}

	.header-item {
		padding: 10rpx 0;
		/* height: 70rpx; */
		text-align: center;
	}

	.header-item-month {
		height: 70rpx;
		display: inline-block;
		width: 100rpx;
	}

	.header-item-month view {
		height: 100%;
	}

	.shoot .wd40 {
		width: 40%;
	}

	.hg400 {
		height: 400rpx;
	}

	.shoot-header {
		padding: 20rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.confirm {
		color: #007AFF;
	}

	.shoot .act {
		color: #007AFF;
	}

	.main-home {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.del {
		width: 32rpx;
		height: 32rpx;
	}

	.main-item {
		color: #3387ff;
		border: 2rpx solid #3387ff;
		padding: 6rpx 10rpx;
		margin: 0 auto;
		display: inline-block;
		border-radius: 4rpx;
	}

	.moshi_level .act {
		background: #3387ff;
		;
		color: #FFFFFF;
		border: 1rpx solid #3387ff;
	}

	.main-home-deta {
		margin-bottom: 20rpx;
	}

	.mgr40 {
		margin-bottom: 40rpx;
	}

	.enit {
		padding: 8rpx 10rpx;
		border: 1rpx solid #ccc;
		font-size: 22rpx;
	}

	.qr_content {
		padding: 0 40rpx;
	}

	.qr_content_img {
		display: inline-block;
		position: relative;
	}

	.qr_content_img .qr_content_img_li {
		margin-left: 20rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.qr_content_img_del {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.tr {
		text-align: right;
	}

	.pdr-20 {
		padding-right: 20rpx;
	}

	.item {
		padding: 32rpx 40rpx;
	}

	.upimg {
		width: 126rpx;
		height: 126rpx;
	}

	.add-home {
		color: #FFFFFF;
		width: 126rpx;
		height: 54rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
	}

	.item-bg {
		width: 670rpx;
		/* height: 298rpx; */
		background: #f6f8fe;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding: 36rpx 32rpx;
	}

	.item-del {
		width: 40rpx;
		height: 40rpx;
	}

	.mar64 {
		margin-bottom: 64rpx;
	}

	.item-bg .mar64:last-child {
		margin-bottom: 0rpx;
	}

	.hg200rpx {
		height: 100rpx;
	}

	.mgr57 {
		margin-bottom: 57rpx;
	}

	.item-bg-32 {
		margin-right: 32rpx;
	}

	.qrupimg {
		width: 80rpx;
		height: 80rpx;
	}

	.tips {
		font-size: 26rpx;
		color: #999;
	}
</style>
