<template>
	<view class="wrap">
		<view class="top">
			<view class="name">
				长江索道
			</view>
			
			<view class="tip">
				请确认出行方向，选择对应的出发站点，确定后，无法更改，请谨慎选择！
			</view>
			
			<view class="map">
				<image src="@/pages/my/static/takeNumber/sdMap.jpg" mode="widthFix"></image>
			</view>
			
			<view class="choose">
				<view class="choose-content" v-for="(item,index) in list" :key='index' @click="areaChoose(index)" :class="{on:active==index}">
					<view class="choose-name">
						{{item.projectName}}
					</view>
					
					<!-- <view class="choose-add">
						解放碑.新华路
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<text class="btn" @click="cancel()" style="background: #fff;color: #999;margin-right: 80rpx;">
				取消
			</text>
			<text class="btn" @click="sure()">
				确定
			</text>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      list:[],//站点列表
      active:100,//下标
      merchantCode:'',//商家编号
      channelName:'',//渠道名称
      productName:'',//产品名称
      chooseArea:'',//选中的站点
    }
  },
  onLoad(option) {
	  this.merchantCode=option.merchantCode||''
	  this.list=option.list?JSON.parse(option.list):''
	  this.channelName=option.channelName||''
	  this.productName=option.productName||''
  },
  methods: {
    //---站点选择
    areaChoose(index){
      this.active=index
      this.chooseArea=JSON.stringify(this.list[index]) 
    },
    //---确定站点
    sure(){
      if(!this.chooseArea){
        uni.showToast({
				  title: '请选择站点',
				  icon: 'none'
        })
        return
      }
      uni.navigateTo({
			  url:`/pages/my/takeNumber/rowNumber/rowNumber?chooseArea=${this.chooseArea}&merchantCode=${this.merchantCode}&productName=${this.productName}&channelName=${this.channelName}`
      })
    },
    //---取消站点
    cancel(){
      this.active=100
      this.chooseArea=''
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
	height: 100%;
	background: #ECF3FE;
	padding: 24rpx;
}
.top{
	background: #ffffff;
	box-shadow: 0px 0px 16rpx 2rpx rgba(54,136,255,0.16);
	border-radius: 16rpx;
	padding: 48rpx 24rpx;
	text-align: center;
}
.name{
	font-size: 40rpx;
	font-weight: bold;
	color: #191919;
}
.tip{
	font-size: 32rpx;
	color: #FC771D;
	line-height: 48rpx;
	margin-top: 24rpx;
}
.map{
	margin-top: 48rpx;
	image{
		width: 100%;
	}
}
.choose{
	margin-top: 48rpx;
	display: flex;
	justify-content: space-between;
}
.choose-content{
	baackground: rgba(54,136,255,0);
	border-radius: 8rpx;
	border: 1px solid #BFD9FF;
	padding:24rpx 0;
	width: 280rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.choose-content.on{
	background: $blue;
	color: #ffffff;
}
.choose-name{
	font-size: 36rpx;
	font-weight: bold;
}
.choose-add{
	color:#999999;
	font-size: 26rpx;
	margin-top: 16rpx;
}
.bottom{
	margin-top:48rpx;
	display: flex;
	justify-content: center;
}
.btn{
	display: inline-block;
	line-height: 60rpx;
	width: 212rpx;
	height: 80rpx;
	background: #3688FF;
	border-radius: 40rpx
}
</style>
