<template>
	<view class="content contentBg">

		<SubStep :steps="Status.steps.list" :height="'140rpx'" :curr="Status.steps.curr" @stepClick="stepClick">
		</SubStep>


		<view class="mainPanel" v-show="Status.steps.curr===0">
			<view class="main">
				<uni-easyinput maxlength="30" class="txteare" v-model="formData.name" :trim="true" placeholder="输入编组名称"
					type="textarea" autoHeight :inputBorder="false" :border="false"></uni-easyinput>
			</view>
			<button class="btnNext" :disabled="!formData.name" :class="{'active':formData.name}"
				@click="gotoStep(1)">下一步</button>
		</view>

		<view class="mainPanel" v-show="Status.steps.curr===1">
			<view class="btnAdd" @click="goCheckDevice('main')">
				<image class="img" mode="aspectFit" src="/static/images/common/add.png"></image>
				<text>添加预警主机</text>
			</view>

			<scroll-view scroll-y="true" scroll-with-animation class="checkedList" v-show="formData.main.length>0">
				<view class="item " v-for="item,index in formData.main">
					<view class="panel imgContent center" @click.stop="imgView(item,index)">
						<image class="img" :src="item.devicePic" mode="aspectFit"></image>
					</view>

					<view class="panel centerCol lbl">
						<view class="LargeTxt">{{item.deviceName}}</view>
						<view class="smallTxt">ID:{{item.deviceImei?item.deviceImei:item.deviceMac}}</view>
					</view>
				</view>
			</scroll-view>

			<button class="btnNext" :class="{'active':formData.main.length>0}" :disabled="formData.main.length==0"
				@click="gotoStep(1)">下一步</button>
		</view>

		<view class="mainPanel" v-show="Status.steps.curr===2">
			<view class="btnAdd" @click="goCheckDevice('sub')">
				<image class="img" mode="aspectFit" src="/static/images/common/add.png"></image>
				<text>添加布防联机</text>
			</view>
			<scroll-view  scroll-y="true" scroll-with-animation class="checkedList"  v-show="formData.sub.length>0">
				<view class="item center" v-for="item,index in formData.sub">
					<view class="panel imgContent center" @click.stop="imgView(item,index)">
						<image class="img" :src="item.devicePic" mode="aspectFit"></image>
					</view>
					
					<view class="panel centerCol lbl">
						<view class="LargeTxt">{{item.deviceName}}</view>
						<view class="smallTxt">ID:{{item.deviceImei?item.deviceImei:item.deviceMac}}</view>
					</view>
				</view>
			</scroll-view>
			<button class="btnNext" :class="{'active':formData.sub.length>0}" :disabled="formData.sub.length==0"
				@click="gotoStep(1)">下一步</button>
		</view>

		<view class="mainPanel" v-show="Status.steps.curr===3">
			<view class="btnAdd" @click="goCheckDevice('notify')">
				<image class="img" mode="aspectFit" src="/static/images/common/add.png"></image>
				<text>添加接收设备</text>
			</view>
			<scroll-view  scroll-y="true" scroll-with-animation class="checkedList"  v-show="formData.notify.length>0">
				<view class="item" v-for="item,index in formData.notify">
					<view class="panel imgContent center" @click.stop="imgView(item,index)">
						<image class="img" :src="item.devicePic" mode="aspectFit"></image>
					</view>
					
					<view class="panel centerCol lbl">
						<view class="LargeTxt">{{item.deviceName}}</view>
						<view class="smallTxt">ID:{{item.deviceImei?item.deviceImei:item.deviceMac}}</view>
					</view>
				</view>
			</scroll-view>

			<button class="btnNext" :class="{'active':formData.notify.length>0}" :disabled="formData.notify.length==0"
				@click="Send">发送</button>
		</view>


		<MsgBox ref="msgPop" />
		<global-loading ref="loading" />
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js';

	import {
		MsgSuccess,
		MsgError,
		MsgClose,
		MsgWarning,
		showPop,
		MsgInfo
	} from '@/utils/MsgPops.js'
	import Common from '@/utils/Common.js';

	var these = null;
	export default {
		data() {
			return {

				Status: {
					steps: {
						list: [{
								text: '设置名称'
							},
							{
								text: '设置主机'
							},
							{
								text: '设置联机'
							},
							{
								text: '发送编组'
							}
						],
						curr: 0
					}
				},
				formData: {
					id: '',
					name: '',
					main: [], //通知设备
					sub: [], //预警设备
					notify: [] //发送设备
				}
			}
		},
		computed: {

		},
		created() {

		},
		onUnload() {


		},
		onBackPress() {
			if (this.Status.steps.curr > 0) {
				this.gotoStep(-1);
				return true;
			}
		},
		onShow() {

		},
		onHide: function() {

		},

		onLoad(opt) {
			these = this;
			let eventChannel = this.getOpenerEventChannel();

			eventChannel.on('detailData', (res) => {
				let data = res.data;
				if (data) {
					this.formData.id = data.id;
					this.formData.name = data.name;
					this.formData.main = [];
					this.formData.sub = [];
					this.formData.notify = [];
					setTimeout(this.initData, 0);
				}
			});
		},
		methods: {
			imgView(item,index){
				if(!item.devicePic){
					return;
				}
				
				uni.previewImage({
					urls: [item.devicePic]
				});
			},
			goCheckDevice(type) {
				let json = {
					type: type,
					formData:this.formData
				};
				Object.assign(json, this.formData);
				uni.navigateTo({
					url: '/pages/common/linkDefence/checkDevice',
					success(res) {
						res.eventChannel.emit("detailData", {
							data: json
						});
					},
					events: {
						checkOver(res) {
							these.$set(these.formData, res.type, res.arr)
						}
					},
					fail(ex) {
						console.error("出现异常", ex);
					}
				});
			},
			initData() {

				if (!this.formData.id) {
					return;
				}
				let url = '';
				if (!url) {
					MsgWarning('后端未开发此接口,敬请期待', '', this);
					return;
				}
				request({
					url: url,
					data: {
						id: this.formData.id
					},
					method: 'POST'
				}).then(res => {
					if (res && res.code == 200) {
						console.log("请求数据成功", res);
						this.formData.main = res.data.filter(v => {
							return v.type == 'notify';
						});
						this.formData.sub = res.data.filter(v => {
							return v.type == 'warn';
						});
					} else {
						MsgError(res.msg, '', this);
					}
				}).catch(ex => {
					console.log("ex=", ex);
					MsgError(ex.errMsg, '', this);
				});

			},
			stepClick(item, index) {
				console.log("步骤被点击:", item);
			},
			Send() {
				showLoading(these, {
					text: '发送中'
				});
				let task = () => {
					hideLoading(these);
					MsgSuccess("敬请期待", '', these);
				}

				setTimeout(task, 800);
			},
			gotoStep(intval) {
				if (this.Status.steps.curr + intval > this.Status.steps.list.length - 1) {
					return;
				} else if (this.Status.steps.curr + intval < 0) {
					return;
				}

				this.Status.steps.curr += intval;
			}


		}
	}
</script>

<style>
	.content {
		padding: 30rpx;
		box-sizing: border-box;

		width: 100%;

	}

	/* #ifdef APP */
	.content {
		height: 100vh;
	}

	/* #endif */
	/* #ifdef WEB|H5 */
	.content {
		height: calc(100vh - 44px);
	}

	/* #endif */

	.mainPanel {
		width: 100%;
		height: calc(100% - 140rpx);
		position: relative;
		box-sizing: border-box;
		border: 1px solid #FFFFFF00;
	}

	.mainPanel .btnNext {
		width: 90%;
		transform: translateX(5%);
		position: absolute;
		bottom: 0rpx;
		border-radius: 45rpx;
		background: #1A1A1A;
		color: rgba(255, 255, 255, 0.4);
		font-family: "PingFang SC";
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		letter-spacing: 0px;
		text-align: center;


	}

	.mainPanel .btnNext.active {
		background: #BBE600;
		color: #232323;
	}

	/deep/ .uni-easyinput__content,
	.uni-easyinput__content {
		background-color: #1A1A1A !important;
		border-radius: 16rpx;
		color: #FFFFFF;
		text-indent: 10rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	/deep/ .uni-textarea-placeholder,
	.uni-textarea-placeholder {
		color: rgba(255, 255, 255, 0.5);

		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0.14rpx;
	}

	.mainPanel .main {
		transform: translateY(30rpx);
	}

	.mainPanel .btnAdd {

		width: 100%;
		height: 150rpx;
		border-radius: 16rpx;
		background: rgba(26, 26, 26, 1);
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		flex-wrap: nowrap;
		color: rgba(255, 255, 255, 0.87);
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0.14rpx;
		margin-top: 30rpx;
	}

	.mainPanel .btnAdd .img {
		width: 50rpx;
		height: 50rpx;
	}

	.mainPanel .checkedList {
		width: 100%;
		height: calc(100% - 300rpx);
		transform: translateY(20rpx);
		border-radius: 16rpx;
		background-color: #1A1A1A;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.mainPanel .checkedList .item {
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;

	}
	.mainPanel .checkedList .item .panel{
		height: 100%;
		
	}
	.mainPanel .checkedList .item .lbl{
		width: calc(100% - 120rpx);
		height: 100%;
		transform: translateX(24rpx);
		    display: flex;
		    flex-direction: column;
		    flex-wrap: wrap;
		    align-content: flex-start;
		    align-items: flex-start;
		    justify-content: space-evenly;
	}
	.mainPanel .checkedList .item .imgContent {
		width: 100rpx;
		height: 100rpx;
		background-color: #2A2A2A;
		border-radius: 16rpx;
	}

	.mainPanel .checkedList .item .img {
		width: 80%;
		height: 80%;
	}
	
	.checkedList .LargeTxt{
		color: rgba(255, 255, 255, 0.87);
		
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 32rpx;
		font-weight: 400;		
	}
	
	.checkedList .smallTxt{
		color: rgba(255, 255, 255, 0.6);
		
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 24rpx;
		font-weight: 400;
		
		letter-spacing: 0.14rpx;
		
	}
</style>