<template>
	<view class="content">
		<view class="top" v-if="info">
			<view class="topLeft">
				<image :src="info.carModelInfo.logo" mode="" class="carLogo"></image>
			</view>
			<view class="topRight">
				<view class="brand">{{info.carModelInfo.brand}}</view>
				<view class="carModel">{{info.title}}</view>
			</view>
		</view>
		
		<view class="cont" v-if="info">
			<view class="line" v-for="(item,index) in info.supplierlist">
				<view class="lineLeft" @click="ckItem(item)">
					<view class="lineCK">
						
						<image class="ckiMg" src="/static/img/cky.png" mode="" v-if="item.ck"></image>
						<image class="ckiMg" src="/static/img/ckn.png" mode="" v-if="!item.ck"></image>
						
					</view>
					<view class="nameBox">
						<view class="name">{{item.supplierName}}</view>
						<view class="jingying">经营品牌：{{item.brands}}</view>
					</view>
				</view>
				<view class="lineRgiht">
					<view>
						<image @click="call(item.mobilePhone)" class="lineRgihtIMg" src="/static/images/icon_phone@2x.png" mode=""></image>
					</view>
					<view>
						<image @click="goIm(item)"  class="lineRgihtIMg" src="/static/images/chat.png" mode=""></image>
					</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 class="qunfa" @click="qunfa">
			一键群发
		</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,
			}
		},
		onLoad(opt) {
		  var token=opt.token
		  this.vin=opt.vin
		  this.token=token
		  console.log(token)
		  uni.setStorageSync('token', token);
          this.vinSupplier()
		  this.imLoginUrl()
		},
		methods: {
		   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){
			   uni.makePhoneCall({
			     phoneNumber: num
			   })
		   },
		   gobyItem(item){
			   item.supplierlist.forEach(item=>{
			   	item.ck=true
			   })
			   this.info= JSON.parse(JSON.stringify(item)) ;
			 
			   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'
			   })
		   },
		   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
					   }
			     }) 
		   },
		   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:'',
					  }
					  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;
}
.brand{
	font-size: 28rpx;
	color: #333;
}
.carModel{
	font-size: 26rpx;
	padding-top: 8rpx;
	color: #999;
}
.lineRgihtIMg{
	width: 40rpx;
	height: 40rpx;
}
.cont{
	margin-top: 20rpx;
	background: #FFF;
	
}
.line{
	display: flex;justify-content: space-between;
	padding: 20rpx;
	border-bottom: 1px solid #F4F5F7;
}
.lineLeft{
	display: flex;
}
.nameBox{
	padding-left: 10rpx;
}
.name{
	font-size: 30rpx;color: #333;
}
.jingying{
	font-size: 26rpx;color: #999;padding-top: 10rpx;
}
.lineCK{
	display: flex;
	align-items: center;
}
.qunfa{
	width: 650rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: #3F90F7;
	color: #ffffff;
	font-size: 30rpx;
	border-radius: 10rpx;
	position: fixed;
	bottom: 100rpx;
	left: 50rpx;
}
.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;
}
</style>
