<template>
	<view class="zd_container">
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper">
				<view class="zd-row mgb20 border-bottom">
					<uni-icons type="arrow-up" size="18" color="#ff6a00"></uni-icons>
					<view class="zd-col-6 item-font-2">任务起点1</view>
					<view class="zd-col-16 item-font-1">{{sCode1}}</view>
				</view>
				<view class="zd-row mgb20 border-bottom">
					<uni-icons type="arrow-down" size="18" color="#ff6a00"></uni-icons>
					<view class="zd-col-6 item-font-2">任务终点1</view>
					<view class="zd-col-16 item-font-1">{{nCode1}}</view>
				</view>
				<view class="zd-row mgb20 border-bottom">
					<uni-icons type="arrow-up" size="18" color="#ff6a00"></uni-icons>
					<view class="zd-col-6 item-font-2">任务起点2</view>
					<view class="zd-col-16 item-font-1">{{sCode2}}</view>
				</view>
				<view class="zd-row">
					<uni-icons type="arrow-down" size="18" color="#ff6a00"></uni-icons>
					<view class="zd-col-6 item-font-2">任务终点2</view>
					<view class="zd-col-16 item-font-1">{{nCode2}}</view>
				</view>
			</view>
			<view class="zd_wrapper">
				<view class="allwidth" v-for="e in areaArr" :key="e.region_code">
					<view class="zd-row" @click="getPonit(e)">
						<view class="title_locate">{{e.region_name}}</view>
						<uni-icons :type="pkId === e.region_code ? 'up' : 'down'" size="16"></uni-icons>
					</view>
					<view v-if="pkId === e.region_code" class="zd-row flexstart flexwrap">
						<view class="zd-col-12 site_item" v-for="(el, index) in pointArr" :key="index">
							<view class="site_item_box":class="{'isChecked': el.device_code === sCode1 || el.device_code === nCode1 || el.device_code === sCode2 || el.device_code === nCode2}" :id="'site_item_box_'+ index" @click="setcode(el,index)">
								<view class="point_title_1">{{el.device_name}}</view>
								<view class="point_title_2">{{el.device_code}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zd-row submit-bar">
			<button class="zd-col-4 button-default" @click="cancle">清空</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': !((sCode1 !== '' && nCode1 !== '') || (sCode2 !== '' && nCode2 !== ''))}" :disabled="disabled" @tap="_agvcallTask('1')">生箔换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': !((sCode1 !== '' && nCode1 !== '') || (sCode2 !== '' && nCode2 !== ''))}" :disabled="disabled" @tap="_agvcallTask('2')">分切换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': !((sCode1 !== '' && nCode1 !== '') || (sCode2 !== '' && nCode2 !== ''))}" :disabled="disabled" @tap="_agvcallTask('3')">搬运任务</button>
		</view>
		<view ref="pointIcon" class="pop_point_wrap">
			<view class="zd-row jccenter">
				<uni-icons type="map-pin-ellipse" size="18" color="#fff"></uni-icons>
			</view>
			<view class="pop_point_content">
				<view class="zd-row mgb20">
					<view class="zd-col-11 item-font-6 bggreen" @tap="getstartcode1">任务起点1</view>
					<view class="zd-col-11 item-font-6 bgblue" @tap="getnextcode1">任务终点1</view>
				</view>
				<view class="zd-row">
					<view class="zd-col-11 item-font-6 bggreen" @tap="getstartcode2">任务起点2</view>
					<view class="zd-col-11 item-font-6 bgblue" @tap="getnextcode2">任务终点2</view>
				</view>
			</view>
		</view>
		<view v-if="show" class="msg_mask" @tap="colsePop"></view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	// import {agvqueryArea, queryPointByArea} from '@/utils/mork2.js'
	import {agvqueryArea, queryPointByArea, agvcallTask} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				title: '',
				areaArr: [],
				pointArr: [],
				pkId: '',
				disabled: false,
				code: '',
				sCode1: '',
				nCode1: '',
				sCode2: '',
				nCode2: '',
				show: false
			};
		},
		onLoad (options) {
			this.title = options.title
		},
		created () {
			this.initArea()
		},
		methods: {
			async initArea () {
				let res = await agvqueryArea()
				this.areaArr = [...res.data]
				if (this.areaArr.length > 0) {
					this.pkId = this.areaArr[0].region_code
					this.initPonit()
				}
			},
			getPonit (e) {
				this.pkId = this.pkId === e.region_code ? '' : e.region_code
				if (this.pkId) {
					this.initPonit()
				}
			},
			async initPonit () {
				let res = await queryPointByArea(this.pkId)
				this.pointArr = [...res.data]
			},
			setcode (el,index) {
				let distanceToTop = ''
				let distanceToLeft = ''
				const query = uni.createSelectorQuery().in(this);
				query
				.select(`#site_item_box_${index}`)
				.boundingClientRect(data => {
					if (data) {
						distanceToTop = data.top + (data.height / 2) - 9
						distanceToLeft = data.left
					}
				}).exec()
				this.show = true
				this.$refs.pointIcon.$el.style.top = distanceToTop + 'px'
				this.$refs.pointIcon.$el.style.left = distanceToLeft + 'px'
				this.$refs.pointIcon.$el.style.transform = 'scale(100%)'
				this.code = el.device_code
			},
			colsePop () {
				this.show = !this.show
				if (!this.show) {
					this.$refs.pointIcon.$el.style.transform = 'scale(0)'
				}
			},
			getstartcode1 () {
				if (this.nCode1 !== '' && this.nCode1 === this.code) {
					this.nCode1 = ''
				} 
				this.sCode1 = this.code
				this.show = false
				this.$refs.pointIcon.$el.style.transform = 'scale(0)'
			},
			getnextcode1 () {
				if (this.sCode1 !== '' && this.sCode1 === this.code) {
					this.sCode1 = ''
				}
				this.nCode1 = this.code
				this.show = false
				this.$refs.pointIcon.$el.style.transform = 'scale(0)'
			},
			getstartcode2 () {
				if (this.nCode2 !== '' && this.nCode2 === this.code) {
					this.nCode2 = ''
				} 
				this.sCode2 = this.code
				this.show = false
				this.$refs.pointIcon.$el.style.transform = 'scale(0)'
			},
			getnextcode2 () {
				if (this.sCode2 !== '' && this.sCode2 === this.code) {
					this.sCode2 = ''
				}
				this.nCode2 = this.code
				this.show = false
				this.$refs.pointIcon.$el.style.transform = 'scale(0)'
			},
			/** 清空点位选择 */
			cancle () {
				this.sCode1 = ''
				this.nCode1 = ''
				this.sCode2 = ''
				this.nCode2 = ''
				this.disabled = false
			},
			async _agvcallTask (type) {
				this.disabled = true
				if (!((this.sCode1 !== '' && this.nCode1 !== '') || (this.sCode2 !== '' && this.nCode2 !== ''))) {
					this.disabled = false
					return
				}
				try {
					let res = await agvcallTask(this.sCode1, this.nCode1, this.sCode2, this.nCode2, type)
					this.cancle()
					clearInterval(this.timer)
					this.timer = null
					setTimeout(() => {
						this.refresh()
						this.cancle()
					}, 2000)
					uni.showToast({
						title: res.desc,
						icon: 'none'
					})
				} catch (err) {
					this.disabled = false
				}
			}
		}
	}
</script>

<style lang="stylus">
@import '../../common/style/mixin.styl';
.item-font-6
	color #fff
</style>
