<template>
	<view class="content">
		<view class="navBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="nav">
				<view class="navLeft" @click="goBack">
					<image src="../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback"></image>
				</view>
				<view class="title">供应商</view>
				<view class="goVin" ></view>
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>
		<view class="top" v-if="info" @click="gocar">
			<view class="topLeft">
				<image :src="info.carModelInfo.logo" mode="" class="carLogo"></image>
			</view>
			<view class="topRight">
				<view>
					<view class="brand">{{info.carModelInfo.brand}}</view>
					<view class="carModel">{{info.title}}</view>
				</view>
				<image src="/static/img/icon_arrow.png" mode="" class="jtImg"></image>
			</view>
		</view>
		
		<view class="cont" v-if="info">
			<view class="line" v-for="(item,index) in info.supplierlist">
				<view class="lineLeft" >
					<view class="lineCK" @click="ckItem(item)">
						
						<image class="ckiMg" src="/static/img/icon_seled@2x.png" mode="" v-if="item.ck"></image>
						<image class="ckiMg" src="/static/img/duino.png" mode="" v-if="!item.ck"></image>
						
					</view>
					<view class="nameBox">
						<view class="name" @click="ckItem(item)">{{item.supplierName}}
						<view class="lineRgiht">
							<view @click.stop="goIm(item)"  style="padding-left: 40rpx;">
								<image  class="lineRgihtIMg" src="/static/img/xiaoxi.png" mode=""></image>
							</view>
							<view style="padding-left: 40rpx;" @click.stop="call(item.mobilePhone)">
								<image  class="lineRgihtIMg2" src="/static/img/call.png" mode=""></image>
							</view>
							
						</view>
						</view>
						<view  class="jingying">经营品牌：{{item.brands}}</view>
					</view>
				</view>
				
			</view>
		
		</view>
		<view style="height: 200rpx;"></view>
		
		<!-- 选择车型 -->
		<view class="ckcarBox" v-if="ckCarShow" >
			<view class="ckcar" @click.stop="">
				<view class="ckcarTop flex">
					<view class="ckcarTitle">请选择车型</view>
					<image src="../static/img/icon_quxiao.png" mode="" class="ckcarClose" @click="ckcarClose"></image>
				</view>
				<view class="ckcarlineBox"  v-for="(item,index) in moreVinList" @click="gobyItem(item)">
					<view class="ckcarline flex">
						<view class="ckcarLeft">{{item.title}}</view>
						<image src="../static/img/icon_arrow.png" mode="" class="ckcarJtimg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view>token:{{token}}</view>
		<view>token:{{token}}</view> -->
		<view class="qunfaBox">
			<view class="qunfa" @click="qunfa">
				一键群发
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import EmojiDecoder from '../lib/EmojiDecoder';
	import restApi from '../lib/restapi';
	import {formatDate} from '../lib/utils';
	import RecorderManager from '../lib/RecorderManager';
	
	const IMAGE_MAX_WIDTH = 200;
	const IMAGE_MAX_HEIGHT = 150;
	const recorderManager = new RecorderManager();
	const GoEasy = uni.$GoEasy;
	const GRTC = uni.$GRTC;
	export default {
		data() {
			return {
				//vin: 'JHMCM56557C404453',
				//vin:'LFV3A28K3D3000001',
				vin:'',
				list:[],
				info:'',
				currentUser:'',
				token:'',
				moreVinList:[],
				ckCarShow:false,
				androidE:'',
				iosE:'',
				iStatusBarHeight:'',
			}
		},
		onLoad(opt) {
		  var token=opt.token
		  this.vin=opt.vin
		  this.token=token
		  console.log(token)
		  uni.setStorageSync('token', token);
          this.vinSupplier()
		  this.imLoginUrl()
		  //app交互
		  /* var standalone = window.navigator.standalone
		  var userAgent = window.navigator.userAgent.toLowerCase()
		  var safari = /safari/.test(userAgent)
		  var ios = /iphone|ipod|ipad|mac/.test(userAgent)
		  var android = /android/.test(userAgent)
		  if (ios) {
		  	 // window.shopAppCallbackios=this.shopAppCallbackios;
		  } else if (android) {
		  	// window.shopAppCallback=this.shopAppCallback;
		  } */
		  this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		onBackPress(options) {
		console.log('from:' + options.from)
		return true
		},
		methods: {
			goBack(){
					  //app交互
					  var standalone = window.navigator.standalone
					  var userAgent = window.navigator.userAgent.toLowerCase()
					  var safari = /safari/.test(userAgent)
					  var ios = /iphone|ipod|ipad|mac/.test(userAgent)
					  var android = /android/.test(userAgent)
					  if (ios) {
						 if ( true) {//!standalone&& !safari
						   window.webkit.messageHandlers.goMyNav.postMessage(null)
						 }
					  } else if (android) {
					  	  window.android.postMessage()
					  }
			},
			gocar(){
				 
				uni.navigateTo({
					url:'carModel?nLevelIDs='+this.info.carModelInfo.nLevelID+'&vin='+this.vin
				})
			},
		   ckItem(item){
			   console.log(item.ck)
			   if(item.ck){
				    //this.$set(item,"ck", false)
				    item.ck=false
			   }else{
				   //this.$set(item,"ck", true)
				   item.ck=true
			   }
			
		   },
		   call(num){
			   if(!num){
				   uni.showToast({
				     icon: 'none',
				     title: '该供应商未设置联系方式',
				     duration: 3000
				   });
				   return false
			   }
			   uni.makePhoneCall({
			     phoneNumber: num
			   })
		   },
		   gobyItem(item){
			   item.supplierlist.forEach(item=>{
			   	item.ck=true
			   })
			   this.info= JSON.parse(JSON.stringify(item)) ;
			 uni.setStorageSync('carModelInfo',this.info.carModelInfo )
			   this.ckCarShow=false
		   },
		   ckcarClose(){
		   	 this.ckCarShow=false;
		   },
		   qunfa(){
			   var supplierlist=[]
			   this.info.supplierlist.forEach(item=>{
				   if(item.ck){
					   supplierlist.push(item)
				   }
			   })
			   uni.setStorageSync('supplierlist', supplierlist);
			   uni.navigateTo({
			   	url:'qunfa?nLevelIDs='+this.info.carModelInfo.nLevelID+'&vin='+this.vin
			   })
		   },
		   goIm(item){
			   uni.setStorage({
			   		key: 'friend',
			   		data: item,
			   		 success: function () {	
			   				uni.navigateTo({
			   				  url: './privateChat?to=' + item.id
			   				});	
			   		 }
			   });
		   },
           vinSupplier(){
			   this.$http('imSys/vinSupplier', {
			      vin:this.vin,
			     },'GET').then(res => {
			    	  console.log(res.data.length)	
			   		  //this.info=res.data[0]	 
					   if(res.data.length>1){
						   this.ckCarShow=true
						   this.moreVinList=res.data
						   console.log(this.moreVinList)
					   }else{
						   res.data[0].supplierlist.forEach(item=>{
								item.ck=true
							})
						    this.info=res.data[0]	
							//this.info
							uni.setStorageSync('carModelInfo',this.info.carModelInfo )
					   }
			     }) 
		   },
		   imLoginUrl(){
			   this.$http('imSys/imLoginUrl', {
			      token:this.token,
			     },'POST').then(res => {
			    	 // console.log(res)	
			   		  var users={
						  userId:res.data.userId,
						  name:res.data.users.name,
						  avatar:'',
						  id:res.data.userId,
					  }
					  this.currentUser=users
					  this.connectGoEasy()
					 uni.setStorageSync('users', users);
			     }) 
		   },
		   connectGoEasy(){
			   console.log(this.currentUser)
			   //this.currentUser.id="1292F5DA-793B-4549-844E-C5F606869D0C"
			   uni.setStorageSync('currentUser', this.currentUser);
			   GoEasy.connect({
			     id: this.currentUser.id,
			     data: {
			       name: this.currentUser.name,
			       avatar: this.currentUser.avatar
			     },
			     onSuccess: () => {
			       console.log('GoEasy connect successfully.')
			     },
			     onFailed: (error) => {
			       console.log('Failed to connect GoEasy, code:' + error.code + ',error:' + error.content);
			     },
			     onProgress: (attempts) => {
			       console.log('GoEasy is connecting', attempts);
			     }
			   });
		   }
		}
	}
</script>

<style scoped>
.content{
	min-height: 100vh;
	background: #F4F5F7;
}
	.carLogo{
		width: 80rpx;height: 80rpx;
	}
.top{
	padding: 24rpx;
	display: flex;
	background: #FFF;
}
.topRight{
	padding-left: 10rpx;
	display: flex;
	width: 600rpx;
	justify-content: space-between;
}
.brand{
	font-size: 30rpx;
	color: #1C1C1C;
}
.carModel{
	font-size: 26rpx;
	padding-top: 8rpx;
	color: #A5A5A5;
}
.lineRgihtIMg{
	width: 37rpx;
	height: 34rpx;
}
.lineRgihtIMg2{
	width: 31rpx;
	height: 35rpx;
}
.cont{
	margin-top: 20rpx;
	background: #FFF;
	
}
.line{
	display: flex;justify-content: space-between;
	padding: 20rpx;
	border-bottom: 1px solid #F4F5F7;
}
.lineLeft{
	display: flex;
}
.lineRgiht{
	display: flex;
}
.nameBox{
	padding-left: 24rpx;
}
.name{
	font-size: 30rpx;color: #1C1C1C;width: 650rpx;
	display: flex;justify-content: space-between;
}
.jingying{
	font-size: 26rpx;color: #A5A5A5;padding-top: 10rpx;
	width: 600rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lineCK{
	display: flex;
	align-items: center;
}

.ckcarJtimg{
	width: 26rpx;height: 26rpx;margin-top: 4rpx;
}
.ckcarlineBox{
  padding:24rpx ;	
  border-bottom: 1px solid #EEEEEE;
}
.ckcarLeft{
	font-weight: 400;line-height: 36rpx;
	color: #1A1A1A;font-size: 26rpx;
}
.ckcarBox{
	width: 100vw;height: 100vh;
	background:rgba(0, 0, 0, 0.4) ;
	position: fixed;top: 0;left: 0;
	z-index: 111;
}
.ckcar{
	width: 750rpx;
	height: 772rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	position: absolute;
	left: 0;
	bottom: 0;
}
.ckcarClose{
	width: 30rpx;height: 30rpx;
}
.ckcarTitle{
	font-weight: 500;font-size: 28rpx;
	color: #1A1A1A;
	line-height: 40rpx;
}
.ckcarTop{
	padding: 40rpx 26rpx 20rpx 24rpx;
}
.flex{
	display: flex;justify-content: space-between;
}
.ckcarClose{
	width: 30rpx;height: 30rpx;
}
.ckiMg{
	width: 40rpx;height: 40rpx;
}
.jtImg{
	width: 20rpx;height: 20rpx;
	margin-top: 30rpx;
}



.backImg{
		width: 44rpx;
		height: 44rpx;
		
		/* margin-left: 10rpx; */
		/* margin-right: 20rpx; */
	}
	.nav{
		height: 44px;
		display: flex;
		justify-content: space-between;
		
		align-items: center;
		border-bottom: 1px solid #eaeaea;
	}
.goVin{
	width: 200rpx;
	color: #3F90F7;
	text-align: right;
	padding-right: 20rpx;
}
.navLeft{
	width: 200rpx;
	padding-left: 20rpx;
}
.navBox{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 11;
	width: 100vw;
	background: #fff;
}
.qunfaBox{
	background: #FFFFFF;
	box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(153,153,153,0.2);
	width: 750rpx;
	padding: 24rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
}
.qunfa{
	width: 602rpx;
	height: 74rpx;
	background: #3F90F7;
	border-radius: 8rpx;
	text-align: center;
	line-height: 74rpx;
	background: #3F90F7;
	font-weight: 500;
	font-size: 28rpx;
	color: #FEFFFE;
	border-radius: 10rpx;
   
}
</style>
