<style lang="scss">
	.container{
		height: 100%;
		background:#F6F6F6;
		&>map{
			flex-shrink: 0;
			height:348rpx;
			width:100%;
			margin-bottom:-9rpx;
		}
		&>.u-tabs{
			flex-shrink: 0;
			background:#fff;
			box-shadow: 0 6rpx 12rpx 2rpx rgba(0,0,0,0.1);
		}
		swiper{
			flex-grow: 1;
			height:1rpx;
		}
	}
</style>
<template>
	<view class="container flex">
		<map id="amap"/>

		<u-tabs :list="tabs" :current="tabIndex" activeStyle="color:#10C176;" lineColor="#10C176" lineWidth="50" :scrollable="false" @change="plantId='';tabIndex=$event.index"/>

		<swiper :current="tabIndex" @change="tabIndex=$event.detail.current">
			<swiper-item>
				<plant-plan :plotId="plotId" @trigger="$refs.recovery.reSearch($event.plantId);tabIndex=$event.tabIndex"/>
			</swiper-item>
			<swiper-item>
				<farmRecord :plotId="plotId"/>
			</swiper-item>
			<swiper-item>
				<recovery :plotId="plotId" ref="recovery"/>
			</swiper-item>
			<swiper-item>
				<transactions :plotId="plotId" ref="transactions"/>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import plantPlan from './plantPlan.vue'
import farmRecord from './farmRecord.vue'
import recovery from './recovery.vue'
import transactions from './transactions.vue'

import request from '@/common/request.js'
import {computeArea} from '@/common/utils'
export default {
	components:{plantPlan,farmRecord,recovery,transactions},
	data(){
		return{
			tabIndex:0,
			tabs:[
				{name:"种植计划"},
				{name:"农事操作"},
				{name:"采收记录"},
				{name:"交易记录"},
			],
			plotId:"",

			maps:null,
		}
	},
	onLoad(options){
		this.plotId=options.id
	},
	async onReady(){
		/* #ifdef APP-PLUS */
			var amap=uni.createMapContext("amap",this)
			var points=await this.getDetail()
			
			this.maps=amap.$getAppMap()
			
			this.maps.setMapType(plus.maps.MapType.MAPTYPE_SATELLITE)
			if(points.length>0){
				var bound=computeArea(points)
				this.maps.centerAndZoom(new plus.maps.Point(bound.center.longitude, bound.center.latitude),10)

				var polygon=new plus.maps.Polygon( points.map(v=>new plus.maps.Point(v.longitude, v.latitude)) )
				polygon.setLineWidth(2)
				polygon.setStrokeColor("#10C176")
				polygon.setFillColor("#10C176")
				polygon.setFillOpacity(0.3)
				this.maps.addOverlay(polygon)
			}else{
				this.maps.getUserLocation((state,point)=>{
					if(state==0){
						this.maps.centerAndZoom(new plus.maps.Point(point.longitude, point.latitude),10)
					}else{
						this.maps.centerAndZoom(new plus.maps.Point(102.712251,25.040609),10)
					}
				})
			}
			
		/* #endif */
	},
	methods:{
		async getDetail(){
			var res=await request('/api/plantPlot/queryById',{
				params:{id:this.plotId}
			})
			if(res.statu){
				return (res.data.longitude||'').split("|").map(v=>{
						var point=v.split(",")
						if(point.length==2){
							return {longitude:point[0],latitude:point[1]}
						}
						return null
					}).filter(v=>v)
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取地块详情失败！",
					showCancel:false,
				})
				return[]
			}
		},
	}
}
</script>