<style scoped lang="scss">
	.carrierInformationfrom{
		width: 100%;
		.slot-btn{
			width: 220rpx;
			height: 220rpx;
			background: #F5F5F5;
			border-radius: 17rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.slot-btn .image{
			width: 54rpx;
			height: auto;
		}
		#myVideo{
			width: 150px; height: 200px;
		}
		.bottom-border{
			border-bottom: 3rpx #DADCE6 solid;
			margin-top: 10px;
			.bottom-border_r{
				height: 42px;
				display: flex;
				align-items: center;
			}
			.con6 {
				display: flex;
				flex-wrap: wrap;
			
				.goodsTypeImg {
					width: 278rpx;
					height: 144rpx;
					background-color: #232323;
					opacity: 0.6;
					border-radius: 18rpx;
					margin-bottom: 30rpx;
				}
			}
		}
		.butBox2 {
			margin: 10rpx auto;
			width: 300rpx;
			height: 80rpx;
			background-color: #F70027;
			box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(249, 54, 85, 0.58);
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
		
			.next {
				width: 100%;
				height: auto;
			}
		}
		
	}
	 
</style>

<template>
	<view class="carrierInformationfrom">
		<view class="bottom-border" v-if="datas.CompanyStatus==-1">
			<view class="label-text">关联载体<span style='color: #E54D42;' >*</span></view>
			<view class="bottom-border_r" style="padding: 10px 0;height: 42px;display: flex;" @click="gobrandsearch()">
				<input type="text" v-model="glCarrierName" :disabled="true" style="padding: 10px 0;width: 1px;flex:1" placeholder="请选择关联载体"  placeholder-style="color:#CECECE;">
				<u-icon name="arrow" color="#A5A4AC" size="30" ></u-icon>
			</view>
		</view>
		<view class="bottom-border">
			<view class="label-text">载体名称 <span style='color: #E54D42;' >*</span></view>
			<input type="text" v-model="model.CarrierName" style="padding: 10px 0;" placeholder="请填写载体名称" :disabled="disabled||disabled2?true:false"  placeholder-style="color:#CECECE;">
		</view>
		<view class="label-text" style="margin-top:20px;margin-bottom: 30rpx;">
			<text>Logo</text>
		</view>
		<view @click="disabled?'':uploadcard()">
			<view slot="addBtn" class="slot-btn" v-if="model.Logo==''" > 
				<image class="image" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616498310000_18.png" mode="widthFix"></image>
			</view>
			<view class="slot-btn" v-if="model.Logo!=''"  @click="disabled?previewImage([model.Logo],1):''">
				<image  :src="model.Logo" mode="widthFix"></image>
			</view>
			
		</view>
		<view class="label-text" style="margin-top:20px;margin-bottom: 30rpx;">
			<text>介绍图</text>
			<text style="color:#999;font-weight: 400;">（最多9张,第一张为封面图）</text>
		</view>
		<view>
			<u-upload  :action="action" :max-count="9" :max-size="2*1024*1024" :deletable='!disabled' :file-list="fileList" @on-remove="onRemove1"  :custom-btn="true" @on-success="uploadSuccessHandler">
				<view slot="addBtn" class="slot-btn" v-if='disabled==false'> 
					<image class="image" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616498310000_18.png" mode="widthFix"></image>
				</view>
			</u-upload>
		</view>
		<view class="label-text" style="margin-top:20px;margin-bottom: 30rpx;">
			<text>载体视频</text>
		</view>
		<view style="margin-bottom: 30rpx;">
			<view style="width: 150px; height: 200px;position: relative;margin-right: 20px;" v-if="model.VideoUrl!=''">
				<video id="myVideo" :src="model.VideoUrl" style="width: 150px; height: 200px;"
					:controls='controls'
					:show-center-play-btn='true'
					:show-fullscreen-btn='true'  ></video>
					
				<!-- 	<view style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;" @click="enlarge()">
						<u-icon name="play-circle-o" :size="70" color="#FFF"></u-icon>
					</view> -->
					<view style="width: 50rpx;height: 50rpx;position: absolute;right: 10rpx;top:10rpx;
						border-radius: 25rpx;
						background: #F30329;
						display: flex;
						align-items: center;
						justify-content: center;
					" @tap.stop="model.VideoUrl=''"	
						v-if='!disabled'
					>
						<u-icon class="u-icon" name="cross" size="30" color="#ffffff"></u-icon>
					</view>
			</view>
			<view v-if="model.VideoUrl=='' ">
				<view slot="addBtn" class="slot-btn" @click="disabled?'': upvideo()">
					<image class="image" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616573063000_398.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="bottom-border">
			<view class="label-text">开发商</view>
			<input type="text" v-model="model.Developers" :disabled="disabled" style="padding: 10px 0;" placeholder="请填写开发商"  placeholder-style="color:#CECECE;">
		</view>
		<view class="bottom-border">
			<view class="label-text">载体地址</view>
			<view class="bottom-border_r" style="padding: 10px 0;height: 42px;display: flex;" @click="disabled?'':getAddress()">
				<u-icon name="location" :color="mainColor" size="30" ></u-icon>
				<text style="width: 1px;flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;margin-right: 5px;" v-if="model.Address!=''">{{model.Address}}</text>
				<text style="width: 1px;flex: 1;color: #CECECE;" v-if="model.Address==''">请选择地址</text>
				<u-icon name="arrow" color="#A5A4AC" size="30" ></u-icon>
			</view>
		</view>
		<view class="bottom-border">
			<view class="label-text">开业时间</view>
			<input type="text" @click="disabled?'':showOpenTime=true" v-model="model.OpenTime" :disabled="true" style="padding: 10px 0;" placeholder="请选择开业时间"  placeholder-style="color:#CECECE;">
			<u-picker mode="time" v-model="showOpenTime" :params="params" @confirm="confirmOpenTime"></u-picker>
		</view>
		<view class="bottom-border">
			<view class="label-text">项目类型</view>
			<view class="con6" style="margin-top: 20px;">
				<u-radio-group v-model="model.ProjectType">
					<u-radio v-for="(item1, index1) in goodsType" :key="index1" :name="item1.Id" shape="circle" :disabled="disabled" >
						<image :src="goodsTypeImg[item1.Id]" mode="widthFix" class="goodsTypeImg"></image>
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="bottom-border">
			<view class="label-text">商业体量</view>
			<view class="bottom-border_r" style="padding: 10px 0;height: 42px;display: flex;" >
				<input type="number" v-model="model.CarrierSize"  :disabled="disabled" style="padding: 10px 0;width: 1px;flex:1;margin-right: 10px;" placeholder="请输入商业体量"  placeholder-style="color:#CECECE;">
				<span >万平方米</span>
			</view>
		</view>
		<view class="bottom-border">
			<view class="label-text">商业层数</view>
			<input type="text" v-model="model.LayersNum" :disabled="disabled" style="padding: 10px 0;" placeholder="请填写商业层数"  placeholder-style="color:#CECECE;">
		</view>
		<view class="bottom-border">
			<view class="label-text">车位数量 </view>
			<input type="number" v-model="model.CarNum" :disabled="disabled" style="padding: 10px 0;" placeholder="请填写车辆数量"  placeholder-style="color:#CECECE;">
		</view>
		<view class="bottom-border">
			<view class="label-text">业态规则</view>
			<input type="text" v-model="model.CarrierPlan" :disabled="disabled" style="padding: 10px 0;" placeholder="请填写业态规则"  placeholder-style="color:#CECECE;">
		</view>
		<view class="bottom-border">
			<view class="label-text">招引目标</view>
			<input type="text" v-model="model.CarrierTarget" :disabled="disabled" style="padding: 10px 0;" placeholder="请填写招引目标"  placeholder-style="color:#CECECE;">
		</view>
		<view class="bottom-border">
			<view class="label-text">总体定位</view>
			<input type="text" v-model="model.Location" :disabled="disabled" style="padding: 10px 0;" placeholder="请填写总体定位"  placeholder-style="color:#CECECE;">
		</view>
		<view class="bottom-border">
			<view class="label-text">目标人群</view>
			<input type="text" v-model="model.Crowd" :disabled="disabled" style="padding: 10px 0;" placeholder="请填写目标人群"  placeholder-style="color:#CECECE;">
		</view>
		<view class="bottom-border" style="border-bottom: none;">
			<view class="label-text">地铁信息</view>
			<view v-if='MetroList.length>0'>
				<view v-for="(x,y) in MetroList" :key='y' style="border-bottom: 3rpx #DADCE6 solid;">
					<view class="bottom-border_r" >
						<input type="text" v-model="x.MetroNum" :disabled="disabled"  style="padding: 10px 0;width: 70px;margin-right: 5px;border-bottom:1rpx #DADCE6 solid ;" placeholder="地铁线路"  placeholder-style="color:#CECECE;">
						<view style="width: 40px;">号线</view>
						<input type="text" v-model="x.MetroName"  :disabled="disabled" style="padding: 10px 0;width: 1px;flex:1;margin-right: 5px;border-bottom:1rpx #DADCE6 solid ;" placeholder="站点名称"  placeholder-style="color:#CECECE;">
					</view>
					<view class="bottom-border_r">
						<input type="text" v-model="x.Distance" :disabled="disabled"  style="padding: 10px 0;width: 1px;flex:1;margin-right: 5px;" placeholder="距离"  placeholder-style="color:#CECECE;">
						<u-icon name="close" color="#E54D42" size="50" v-if='!disabled'  @click="delCarrier(index)"></u-icon>
					</view>
				</view>
			</view>
			<u-icon name="add-o" color="#2979ff" size="50" style='margin-top: 20px;' @click="addMetroList" v-if='!disabled'></u-icon>
			
		</view>
			
			
		
		<view style="margin-top: 30px;">
			<view class="butBox2" @click="carrierSubmit" v-if='!disabled'>
				<text v-if='datas.CompanyStatus && datas.CompanyStatus==1'>确定修改</text>
				<text v-else>完成</text>
			</view>
			<view class="butBox2" @click="goback" v-else>
				<text >返回</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
		    datas: {
		    	type: Object,
		    },
		},
		data(){
			return{
				mainColor:'',
				controls:true,
				action: this.host2 + "/api/File/UploadTencent",
				fileList:[],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				model:{
					ID: 0,
					CompanyId:0,//认证Id
					ExistCarrierId:0,//绑定id
					CarrierName: '', //	载体名称
					Logo: '',
					BannerList: [], //载体介绍图
					VideoUrl: '', //载体视频
					Address: '', //载体地址
					LatAndLon: '', //载体地址经纬度
					Developers: '', //开发商
					OpenTime: '', //开业时间
					ProjectType: 0, //项目类型
					CarrierSize: 0, //商业体量
					LayersNum: '', //商业层数
					CarNum: 0, //车位数量
					CarrierPlan: '', //业态规划
					CarrierTarget: '', //招引目标
					Location: '', //定位
					Crowd: '', //目标人群
					CarrierMetroList: [] //地铁信息
				},
				showOpenTime:false,
				goodsType:[],//载体类型
				goodsTypeImg: {
					1: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-baihuo.png",
					2: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-shappingmall.png",
					3: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-center.png",
					4: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-other.png"
				},
				MetroList:[],
				disabled:false,
				disabled2:false,
				glCarrierName:'',
			}
		},
		onLoad(options){
			let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo").MallBaseId : 1;
			this.action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
			this.mainColor = this.$uiConfig.mainColor;
			
		},
		created() {
			this.GetProjectTypeEnumList()//载体性质
			this.model.CompanyId = this.datas.CompanyId
			
			if(this.datas.CompanyStatus!=undefined && this.datas.IsComplete != undefined){//判断是否填写过了
				let data = this.datas.CarrierModel
				// this.model = this.datas.CarrierModel
				this.model.ID = data.ID?data.ID:0;
				this.model.ExistCarrierId = data.ExistCarrierId?data.ExistCarrierId:0;
				this.model.CarrierName = data.CarrierName?data.CarrierName:'';
				this.model.Logo = data.Logo? data.Logo:'';
				this.model.BannerList = data.BannerList?data.BannerList:[];
				this.model.VideoUrl = data.VideoUrl?data.VideoUrl:'';
				this.model.Address = data.Address?data.Address:'';
				this.model.LatAndLon = data.LatAndLon?data.LatAndLon:'';
				this.model.Developers = data.Developers?data.Developers:'';
				this.model.OpenTime = data.OpenTime?data.OpenTime.split('T')[0]:'';
				this.model.ProjectType = data.ProjectType?data.ProjectType:0;
				this.model.CarrierSize = data.CarrierSize?data.CarrierSize:0;
				this.model.LayersNum = data.LayersNum?data.LayersNum:'';
				this.model.CarNum = data.CarNum?data.CarNum:0;
				this.model.CarrierPlan = data.CarrierPlan?data.CarrierPlan:'';
				this.model.CarrierTarget = data.CarrierTarget?data.CarrierTarget:'';
				this.model.Location = data.Location? data.Location:'';
				this.model.Crowd = data.Crowd?data.Crowd:'';
				this.model.CarrierMetroList = data.CarrierMetroList?data.CarrierMetroList:[];
				
				this.MetroList = this.model.CarrierMetroList
				if(this.model.BannerList && this.model.BannerList.length>0){
					this.model.BannerList.forEach(x=>{
						let obj ={
							url:x
						}
						this.fileList.push(obj)
					})
				}else{
					this.model.BannerList = [];
					this.fileList= []
				}
				
				if(!this.model.Logo){
					this.model.Logo = ''
				}
				if(this.datas.CompanyStatus==0 &&  this.datas.IsComplete==1){//审核中
					this.disabled = true
				}
				if(this.datas.CompanyStatus==1){
					this.disabled2 = true
				}
				if(this.model.ExistCarrierId>0){
					this.disabled2 = true;
					this.glCarrierName = this.model.CarrierName
				}
			}
		},
		methods:{
			GetProjectTypeEnumList(){
				let parms = {
					url: "/api/AppletTrade/GetProjectTypeEnumList",
				}
				this.request2(parms, (res) => {
					if (res.resultCode == 1) {
						this.goodsType = res.data
					}
				})
			},
			onRemove1(index) {
				this.model.BannerList.splice(index, 1);
			},
			uploadSuccessHandler(data, index, lists) {
				let r = JSON.parse(data);
				this.model.BannerList.push(r.data);
			},
			uploadcard(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async(res) => {
						var tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '正在上传中...'
						})
						for (let temp of tempFilePaths) {
							// 图片上传服务器
							await uni.uploadFile({
								url: this.action,
								filePath: temp,
								name: 'file',
								formData: {
									user: 'test'
								},
								
								success: res => {
									let data = JSON.parse(res.data)
									// 上传完成后处理
									this.model.Logo = data.data
									uni.hideLoading()
								},
								
							});
						}
					}
				});
			},
			enlarge(file) {
				// 全屏
				this.videoContext = uni.createVideoContext('myVideo');
				this.videoContext.requestFullScreen({
					direction:0
				})
				
			},
			videoControl(e){
				if(e.detail.fullScreen==false){
					this.videoContext.stop()
					this.controls=false
				}else{
					this.videoContext.play()
					this.controls=true
				}
			},
			upvideo() {
				let that = this
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res)
						that.upFile(res.tempFilePath, 1)
						uni.showLoading({
							title: '上传中...'
						})
			
					},
					fail(err) {
						console.log(err, )
					}
				});
			},
			upFile(filePath, type) {
				
				
				let that = this
				uni.uploadFile({
					url: that.action,
					filePath: filePath,
					name: 'file',
					formData: {
						user: 'tesdt'
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						if (uploadFileRes.statusCode == 200) {
							let data = JSON.parse(uploadFileRes.data)
							that.model.VideoUrl=data.data
							
						}
			
					},
					fail: function(res) {
						wx.showToast({
							title: '上传失败!',
							icon: 'none',
							duration: 1000
						})
					}
				});
			},
			previewImage(imgs,i) {
				
				uni.previewImage({
					urls: imgs,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			//打开地图
			getAddress() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						that.model.Address = res.name;
						that.model.LatAndLon = res.latitude + ',' + res.longitude;
					},
					fail: function(err) {
						that.fetchAgainLocation()
					}
				});
			},
			//重新提示用户打开设置对地图授权
			fetchAgainLocation() {
				let that = this
				wx.getSetting({
					success: (res) => {
						var statu = res.authSetting;
						if (!statu['scope.userLocation']) {
							wx.showModal({
								title: '是否授权当前位置',
								content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
								success: (tip) => {
			
									if (tip.confirm) {
										console.log(tip)
										wx.openSetting({
											success: (data) => {
												console.log(data)
												if (data.authSetting["scope.userLocation"] === true) {
													wx.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000
													})
													if (that.latitude != '' && that.longitude != '') {
														that.getAddress()
													} else {
														that.getAddress()
													}
												} else {
													wx.showToast({
														title: '授权失败',
														duration: 1000
													})
												}
											},
											fail: (err) => {
												console.log(err)
											},
											complete: () => {}
										});
									}
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				})
			},
			confirmOpenTime(r){
				this.model.OpenTime=r.year+"-"+r.month+"-"+r.day
			},
			addMetroList(){
				 let obj = {
				  MetroNum: '',
				  MetroName: '',
				  Distance: ''
				}
				this.MetroList.push(obj);
			},
			
			 //删除地铁信息
			  delCarrier(index) {
				this.MetroList.splice(index, 1);
			  },
			gobrandsearch(){//跳转到品牌搜索页面
			  	uni.navigateTo({
			  		url: '/pages/kotra/brandSearch?type=2' 
			  	})
			},
			carrierchildren(Id){
				this.request2({
						url: "/api/AppletTrade/GetCarrierDetailsForCompany",
						data: {ID:Id},
					},
					(res) => {
						if (res.resultCode == 1) {
							let data = res.data
							this.model.ExistCarrierId = Id;//绑定id
							this.model.CarrierName = data.CarrierName;
							this.model.Logo = data.Logo;
							this.model.BannerList = data.BannerList;
							this.model.VideoUrl = data.VideoUrl;
							this.model.Address = data.Address;
							this.model.LatAndLon = data.LatAndLon;
							this.model.Developers = data.Developers;
							this.model.OpenTime = data.OpenTime.split('T')[0];
							this.model.ProjectType = data.ProjectType;
							this.model.CarrierSize = data.CarrierSize;
							this.model.LayersNum = data.LayersNum;
							this.model.CarNum = data.CarNum;
							this.model.CarrierPlan = data.CarrierPlan;
							this.model.CarrierTarget = data.CarrierTarget;
							this.model.Location = data.Location;
							this.model.Crowd = data.Crowd;
							this.model.CarrierMetroList = data.CarrierMetroList;
							
							if(this.model.BannerList.length>0){
								this.model.BannerList.forEach(x=>{
									let obj ={
										url:x
									}
									this.fileList.push(obj)
								})
							}
							this.disabled2 = true;//选择了关联载体就不能修改昵称
							
							this.model.CompanyId = this.datas.CompanyId
							this.MetroList = this.model.CarrierMetroList
							this.glCarrierName = this.model.CarrierName
						}
					}
				);
			},
			carrierSubmit(){
				
				if(this.model.CarrierName == ''){
					uni.showToast({title: '请输入载体名',icon: 'none',})
					return
				}
				if(this.model.Logo == ''){
					uni.showToast({title: '请上传Logo',icon: 'none',})
					return
				}
				if(this.model.BannerList.length == 0){
					uni.showToast({title: '请上传品牌介绍图',icon: 'none',})
					return
				}
				if(this.model.Developers == ''){
					uni.showToast({title: '请输入开发商',icon: 'none',})
					return
				}
				if(this.model.ProjectType == 0){
					uni.showToast({title: '请选择项目类型',icon: 'none',})
					return
				}
				if(this.model.CarrierSize == ''){
					uni.showToast({title: '请输入商业体量',icon: 'none',})
					return
				}
				if(this.model.CarNum == ''){
					this.model.CarNum = 0
				}
				if(this.model.OpenTime == ''){
					uni.showToast({title: '请输入开业时间',icon: 'none',})
					return
				}
				console.log(this.model,'保存')
				uni.showLoading({
					title:'提交中...'
				})
				this.model.CarrierMetroList = this.MetroList
				let parms = {
					url: "/api/AppletTrade/SetCarrierApplyFor",
					data: this.model
				}
				if(this.datas.CompanyStatus && this.datas.CompanyStatus==1){
					parms = {
						url: "/api/AppletTrade/SetCarrierUpdate",
						data: this.model
					}
				}
				this.request2(parms, (res) => {//认证 - 保存载体信息
					if (res.resultCode == 1) {
						uni.hideLoading()
						uni.showToast({title: res.message,icon: 'none',})
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
						
					}
				})
				

			},
			goback(){
				uni.navigateBack()
			},
		}
	}
</script>
