<template>
	<page-meta>
		<navigation-bar :title="$tt('cron.index.464657-11')" title-align="center" background-color="#F1F3F9"
			front-color="#000000">
		</navigation-bar>
	</page-meta>

	<view class="scene-timing-wrap">
		<view class="container-wrap">
			<view class="form-wrap">
				<!-- <u-sticky bgColor="#FFF" customStyle="border-bottom:1px solid #eee;border-radius:20rpx"> -->
				<u-tabs :list="expressList" lineHeight="2" :duration="100" @click="tabClick"></u-tabs>
				<!-- </u-sticky> -->
				<view class="form-item-wrap" v-if="tabIndex==0">
					<CrontabSecond @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
						ref="cronsecond" />
				</view>
				<view class="form-item-wrap" v-if="tabIndex==1">
					<CrontabMin @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
						ref="cronsecond" />
				</view>
				<view class="form-item-wrap" v-if="tabIndex==2">
					<CrontabHour @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
						ref="cronsecond" />
				</view>
				<view class="form-item-wrap" v-if="tabIndex==3">
					<CrontabDay @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
						ref="cronsecond" />
				</view>
				<view class="form-item-wrap" v-if="tabIndex==4">
					<CrontabMonth @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
						ref="cronsecond" />
				</view>
				<view class="form-item-wrap" v-if="tabIndex==5">
					<CrontabWeek @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
						ref="cronsecond" />
				</view>
				<view class="form-item-wrap" v-if="tabIndex==6">
					<CrontabYear @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj"
						ref="cronsecond" />
				</view>
			</view>
			<div class="popup-main">
				<div class="popup-result" style="border-top: 1px solid #ccc;">
					<p class="title">{{$tt('cron.index.464657-7')}}</p>
					<uni-table :border="true" stripe>
						<uni-tr>
							<!-- 表头 -->
							<uni-th v-for="(title, index) in tabTitles" :key="index" width="40">{{ title }}</uni-th>
							<uni-th>{{$tt('cron.index.464657-8')}}</uni-th>
						</uni-tr>
						<uni-tr>
							<!-- 数据行 -->
							<uni-td>
								<span>{{ crontabValueObj.second }}</span>
							</uni-td>
							<uni-td>
								<span>{{ crontabValueObj.min }}</span>
							</uni-td>
							<uni-td>
								<span>{{ crontabValueObj.hour }}</span>
							</uni-td>
							<uni-td>
								<span>{{ crontabValueObj.day }}</span>
							</uni-td>
							<uni-td>
								<span>{{ crontabValueObj.month }}</span>
							</uni-td>
							<uni-td>
								<span>{{ crontabValueObj.week }}</span>
							</uni-td>
							<uni-td>
								<span>{{ crontabValueObj.year }}</span>
							</uni-td>
							<uni-td>
								<span>{{ crontabValueString }}</span>
							</uni-td>
						</uni-tr>
					</uni-table>
				</div>
			</div>
			<div class="popup-main">
				<CrontabResult :ex="crontabValueString"></CrontabResult>
			</div>
			<view class="btn-wrap" style="margin-top:20rpx;display:flex;">
				<u-button :customStyle="{ height: '96rpx',marginLeft:'5rpx', color: '#3378FE', borderRadius: '10rpx' }"
					size="normal" :plain="true" :text="$tt('common.confirm')" @click="submitFill"></u-button>
				<u-button
					:customStyle="{ height: '96rpx',marginRight:'5rpx', color: '#000', borderRadius: '10rpx',marginLeft:'10rpx' }"
					size="normal" :plain="true" :text="$tt('cron.index.464657-10')" @click="clearCron"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { navigateBackTo } from '@/utils/common.js';
	import CrontabSecond from './cron/second.vue';
	import CrontabMin from './cron/min.vue';
	import CrontabHour from './cron/hour.vue';
	import CrontabDay from './cron/day.vue';
	import CrontabMonth from './cron/month.vue';
	import CrontabWeek from './cron/week.vue';
	import CrontabYear from './cron/year.vue';
	import CrontabResult from './cron/result.vue';

	export default {
		components: {
			CrontabSecond,
			CrontabMin,
			CrontabHour,
			CrontabDay,
			CrontabMonth,
			CrontabWeek,
			CrontabYear,
			CrontabResult,
		},
		data() {
			return {
				type: 'trigger',
				editIndex: null, // null 代表新增
				isTimer: false, // 时间
				isRepeat: false, // 星期
				tabIndex: 0,
				//秒
				radioValue: 1,
				workday: 1,
				cycle01: 1,
				cycle02: 2,
				average01: 1,
				average02: 1,
				radioValue1: 1,
				selectedValue: null, // 选中的值  
				options: [], // 选择框的选项  
				checkboxList: [],
				resultList: [],
				isScenePage: 1, //是否为场景页定时，1为场景，0为设备定时
				checkNum: this.$options.propsData.check,
				form: {
					time: uni.$u.timeFormat(new Date(), 'hh:MM'),
					repeat: this.$tt('sceneTiming.everyDay'),
					isAdvance: 0,
					cronExpression: `0 ${uni.$u.timeFormat(new Date(),'MM')} ${uni.$u.timeFormat(new Date(),'hh')} ? * 1,2,3,4,5,6,7`,
				},
				tabTitles: ['秒', '分钟', '小时', '日', '月', '周', '年'],
				tabActive: 0,
				myindex: 0,
				crontabValueObj: {
					second: '*',
					min: '*',
					hour: '*',
					day: '*',
					month: '*',
					week: '?',
					year: '',
				},
				expressList: [{
					id: '0',
					name: '秒',
				}, {
					id: '1',
					name: '分钟',
				}, {
					id: '2',
					name: '小时'
				}, {
					id: '3',
					name: '日'
				}, {
					id: '4',
					name: '月'
				}, {
					id: '5',
					name: '周'
				}, {
					id: '6',
					name: '年'
				}],
				rules: {
					time: {
						type: 'string',
						required: true,
						message: this.$tt('sceneTiming.selectTime'),
						trigger: ['blur', 'change']
					},
					repeat: {
						type: 'string',
						required: true,
						message: this.$tt('sceneTiming.selectWeek'),
						trigger: ['blur', 'change']
					},
				},
				repeatValue: [1, 2, 3, 4, 5, 6, 7],
			};

		},
		mounted() {},

		computed: {
			// 计算两个周期值
			cycleTotal: function() {
				const cycle01 = this.checkNum(this.cycle01, 1, 30)
				const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 2, 31, 31)
				return cycle01 + '-' + cycle02;
			},
			// 计算平均用到的值
			averageTotal: function() {
				const average01 = this.checkNum(this.average01, 1, 30)
				const average02 = this.checkNum(this.average02, 1, 31 - average01 || 0)
				return average01 + '/' + average02;
			},
			// 计算工作日格式
			workdayCheck: function() {
				const workday = this.checkNum(this.workday, 1, 31)
				return workday;
			},
			// 计算勾选的checkbox值合集
			checkboxString: function() {
				let str = this.checkboxList.join();
				return str == '' ? '*' : str;
			},
			crontabValueString: function() {
				let obj = this.crontabValueObj;
				let str = obj.second + ' ' + obj.min + ' ' + obj.hour + ' ' + obj.day + ' ' + obj.month + ' ' + obj
					.week + (obj.year == '' ? '' : ' ' + obj.year);
				return str;
			},
		},
		onLoad(options) {
			this.isScenePage = Number(options.isScenePage);
			console.log(options);
		},

		methods: {
			// 单击选显卡
			tabClick(item) {
				this.tabIndex = item.index;
			},

			updateCrontabValue(name, value, from) {
				'updateCrontabValue',
				name,
				value,
				from;
				this.crontabValueObj[name] = value;
				if (from && from !== name) {
					console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
					this.changeRadio(name, value);
				}
			},
			// 赋值到组件
			changeRadio(name, value) {
				let arr = ['second', 'min', 'hour', 'month'],
					refName = 'cron' + name,
					insValue;

				if (!this.$refs[refName]) return;

				if (arr.includes(name)) {
					if (value === '*') {
						insValue = 1;
					} else if (value.indexOf('-') > -1) {
						let indexArr = value.split('-');
						isNaN(indexArr[0]) ? (this.$refs[refName].cycle01 = 0) : (this.$refs[refName].cycle01 = indexArr[
							0]);
						this.$refs[refName].cycle02 = indexArr[1];
						insValue = 2;
					} else if (value.indexOf('/') > -1) {
						let indexArr = value.split('/');
						isNaN(indexArr[0]) ? (this.$refs[refName].average01 = 0) : (this.$refs[refName].average01 =
							indexArr[0]);
						this.$refs[refName].average02 = indexArr[1];
						insValue = 3;
					} else {
						insValue = 4;
						this.$refs[refName].checkboxList = value.split(',');
					}
				} else if (name == 'day') {
					if (value === '*') {
						insValue = 1;
					} else if (value == '?') {
						insValue = 2;
					} else if (value.indexOf('-') > -1) {
						let indexArr = value.split('-');
						isNaN(indexArr[0]) ? (this.$refs[refName].cycle01 = 0) : (this.$refs[refName].cycle01 = indexArr[
							0]);
						this.$refs[refName].cycle02 = indexArr[1];
						insValue = 3;
					} else if (value.indexOf('/') > -1) {
						let indexArr = value.split('/');
						isNaN(indexArr[0]) ? (this.$refs[refName].average01 = 0) : (this.$refs[refName].average01 =
							indexArr[0]);
						this.$refs[refName].average02 = indexArr[1];
						insValue = 4;
					} else if (value.indexOf('W') > -1) {
						let indexArr = value.split('W');
						isNaN(indexArr[0]) ? (this.$refs[refName].workday = 0) : (this.$refs[refName].workday = indexArr[
							0]);
						insValue = 5;
					} else if (value === 'L') {
						insValue = 6;
					} else {
						this.$refs[refName].checkboxList = value.split(',');
						insValue = 7;
					}
				} else if (name == 'week') {
					if (value === '*') {
						insValue = 1;
					} else if (value == '?') {
						insValue = 2;
					} else if (value.indexOf('-') > -1) {
						let indexArr = value.split('-');
						isNaN(indexArr[0]) ? (this.$refs[refName].cycle01 = 0) : (this.$refs[refName].cycle01 = indexArr[
							0]);
						this.$refs[refName].cycle02 = indexArr[1];
						insValue = 3;
					} else if (value.indexOf('#') > -1) {
						let indexArr = value.split('#');
						isNaN(indexArr[0]) ? (this.$refs[refName].average01 = 1) : (this.$refs[refName].average01 =
							indexArr[0]);
						this.$refs[refName].average02 = indexArr[1];
						insValue = 4;
					} else if (value.indexOf('L') > -1) {
						let indexArr = value.split('L');
						isNaN(indexArr[0]) ? (this.$refs[refName].weekday = 1) : (this.$refs[refName].weekday = indexArr[
							0]);
						insValue = 5;
					} else {
						this.$refs[refName].checkboxList = value.split(',');
						insValue = 6;
					}
				} else if (name == 'year') {
					if (value == '') {
						insValue = 1;
					} else if (value == '*') {
						insValue = 2;
					} else if (value.indexOf('-') > -1) {
						insValue = 3;
					} else if (value.indexOf('/') > -1) {
						insValue = 4;
					} else {
						this.$refs[refName].checkboxList = value.split(',');
						insValue = 5;
					}
				}
				this.$refs[refName].radioValue = insValue;
			},
			// 表单选项的子组件校验数字格式（通过-props传递）
			checkNumber(value, minLimit, maxLimit) {
				// 检查必须为整数
				value = Math.floor(value);
				if (value < minLimit) {
					value = minLimit;
				} else if (value > maxLimit) {
					value = maxLimit;
				}
				return value;
			},
			// 填充表达式
			submitFill() {
				const crontabValueString = this.crontabValueString;
				const type = uni.getStorageSync('type');
				const editIndex = uni.getStorageSync('editIndex');
				const jobId = uni.getStorageSync('jobId');
				if (this.isScenePage == 0) {
					uni.$u.route('/pagesA/home/device/timing/detail', {
						jobId,
						crontabValueString
					});
				} else {
					uni.$u.route('/pagesA/scene/timing/index', {
						type,
						editIndex,
						crontabValueString
					});
				}

			},
			clearCron() {
				// 还原选择项
				('准备还原');
				this.crontabValueObj = {
					second: '*',
					min: '*',
					hour: '*',
					day: '*',
					month: '*',
					week: '?',
					year: '',
				};
				for (let j in this.crontabValueObj) {
					this.changeRadio(j, this.crontabValueObj[j]);
				}
			},
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: $uni-bg-color-grey;
	}
</style>
<style lang="scss" scoped>
	.scene-timing-wrap {
		padding-bottom: 10rpx;

		.container-wrap {
			.form-wrap {
				background: #fff;
				margin: 30rpx;
				padding: 20rpx;
				border-radius: 20rpx;

				.form-item-wrap {
					margin: 10px 20rpx;
					font-size: 14px;
				}
			}

			.btn-wrap {
				margin: 30rpx 20rpx;
			}
		}

		.other {
			.repeat-popup-wrap {
				padding: 30rpx;

				.nav {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					margin-bottom: 34rpx;
				}

				.radio-group-wrap {
					background-color: #fff;
					border-radius: 10rpx;

					.radio-wrap {
						padding: 32rpx;

						&:not(:last-child) {
							border-bottom: 1rpx solid #F1F2F5;
						}
					}
				}
			}
		}
	}

	.popup-main {
		position: relative;
		margin: 30rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		font-size: 12px;
		overflow: hidden;
	}

	.popup-title {
		overflow: hidden;
		line-height: 34px;
		padding-top: 6px;
		background: #f2f2f2;
	}

	.popup-result {
		box-sizing: border-box;
		line-height: 24px;
		margin: 25px auto;
		padding: 15px 10px 10px;
		// border-top: 1px solid #ccc;
		position: relative;
	}

	.popup-result .title {
		position: absolute;
		top: -18px;
		left: 50%;
		width: 140px;
		font-size: 14px;
		margin-left: -70px;
		text-align: center;
		line-height: 30px;
		background: #fff;
	}

	.popup-result table {
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}

	.popup-result table span {
		display: block;
		width: 100%;
		font-family: arial;
		line-height: 30px;
		height: 30px;
		white-space: nowrap;
		overflow: hidden;
		border: 1px solid #e8e8e8;
	}

	.popup-result-scroll {
		font-size: 12px;
		line-height: 24px;
		height: 10em;
		overflow-y: auto;
	}
</style>