<template>
	<view class="area-box">
		<view class="top" @click="closeSon()">
			<view class="top-left">
				选择（索道）出发站点
			</view>
			<view>
				<u-icon name="close" bold></u-icon>
			</view>
		</view>	
		<!-- 没有默认站点时-->
		<template v-if="!defaultAreaCode">
			<view class="bottom">
				<view class="bottom1">
					<view>
						您所在位置距离“{{areaList[distanceIndex].areaName}}”较近
					</view>
					
					<view class="bottom1-choose">
						建议选择<text>【{{areaList[distanceIndex].areaName}}】</text>
					</view>
					
					<view class="bottom1-btn">
							<text class="btn" @click="chooseArea(item)" v-for="(item,index) of areaList" :key="index">
								{{item.areaName}}
							</text>
					</view>
				</view>
				
				<view class="bottom2">
					<image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
					<view style="margin-top: 20rpx;">选错站点可导致排队号码无效。</view>
					<view>若无法确定站点，请向索道工作人员咨询。</view>
				</view>
			</view>
			
			<view class="pop-wrap" v-show="showPop">
				<view class="pop-content">
					<view>
						<text>
							您选择的站点是：
						</text>
						
						<text>
							{{areaObj.areaName}}
						
						</text>
					</view>
					
					<template v-if="sortIfo">
						<view>
							<text>
								当前排队人数：
							</text>
						
							<text>
								{{sortIfo.peopleNumber}}
						
							</text>
						</view>
						
						<view>
							<text>
								预计进入排队等候区时间：
							</text>
						
							<text>
								{{sortIfo.sortTotalTime}}
						
							</text>
						</view>
					</template>
					<!-- <view>
						<text>
							退票规则：
						</text>
					
						<text>
							不可退
						</text>
					</view> -->
					<view>
					  返程时，根据现场情况需重新取号
					</view>
					<view v-if="!sortIfo" style="font-size:32rpx;color:#FC6703;">
						未找到本站信息，请根据现场大屏幕信息合理购票
					</view>
					
					<view style="text-align: center;">
						<text class="btn" @click="hidePop()" style="color: #555;margin-right: 48rpx;">
							取消
						</text>
						<text class="btn" @click="sure()">
						确定
						</text>
					</view>
				</view>
				
			</view>
		</template>
		<!-- 有默认站点时 -->
		<view v-else class="defaultArea">
		  <view>
		  	<text>
		  		当前站点：
		  	</text>
		
		  	<text>
		  		{{areaObj.areaName}}	
		  	</text>
		  </view>
		
		  <view>
		  	<text>
		  		当前排队人数：
		  	</text>
		
		  	<text>
		  		{{sortIfo.peopleNumber}}
		
		  	</text>
		  </view>
		
		  <view>
		  	<text>
		  		预计进入排队等候区时间：
		  	</text>
		
		  	<text>
		  		{{sortIfo.sortTotalTime}}
		
		  	</text>
		  </view>
			<!-- <view>
				<text>
					退票规则：
				</text>
			
				<text>
					不可退
				</text>
			</view> -->
		  <view>
		    <image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
		  </view>
		
		  <view>
		    <a class="btn" @click="closeSon()">确定</a>
		  </view>
		</view>
	</view>
	
</template>

<script>
export default {
  props: ['areaList', 'sortArr','defaultAreaCode'],
  data() {
    return {
      showPop: false, //控制弹窗显示隐藏
      distanceIndex:0, //最小距离下标
      distanceList: [], //所有距离列表
      sortIfo: '', //排号信息
      areaObj: {
        areaCode: '', //选中的区域编码
        areaName: '', //选中的区域名字
      },
      longitude:'',//当前位置经度
      latitude:'',//当前位置纬度
    }
  },
  created() {
    //如果有默认站点
    if(this.defaultAreaCode&&this.sortArr.length>0){
      this.sortArr.forEach(item=>{
        if(item.projectId==this.defaultAreaCode){
          this.sortIfo=item
          this.sortIfo.peopleNumber = Math.max(item.sortTotalCapacity-item.showEnd,0)
        }
      })
      return
    }
    uni.getLocation({
      type: 'wgs84',
      success:(res)=>{
        this.longitude=res.longitude
        this.latitude=res.latitude
        this.getMinDistance()
      }
    })
  },
  methods: {
    //---关闭组件
    closeSon(){
      this.$parent.closeArea()
    },
    //---隐藏弹窗
    hidePop() { 
      this.showPop = false
    },
    //---确定选择站点
    sure() { 
      this.showPop = false
      this.$parent.closeArea()
      this.$emit('areaSure', this.areaObj)
    },
    //---选择站点，获取排号信息
    chooseArea(item) { 
      this.showPop = true
      this.areaObj.areaCode = item.areaCode //获取选中的站点code,便于找到返回数据的下标
      this.areaObj.areaName = item.areaName
      this.sortArr.forEach((item)=>{
        item.peopleNumber = Math.max(item.sortTotalCapacity-item.showEnd,0)
      })
      this.sortIfo=this.sortArr.find(item=>item.projectId==this.areaObj.areaCode)||''
    },
    //---计算距离
    getMinDistance() {
      if (this.areaList.length > 0) {
        this.areaList.forEach((item) => { //计算两个站点的分别距离
          let lat1=this.latitude||0
          let lng1=this.longitude||0
          let lat2=item.latitude||0
          let lng2=item.longitude||0
          let distance = this.$commonjs.getDistance(lat1,lng1,lat2,lng2)
          this.distanceList.push(distance)
        })
        let minDistance = Math.min.apply(null, this.distanceList)
        this.distanceIndex = this.distanceList.indexOf(minDistance)
      }
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
	/* 默认站点 */
	.defaultArea{
	  padding:24rpx;
	}
	.defaultArea view{
	  margin-top:40rpx;
	  text-align: center;
	}
	.defaultArea view text:last-child{
	  color: $red;
	  font-size:32rpx;
	  font-weight: bold;
	}
	.area-box{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index:99;
		background: #ECF3FE;
	}
	.top{
		display: flex;
		justify-content: space-around;
		background: #fff;
		height: 80rpx;
		align-items: center;
		padding: 0 24rpx;
	}
	.top-left{
		flex: 1;
		text-align: center;
	}
	.bottom1{
		text-align: center;
		view{
			margin-top:30rpx;
		}
	}
	.bottom1-choose{
		font-size: 32rpx;
		color: $red;
		text{
			font-weight: bold;
			font-size: 36rpx;
		}
	}
	.bottom1-btn text:not(:last-child){
		margin-right: 48rpx;
	}
	.bottom2{
		margin-top: 60rpx;
		font-size: 32rpx;
		color:$red;
		text-align: center;
	}
	// 弹窗
	.pop-wrap{
		background: rgba(0,0,0,0.4);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
	}
	.pop-content{
		background: #FFFFFF;
		width: 85%;
		border-radius: 10rpx;
		padding: 50rpx 20rpx;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 300rpx auto 0 auto;
		view:not(:first-child){
			margin-top: 30rpx;
		}
	}
	.pop-content view:not(:last-child) text:last-child{
		font-size:36rpx;
		font-weight: bolder;
		color:$red;
	}
</style>
