<template>
	<view class="zd_container">
		<nav-bar :title="title"></nav-bar>
		<!-- <view class="zd-row jcflexstart state-wrap">
			<view class="zd-col-4 zd-row jcflexstart" v-for="e in state">
				<view class="state-color" :class="e.color"></view>
				<view class="state-name">{{e.name}}</view>
			</view>
		</view> -->
		<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 filter_label">任务起点</view>
					<view class="zd-col-18 relative">
						<input type="text" class="filter_input" v-model="sCode" @input="matchData(1)">
						<view v-if="filterNo ===1 && filteredData.length" class="filter_select_wraper">
							<view class="filter_select_item" v-for="(e, i) in filteredData" :key="'ul'+ i" @tap.stop="sCode = e.device_code,filteredData = []">{{e.device_code}}</view>
						</view>
					</view>
				</view>
				<view class="zd-row">
					<uni-icons type="arrow-down" size="18" color="#ff6a00"></uni-icons>
					<view class="zd-col-6 filter_label">任务终点</view>
					<view class="zd-col-18 relative">
						<input type="text" class="filter_input" v-model="nCode" @input="matchData(2)">
						<view v-if="filterNo ===2 && filteredData.length" class="filter_select_wraper">
							<view class="filter_select_item" v-for="(e, i) in filteredData" :key="'ul'+ i" @tap.stop="nCode = e.device_code,filteredData = []">{{e.device_code}}</view>
						</view>
					</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 === sCode || el.device_code === nCode}" :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': sCode === '' || nCode === ''}" :disabled="disabled" @tap="_callTask('1')">生箔换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': sCode === '' || nCode === ''}" :disabled="disabled" @tap="_callTask('2')">分切换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': sCode === '' || nCode === ''}" :disabled="disabled" @tap="_callTask('3')">搬运任务</button>
		</view>
		<view class="pop_point_wrap" :style="{top: distanceToTop + 'px',left: distanceToLeft + 'px'}">
			<view class="zd-row jccenter">
				<uni-icons type="map-pin-ellipse" size="18" color="#fff"></uni-icons>
			</view>
			<view class="zd-row pop_point_content" :class="{'pop_point_content_up': this.popup}">
				<view class="zd-col-11 item-font-6 bggreen" @tap="popCode(1)">任务起点</view>
				<view class="zd-col-11 item-font-6 bgblue" @tap="popCode(2)">任务终点</view>
			</view>
		</view>
		<view v-if="show" class="msg_mask" @tap="colsePop"></view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {queryArea, queryPointByArea, callTask} from '@/utils/mork2.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				title: '',
				areaArr: [],
				pointArr: [],
				pkId: '',
				disabled: false,
				code: '',
				sCode: '',
				nCode: '',
				show: false,
				distanceToTop: -300,
				distanceToLeft: -300,
				windowHeight: '',
				popHeight: '',
				filteredData: [],
				filterNo: '',
				popup: false
			};
		},
		onLoad (options) {
			this.title = options.title
			uni.getSystemInfo({
			  success: (info) => {
				this.windowHeight = info.windowHeight
			  }
			})
		},
		onReady () {
			const query = uni.createSelectorQuery().in(this)
			query
			.select('.pop_point_content')
			.boundingClientRect(data => {
				this.popHeight = data.height
			}).exec()
		},
		created () {
			this.initArea()
		},
		methods: {
			matchData (no) {
				this.filterNo = no
				let query = ''
				switch (no) {
					case 1:
						query = this.sCode.toLowerCase()
						break
					case 2:
						query = this.nCode.toLowerCase()
						break
					default:
						break
				}
				if (!query) {
					this.filteredData = []
					return
				}
				this.filteredData = this.pointArr.filter(item => {
					return item.device_code.toLowerCase().includes(query)
				})
			},
			async initArea () {
				let res = await queryArea()
				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) {
				const query = uni.createSelectorQuery().in(this)
				query
				.select(`#site_item_box_${index}`)
				.boundingClientRect(data => {
					if (data) {
						this.distanceToTop = data.top + (data.height / 2) - 9
						this.distanceToLeft = data.left
						console.log(this.popHeight)
						if ((this.windowHeight - this.distanceToTop) < (this.popHeight + 20)) {
							this.popup = true
						} else {
							this.popup = false
						}
					}
				}).exec()
				this.show = true
				this.code = el.device_code
			},
			colsePop () {
				this.show = !this.show
				if (!this.show) {
					this.distanceToTop = -300
					this.distanceToLeft = -300
				}
			},
			popCode (code) {
				switch (code) {
					case 1:
						this.sCode = this.code
						break
					case 2:
						this.nCode = this.code
						break
					default:
						break
				}
				this.colsePop()
			},
			/** 清空点位选择 */
			cancle () {
				this.sCode = ''
				this.nCode = ''
				this.disabled = false
			},
			async _callTask (type) {
				this.disabled = true
				if (this.sCode === '' || this.nCode === '') {
					this.disabled = false
					return
				}
				if (this.sCode === this.nCode) {
					uni.showToast({
						title: '任务起点终点不能相同',
						icon: 'none'
					})
					this.disabled = false
					return
				}
				try {
					let res = await callTask(this.sCode, this.nCode, 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" scoped>
@import '../../common/style/mixin.styl';
.item-font-6
	color #fff
.filter_label
	padding-left 0
.pop_point_content_up
	top -200rpx
</style>
