<template>
	<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}">
		<view class="nav-bar" :style="{'height': navHeight + 'px'}">
			<picker mode="selector" @change="companyChage" :value="index" :range="companyArr" range-key="name">
				<view class="company">{{companyArr[index] ? companyArr[index].name : '请选择公司'}}</view>
			</picker>
			<u-icon name="arrow-down"></u-icon>
		</view>
		<view class="outer-container">
			<view class="inner-container">
				<view class="icon">
					<image class="favorite" src="../../static/img/album/favorite.png"></image>
					<image class="start" src="../../static/img/album/star.png"></image>
				</view>
				<view class="img-box">
					<view class="item" @click="imageChange(item)" v-for="(item, index) in imgArr" :key="item.id">
						<image class="img" :src="item.url" mode="aspectFill"></image>
						<u-checkbox class="checkbox" v-model="item.value" shape="circle"></u-checkbox>
					</view>
				</view>
				<button class="btn" @click="saveClick">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
import UCheckbox from '@/uview-ui/components/u-checkbox/u-checkbox.vue'

export default {
  components: {
    UCheckbox,
  },
  data() {
    return {
      statusBarHeight: 0,
      capsule: 0,
      navHeight: 0,
      index: 0,// 选中的公司索引-默认选中第一个
      companyArr: [],// 公司枚举
      imgArr: [],//图片
      value: true,
      location: {},//位置信息
      option: {},//路由传参
    }
  },
  methods: {
    saveClick() {//---提交
      const selectedPic = this.imgArr.filter(item => item.value)
      const data = {
        id: selectedPic[0].id,// 图片id
        merchantId: selectedPic[0].merchantId
      }
      uni.setStorageSync('merchantId', data.merchantId)
      this.$request('scenic/V2merchant/submitChoose', data).then(res => {//创建任务
			  if (res.code === '00') {
			    uni.showToast({
			      title: '提交成功',
			      icon: 'success'
			    })
          uni.navigateTo({
            url: './albumIndex?tip=true'
          })
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    companyChage(e) {//---公司变化
      this.index = Number(e.detail.value)
      const merchantId = this.companyArr[this.index].id
			
      this.getPic(merchantId)
    },
    imageChange(item) {//---图片选择
      this.imgArr.forEach(item => item.value = false)
      item.value = true
    },
    recordDeviceInfo() {//---记录设备信息
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
      this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
      this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
    },
    getCompany(nearbyId) {//---获取景区列表
      this.$request('scenic/newMerchant/findAllMerchant').then(res => {//创建任务
			  if (res.code === '00') {
          if(!res.data.length) return
					
          const id = this.option.merchantId || nearbyId
          let index = res.data.findIndex(item => item.id === id)
          this.index = index === -1 ? 0 : index
					
          this.companyArr = res.data
          this.getPic(this.companyArr[this.index].id)
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    getPic(merchantId) {//---获取景区图片
      this.$request('scenic/V2merchant/getImgList',{ merchantId }).then(res => {//创建任务
			  if (res.code === '00') {
          res.data.forEach(item => item.value = false)
          this.imgArr = res.data
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    getNearByCompany() {//---获取最近的景区
      const data = {
        merchantType: 1,
        userlatitude: this.location.latitude,//纬度
        userlongitude: this.location.longitude//经度
      }
      this.$request('scenic/newMerchant/findAllMerchant', data).then(res => {//创建任务
			  if (res.code === '00') {
			    if(!res.data.length) {
            this.getCompany()
            return uni.showToast({
              title: '获取最近景点失败',
              icon: 'none'
            })
          }
          this.getCompany(res.data[0].id)
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    }
  },
  onLoad(option) {
    this.option = option
    this.recordDeviceInfo()
    uni.getLocation({//获取定位
    	type: 'wgs84',
    	success: res => {
        this.location = res
        uni.setStorageSync('location', JSON.stringify(res))
				
        if(this.option.merchantId) {//扫码进入则直接加载景区列表，默认显示传入的景区
          this.getCompany()
        }else {//否则获取并显示距离最近的景点
          this.getNearByCompany()
        }
    	},
      fail() {
        this.getCompany()
        uni.showToast({
				  title: '获取经纬度失败',
				  icon: 'none'
        })
      }
    })
  }		
}
</script>

<style lang="scss" scoped>
	.big-box {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #3688FF;
		color: #fff;
	}
	.nav-bar {
		display: flex;
		align-items: center;
		picker {
			max-width: 50%;
		}
		.company {
			margin: 0 12rpx 0 24rpx;
			font-size: 36rpx;
			font-weight: 700;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.outer-container {
		flex: 1;
		margin: 16rpx 16rpx 24rpx 16rpx;
		border-radius: 96rpx;
		background: url('@/static/img/album/dash-bg.png');
		background-size: 100% 100%;
		padding: 16rpx;
		overflow: hidden;
		.inner-container {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			background-color: #3041D7;
			border-radius: 96rpx;
		}
		.img-box {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			overflow-y: auto;
			flex: 1;
			margin: 42rpx 20rpx;
			padding: 24rpx 16rpx;
			background-color: #fff;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
			border-radius: 16rpx;
			.item {
				width: 49%;
				height: 236rpx;
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				position: relative;
				overflow: hidden;
				&:nth-child(2n-1) {
					margin-right: 2%;
				}
				.img {
					width: 100%;
					heigit: 100%;
				}
				.checkbox {
					display: flex;
					position: absolute;
					right: 12rpx;
					top: 12rpx;
					width: 36rpx;
					height: 36rpx;
				}
				.u-checkbox__label {
					margin: 0;
				}
				/deep/.u-checkbox__icon-wrap {
					border: 1px solid #fff;
				}
				/deep/.u-checkbox__icon-wrap--checked {
					border: 1px solid #2979ff;
				}
			}
		}
		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 78rpx;
			.favorite {
				width: 318rpx;
				height: 94rpx;
			}
			.start {
				width: 180rpx;
				height: 118rpx
			}
		}
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 440rpx;
			height: 80rpx;
			margin-bottom: 24rpx;
			background: linear-gradient(90deg, #3688FF 0%, #539FFF 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-size: 32rpx;
		}
	}
</style>