<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.timer')" 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--form :model="form" ref="form" :rules="rules" errorType="toast" labelPosition="left" labelWidth="80">
					<view class="form-item-wrap">
						<u-form-item prop="time" :label="$tt('sceneTiming.time')"
							@click="form.isAdvance !== 1 && (isTimer = true)">
							<u--input v-model="form.time" border="none" inputAlign="right"
								:placeholder="$tt('sceneTiming.selectTime')" disabledColor="#fff" disabled
								:customStyle="{ marginRight: '20rpx', pointerEvents: 'none'  }" />
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item prop="repeat" :label="$tt('sceneTiming.again')" :disabled="form.isAdvance==1"
							@click="form.isAdvance !== 1 && (isRepeat = true)">
							<u--input v-model="form.repeat" border="none" inputAlign="right"
								:placeholder="$tt('sceneTiming.selectWeek')" disabledColor="#fff" disabled
								:customStyle="{ marginRight: '20rpx', pointerEvents: 'none' }" />
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item label="CRON">
							<template slot="right">
								<u-radio-group v-model="form.isAdvance">
									<u-radio :customStyle="{marginRight: '30rpx'}" :label="$tt('sceneTiming.default')"
										:name="0"></u-radio>
									<u-radio :customStyle="{marginRight: '10rpx'}" :label="$tt('sceneTiming.auto')"
										:name="1"></u-radio>
								</u-radio-group>
							</template>
						</u-form-item>
					</view>
					<view class="form-item-wrap">
						<u-form-item>
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="form.cronExpression" :placeholder="$tt('sceneTiming.inputCRON')" disabled>
							<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input v-model="form.cronExpression" :placeholder="$tt('sceneTiming.inputCRON')"
									disabled>
								<!-- #endif -->
									<template slot="suffix">
										<u-button :text="$tt('sceneTiming.expression')" icon="calendar" type="primary"
											size="mini" :disabled="form.isAdvance==0" @click="genExpression"></u-button>
									</template>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</u-form-item>
					</view>
				</u--form>
			</view>
			<view class="btn-wrap">
				<u-button :customStyle="{ height: '96rpx', color: '#3378FE', borderRadius: '10px' }" size="normal"
					:plain="true" :text="$tt('common.save')" @click="handleSave"></u-button>
			</view>
		</view>
		<view class="other">
			<!-- 选择时间 -->
			<u-datetime-picker :show="isTimer" v-model="form.time" mode="time" @cancel="isTimer=false"
				@close="isTimer=false" @confirm="handleDatetimeConfirm"></u-datetime-picker>

			<!-- 星期 -->
			<u-popup :show="isRepeat" :round="5" mode="bottom" bgColor="#eef3f7" :closeOnClickOverlay="true"
				@close="isRepeat = false">
				<view class="repeat-popup-wrap">
					<view class="nav">
						<text @click="isRepeat = false">{{$tt('common.cancel')}}</text>
						<text @click="handleRepeatConfirm">{{$tt('common.confirm')}}</text>
					</view>
					<view class="radio-group-wrap">
						<u-checkbox-group v-model="repeatValue" :borderBottom="false" placement="column"
							iconPlacement="right">
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.monday')" :name="1" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.tuesday')" :name="2" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.wednesday')" :name="3" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.thursday')" :name="4" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.friday')" :name="5" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.saturday')" :name="6" iconSize="16"></u-checkbox>
							</view>
							<view class="radio-wrap">
								<u-checkbox :label="$tt('sceneTiming.sunday')" :name="7" iconSize="16"></u-checkbox>
							</view>
						</u-checkbox-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import { navigateBackTo } from '@/utils/common.js';

	export default {
		data() {
			return {
				type: 'trigger',
				editIndex: null, // null 代表新增
				isTimer: false, // 时间
				isRepeat: false, // 星期
				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`,
				},
				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],
			};
		},
		onLoad(options) {
			const { type, editIndex, crontabValueString } = options;
			this.type = type;
			this.editIndex = Number(editIndex);
			if (crontabValueString) {
				this.form.isAdvance = 1;
				this.form.cronExpression = crontabValueString;
			} else {
				if (!Number.isNaN(this.editIndex) && this.editIndex !== null) {
					const { cronExpression } = uni.getStorageSync('trigger');
					const time = cronExpression.substring(5, 7) + ':' + cronExpression.substring(2, 4);
					const repeatValue = cronExpression.substring(12).split(',').map(Number);
					const repeat = this.getRepeatName(repeatValue)
					this.form = { ...this.form, time, repeat, cronExpression };
					this.repeatValue = repeatValue;
				}
			}
		},
		methods: {
			// 时间选择
			handleDatetimeConfirm() {
				this.$nextTick(() => {
					this.gentCronExpression();
				})
				this.isTimer = false;
			},
			// 星期选择
			handleRepeatConfirm() {
				const repeat = this.getRepeatName(this.repeatValue);
				this.form.repeat = repeat;
				this.gentCronExpression();
				this.isRepeat = false;
			},
			// 获取repeat名称
			getRepeatName(repeatValue) {
				const list = repeatValue.map(item => {
					if (item === 1) {
						return this.$tt('sceneTiming.monday')
					} else if (item === 2) {
						return this.$tt('sceneTiming.tuesday')
					} else if (item === 3) {
						return this.$tt('sceneTiming.wednesday')
					} else if (item === 4) {
						return this.$tt('sceneTiming.thursday')
					} else if (item === 5) {
						return this.$tt('sceneTiming.friday')
					} else if (item === 6) {
						return this.$tt('sceneTiming.saturday')
					} else if (item === 7) {
						return this.$tt('sceneTiming.sunday')
					}
				})
				if (list.length === 7) {
					return this.$tt('sceneTiming.everyDay');
				} else {
					return list.join(',');
				}
			},
			// 生成cron表达式
			gentCronExpression() {
				let hour = '00';
				let minute = '00';
				if (this.form.time) {
					hour = this.form.time.substring(0, 2);
					minute = this.form.time.substring(3);
				}
				let week = '*';
				if (this.repeatValue.length > 0) {
					week = this.repeatValue.sort();
					week = week.map(weekNumber => {
						return (weekNumber % 7) + 1;
					});
				}
				this.form.cronExpression = '0 ' + minute + ' ' + hour + ' ? * ' + week;
			},
			//自定义生成表达式
			genExpression() {
				uni.setStorageSync('type', this.type);
				uni.setStorageSync('editIndex', this.editIndex);
				uni.$u.route('/pagesA/scene/timing/express');
			},
			// 保存
			handleSave() {
				this.$refs.form.validate().then(respon => {
					let action = uni.getStorageSync(this.type);
					const { cronExpression } = this.form;
					action = { ...action, cronExpression };
					uni.setStorageSync(this.type, action);
					// 更新或者插入新的触发或者执行
					let { triggers, actions, ...res } = uni.getStorageSync('sceneData');

					if (Number.isNaN(this.editIndex) || this.editIndex === null) {
						if (this.type === 'trigger') {
							triggers.push(action);
						} else {
							actions.push(action);
						}
						uni.setStorageSync('sceneData', { triggers, actions, ...res });
					} else {
						if (this.type === 'trigger') {
							let list = triggers.map((item, i) => {
								if (i == this.editIndex) {
									return action
								} else {
									return item
								}
							});
							uni.setStorageSync('sceneData', { triggers: [...list], actions, ...res });
						} else {
							let list = actions.map((item, i) => {
								if (i == this.editIndex) {
									return action
								} else {
									return item
								}
							});
							uni.setStorageSync('sceneData', { triggers, actions: [...list], ...res });
						}
					}
					uni.setStorageSync('callback', true);
					navigateBackTo('/pagesA/scene/detail');
				})
			}
		}
	};
</script>

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

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

				.form-item-wrap {
					padding: 4rpx 20rpx;
				}
			}

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

		.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;
						}
					}
				}
			}
		}
	}
</style>