<template>
	<view class="scene-warning-wrap">
		<u-sticky>
			<view class="nav-bar">
				<view class="left-wrap">
					<u-icon name="/static/scene/relation.png" size="22" @click="handleRelation"></u-icon>
				</view>
				<view class="right-wrap" @click="handleNextStep">{{$tt('product.next')}}</view>
			</view>
			<view class="tip-wrap">
				<u-alert type="warning" :description="$tt('sceneTiming.trigger')"></u-alert>
			</view>
		</u-sticky>
		<view class="container-wrap">
			<view class="radio-group-wrap">
				<u-radio-group v-model="warning" :borderBottom="false" placement="column" iconPlacement="right">
					<view class="radio-wrap">
						<u-radio :label="$tt('sceneTiming.alarm')" :name="4" iconSize="16"></u-radio>
					</view>
				</u-radio-group>
			</view>
		</view>
	</view>
</template>

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

	export default {
		data () {
			return {
				warning: null,
				editIndex: null, // null 代表新增
			};
		},
		onLoad (option) {
			const { editIndex } = option;
			this.editIndex = Number(editIndex);
			if (!Number.isNaN(this.editIndex) && this.editIndex !== null) {
				let { source } = uni.getStorageSync('action');
				this.warning = source;
			}
		},
		methods: {
			handleRelation () {
				uni.showToast({
					icon: 'none',
					title: this.$tt('sceneTiming.develop')
				});
			},
			// 下一步
			handleNextStep () {
				if (!this.warning) {
					uni.showToast({
						icon: 'none',
						title: this.$tt('sceneTiming.select')
					});
					return
				}
				let action = uni.getStorageSync('action');
				action = { ...action, source: this.warning };
				uni.setStorageSync('action', action);
				// 更新或者插入新的触发或者执行
				let { actions, ...res } = uni.getStorageSync('sceneData');
				if (Number.isNaN(this.editIndex) || this.editIndex === null) {
					actions.push(action);
					uni.setStorageSync('sceneData', { actions, ...res });
				} else {
					let list = actions.map((item, i) => {
						if (i == this.editIndex) {
							return action
						} else {
							return item
						}
					});
					uni.setStorageSync('sceneData', { actions: [...list], ...res });
				}
				uni.setStorageSync('callback', true);
				navigateBackTo('/pagesA/scene/detail');
			}
		}
	};
</script>

<style>
	page {
		height: 100%;
		background: #eef3f7;
	}
</style>
<style lang="scss" scoped>
	.scene-warning-wrap {
		.nav-bar {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 30rpx 0 30rpx;
			height: 74rpx;
			background: #eef3f7;

			.left-wrap {
				flex: 1;
			}

			.right-wrap {
				color: #486FF2;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}

		.tip-wrap {
			margin: 20rpx 30rpx
		}

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

				.radio-wrap {
					padding: 30rpx;

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