<template>
	<view class="zd_container">
		<nav-bar 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-row mgb10 xzd-wraper">
			<view class="zd-col-11 item-font-6 bggreen">起:{{sObj.device_name}}</view>
			<view class="zd-col-1 item-font-7">&ndash;</view>
			<view class="zd-col-11 item-font-6 bgblue">终:{{nObj.device_name}}</view>
		</view>
		<view class="zd_content">
			<view class="zd_wrapper grid-wraper">
				<view class="locate_block" v-for="e in areaArr" :key="e.region_code">
					<view class="zd-row locate_name" @click="getPonit (e)">
						<view class="title_locate">{{e.region_name}}</view>
						<uni-icons :type="e.checked ? 'up' : 'down'" size="16"></uni-icons>
					</view>
					<view v-show="e.checked === true" class="site_block" ref="liCon">
						<view class="site_item" v-for="(el, i) in e.pointArr" :key="i">
							<view class="site_item_box" :class="{'bggreen': sObj.device_code === el.device_code, 'bgblue': nObj.device_code === el.device_code}" @click="setcode(el)">
								<view class="title_1">{{el.device_name}}</view>
								<view class="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': JSON.stringify(sObj) === '{}' && JSON.stringify(nObj) === '{}'}" :disabled="disabled" @tap="_callTask('1')">生箔换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': JSON.stringify(sObj) === '{}' && JSON.stringify(nObj) === '{}'}" :disabled="disabled" @tap="_callTask('2')">分切换轴</button>
			<button class="zd-col-6 button-primary" :class="{'button-info': JSON.stringify(sObj) === '{}' && JSON.stringify(nObj) === '{}'}" :disabled="disabled" @tap="_callTask('3')">搬运任务</button>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {queryArea, queryPointByArea, callTask} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				interTime: this.$store.getters.setTime,
				timer: null,
				state: [{color: 'bggray', name: '空位'}, {color: 'bggreen', name: '有货'}],
				areaArr: [],
				pointArr: [],
				regobj: {},
				disabled: false,
				sObj: {},
				nObj: {},
				isS: false
			};
		},
		created () {
			this.initArea()
		},
		beforeDestroy () {
			if (this.timer) {
				clearInterval(this.timer);  
				this.timer = null
			}
		},
		onUnload () {
			if (this.timer) {
				clearInterval(this.timer);  
				this.timer = null
			}
		},
		methods: {
			refresh (e) {
				this.timer = setInterval(() => {
					this.initPonit(e)
				}, this.interTime)
			},
			async initArea () {
				let res = await queryArea()
				this.areaArr = [...res.data]
				this.areaArr.map(el => {
					this.$set(el, 'checked', false)
					this.$set(el, 'pointArr', [])
				})
				if (this.areaArr.length > 0) {
					this.getPonit(this.areaArr[0])
				}
			},
			async initPonit (e) {
				let res = await queryPointByArea(e.region_code)
				this.regobj = e
				this.areaArr.map(el => {
					if (el.region_code === e.region_code) {
						this.$set(el, 'pointArr', [...res.data])
					}
				})
			},
			getPonit (e) {
				clearInterval(this.timer)
				this.areaArr.map(el => {
					if (el.region_code !== e.region_code) {
						el.checked = false
					}
					if (el.region_code === e.region_code) {
						e.checked = !e.checked
					}
				})
				if (e.checked) {
					this.initPonit(e)
					this.refresh(e)
				}
			},
			setcode (el) {
				if (this.isS === false) {
					this.sObj = el
					this.isS = true
				} else if (this.isS) {
					this.nObj = el
					this.isS = false
				}
			},
			/** 清空点位选择 */
			cancle () {
				this.sObj = {}
				this.nObj = {}
				this.disabled = false
			},
			async _callTask (type) {
				this.disabled = true
				if (JSON.stringify(this.sObj) === '{}' || JSON.stringify(this.nObj) === '{}') {
					this.disabled = false
					return
				}
				try {
					let res = await callTask(this.sObj.device_code, this.nObj.device_code, 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';
.zd_content
	// padding-top calc(var(--status-bar-height) + 72rpx)
	padding-bottom 200rpx
.locate_block
	width 100%
.locate_name
	position relative
	_wh(100%,48rpx)
.site_block
	width 100%
	transition height .3s
	_fj(flex-start,,,wrap)
.site_item
	width 49%
	padding 5rpx 5rpx
	overflow hidden
	margin-bottom 10rpx
	_fj(center)
	&:nth-child(even)
		margin-left 2%
.site_item_box
	_wh(100%, 100%)
	padding 20rpx 10rpx 10rpx 10rpx
	background-color rgb(220, 223, 230)
	border-radius 10rpx
.title_locate
	width 50%
	_font(30rpx,40rpx,#333,bold)
	font-style italic
.title_1
	_wh(100%, 40rpx)
	overflow hidden
	_font(26rpx,40rpx,#303133,500, center)
.title_2
	_wh(100%, 40rpx)
	overflow hidden
	_font(24rpx,40rpx,#999,500, center)
.submit-bar
	box-shadow none
.state-wrap
	position fixed
	z-index 200
	background #f2f5fa
	top calc(var(--status-bar-height) + 72rpx)
	_wh(100%, 60rpx)
	padding 0 14rpx
.state-color
	_wh(30rpx, 30rpx)
	border-radius 50%
	margin-right 10rpx
.state-name
	_font(28rpx, 30rpx, #333)
.xzd-wraper
	position fixed
	z-index 200
	bottom 100rpx
	padding 14rpx
	background-color #fff
	box-shadow: 0 0 20rpx 0 rgba(160,160,160,0.7);
.button-default, .button-primary
	font-size 30rpx
.bgblue .title_1,.bgblue .title_2,.bggreen .title_1,.bggreen .title_2
		color #fff
</style>
