<template>
	<view class="area-bg">
		<view class="area-wrap">
			<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>
		
	</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)
        }
      })
      //获取站点信息
      this.areaList.forEach(item=>{
			  if(item.areaCode==this.defaultAreaCode){
			    this.areaObj.areaCode=item.areaCode
			    this.areaObj.areaName=item.areaName
			  }
      })
      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-bg{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index:99;
		background:rgba(0,0,0,0.4);
		padding-top: 100rpx;
	}
	.area-wrap{
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #ECF3FE;
		border-radius: 20rpx;
	}
	.top{
		display: flex;
		justify-content: space-around;
		background: #fff;
		height: 80rpx;
		align-items: center;
		padding: 0 24rpx;
		border-radius: 20rpx;
	}
	.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>
