<template>
	<view class="first-shop">
		<view style="background: #FFFFFF;box-shadow: 0px 10px 50px 0px rgba(218, 220, 230, 0.85);border-radius: 30rpx;padding:30rpx">
			<view class="label-text" style="margin-top:0;margin-bottom: 30rpx;">
				<text>店铺照片</text>
				<text style="color:#999;font-weight: 400;">（上传3-5张照片,第一张为封面图）</text>
			</view>
			<view>
				<u-upload v-if="isdisabled==false" :action="action" :max-count="5" :max-size="2*1024*1024" :file-list="fileList" @on-remove="onRemove1"  :custom-btn="true" @on-success="uploadSuccessHandler">
					<view slot="addBtn" class="slot-btn" > 
						<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 class="imglist" v-else >
					<view class="imglist-item" v-for='(x,i) in model.ImageList' @click="previewImage(model.ImageList,i)">
						<image :src="x" style="width: 100%;height: 100%;border-radius: 4px;"></image>
					</view>
				</view>
			</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"
						:controls='controls'
						:show-center-play-btn='false'
						:show-fullscreen-btn='false' 
						@fullscreenchange='videoControl' ></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="isdisabled==false"
						>
							
							<u-icon class="u-icon" name="cross" size="30" color="#ffffff"></u-icon>
						</view>
				</view>
				<view v-if="model.VideoUrl=='' && isdisabled==false">
					<view slot="addBtn" class="slot-btn" @click="upvideo()">
						<image class="image" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616573063000_398.png" mode="widthFix"></image>
						
					</view>
				</view>
				<view v-if="model.VideoUrl=='' && isdisabled==true">
					无
				</view>
			</view>
			<view class="bottom-border">
				<view class="label-text">首店名称</view>
				<u-field v-model="model.Name" :disabled="isdisabled" padding="10px 0px 5px 0" label-width="0" placeholder="请填写首店名称" placeholder-style="color:#CECECE;"></u-field>
			</view>
			<view class="bottom-border">
				<view class="label-text">首店类型</view>
				<u-field v-model="TypeName" @click="isdisabled==false?showTypeStatus = true:''" :disabled="true" right-icon="arrow" padding="10px 0px 5px 0" label-width="0" placeholder="请选择首店类型" placeholder-style="color:#CECECE;"></u-field>
				<u-action-sheet @click="clickItem" name='Name' :list="typeList" v-model="showTypeStatus"></u-action-sheet>
			</view>
			 <view class="bottom-border">
				<view class="label-text">
					<text>品牌属地</text>
					<text style="color:#999;font-weight: 400;">（国家或地区）</text>
				</view>
				<u-field v-model="BrandTypeName" @click="isdisabled==false?showTypeStatus2 = true:''" :disabled="true" right-icon="arrow" padding="10px 0px 5px 0" label-width="0" placeholder="请选择品牌属地" placeholder-style="color:#CECECE;"></u-field>
				<u-action-sheet @click="clickItem2" name='Name' :list="brandTypelist" v-model="showTypeStatus2"></u-action-sheet>
			</view>
			<view class="bottom-border">
				<view class="label-text">首店开业时间</view>
				<u-field v-model="model.OpenTime" @click="isdisabled==false?showOpenTime=true:''" :disabled="true" right-icon="arrow" padding="10px 0px 5px 0" label-width="0" placeholder="请选择首店开业时间" placeholder-style="color:#CECECE;"></u-field>
				<u-picker mode="time" v-model="showOpenTime" :params="params" @confirm="confirmOpenTime"></u-picker>
			</view>
			<view class="bottom-border">
				<view class="label-text">首店地址</view>
				<u-field v-model="model.Address" :disabled="isdisabled" padding="10px 0px 5px 0" label-width="0" placeholder="请填写首店地址" placeholder-style="color:#CECECE;"></u-field>
			</view>
			<view class="bottom-border">
				<view class="label-text">商圈</view>
				<u-field v-model="model.TradingArea" :disabled="isdisabled" padding="10px 0px 5px 0" label-width="0" placeholder="请填写首店所属商圈" placeholder-style="color:#CECECE;"></u-field>
			</view>
			<view class="bottom-border">
				<view class="label-text">
					<text>行业</text>
				</view>
				<u-field v-model="BusinessName" @click="isdisabled==false?showTypeStatus3 = true:''" :disabled="true" right-icon="arrow" padding="10px 0px 5px 0" label-width="0" placeholder="请选择品牌属地" placeholder-style="color:#CECECE;"></u-field>
				<u-action-sheet @click="clickItem3" name='Name' :list="yeTaiList" v-model="showTypeStatus3"></u-action-sheet>
			</view>
			<view class="bottom-border">
				<view class="label-text">
					<text>首店业种类型</text>
					<text style="color:#999;font-weight: 400;">（如书店，超市，川菜，日料等）</text>
				</view>
				<u-field v-model="model.BusinessDetail" :disabled="isdisabled" padding="10px 0px 5px 0" label-width="0" placeholder="请填写首店业种类型" placeholder-style="color:#CECECE;"></u-field>
			</view>
			<view class="bottom-border">
				<view class="label-text">
					<text>所属区县</text>
					
				</view>
				<u-field v-model="model.County" :disabled="isdisabled" padding="10px 0px 5px 0" label-width="0" placeholder="请填写所属区县" placeholder-style="color:#CECECE;"></u-field>
			</view>
			<view class="bottom-border">
				<view class="label-text">
					<text>首店类别</text>
				</view>
				<u-field v-model="CategoryName" @click="isdisabled==false?showTypeStatus4 = true:'';" :disabled="true" right-icon="arrow" padding="10px 0px 5px 0" label-width="0" placeholder="请选择品牌属地" placeholder-style="color:#CECECE;"></u-field>
				<u-action-sheet @click="clickItem4" name='Name' :list="shenList" v-model="showTypeStatus4"></u-action-sheet>
			</view>
			<view class="bottom-border">
				<view class="label-text">联系人</view>
				<u-field v-model="model.Contact" :disabled="isdisabled" padding="10px 0px 5px 0" label-width="0" placeholder="请填写联系人" placeholder-style="color:#CECECE;"></u-field>
			</view>
			<view class="bottom-border">
				<view class="label-text">联系电话</view>
				<u-field v-model="model.ContactMobile" :disabled="isdisabled" padding="10px 0px 5px 0" label-width="0" placeholder="请填写联系电话" placeholder-style="color:#CECECE;"></u-field>
			</view>	
			<view class="bottom-border">
				<view class="label-text">
					<text>首店简介</text>
					<text style="color:#999;font-weight: 400;">（100字以内）</text>
				</view>
				<u-field v-model="model.Description" :disabled="isdisabled" maxlength="100" type="textarea" padding="10px 0px 5px 0" label-width="0" placeholder="可以填写您的首店简介" placeholder-style="color:#CECECE;"></u-field>
			</view>
			<view style="margin-top:40rpx" v-if="isdisabled == false">
				<u-button shape="square" :ripple="true" @click='tijiao()' :custom-style="{background:mainColor,border:'none',color:'#FFF'}">提交申请</u-button>
			</view>
			<view style="margin-top:40rpx" v-if="isdisabled == true && model.AuditState!=2">
				<u-button shape="square" :ripple="true" @click='showdelete=true' :custom-style="{background:'#F70027',border:'none',color:'#FFF'}">删除</u-button>
			</view>
		</view>
		
		<u-modal v-model="showdelete" content="删除该首店认证？" :show-cancel-button='true'	 @cancel='showdelete=false' @confirm='deletebtn()'></u-modal>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
	</view>
</template>

<script>
	import auth from "../../../components/auth/index.vue";
	export default {
		components: {
		  auth
		},
		data() {
			return {
				pageTitle:'首店申请',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showAuth:false,
				action: this.host2 + "/api/File/UploadTencent",
				fileList:[],
				showdelete:false,
				mainColor:"",
				TypeName:'',//类型名称
				BrandTypeName:'',//品牌归属地
				BusinessName:'',//认证行业
				CategoryName:'',//类别
				model:{
					Id:0,
					VideoUrl:'',
					Name:"",
					CoverImage:'',
					ImageList:[],
					shopType:0,
					Type:0,
					OpenTime:'',
					Address:'',
					TradingArea:'',
					BusinessType:0,
					BusinessDetail:'',
					Description:'',
					County:'',
					Category:0,
					Contact:'',
					ContactMobile:'',
					BrandType:'',
				},
				typeList: [],
				brandTypelist:[],//品牌归属地
				yeTaiList: [],//行业枚举
				shenList: [],//
				showTypeStatus:false,
				showTypeStatus2:false,
				showTypeStatus3:false,
				showTypeStatus4:false,
				showOpenTime:false,
				showYeTai:false,
				showShenQingType:false,
				controls:false,//显示默认控件
				isdisabled :false,//是否是详情过来的
				index:0,//列表带过来的索引
			}
		},
		onLoad(options) {
			if(options && options.Id){
				this.GetAuthenticationInfo(options.Id)//首店申请详情
				this.isdisabled=true;
				this.index = options.index
				uni.setNavigationBarTitle({
					title: '申请详情'
				});
			}else{
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
				  this.u = {
					nickName: "未登录",
					avatarUrl: ""
				  };
				  this.showAuth = true;
				}else{
					this.GetAuthenticationTypeEnumList()//类型
					this.GetBrandTypeEnumList()//品牌归属地枚举
					this.GetBusinessTypeEnumList()//申请认证行业枚举
					this.GetAuthenticationCategoryEnumList()//认证分类枚举
				
				}
				let currentPages = getCurrentPages();
				let u = "/" + currentPages[currentPages.length - 1].route;
				let pages = wx.getStorageSync("basedata")
				  ? wx.getStorageSync("basedata").bar_title
				  : [];
				pages.forEach((x) => {
				  if (x.value == u) {
				    this.pageTitle = x.new_name ? x.new_name : x.name;
				  }
				});
				uni.setNavigationBarTitle({
				  title: this.pageTitle,
				});
			}
		},
		mounted() {
			
			this.mainColor = this.$uiConfig.mainColor;
			let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo").MallBaseId : 1;
			this.action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
		},
		methods: {
			GetAuthenticationInfo(id){
				this.request2(
					{
						url: '/api/AppletTrade/GetAuthenticationInfo',
						data: {AuthenticationId:id}
					},
					res => {
						if(res.resultCode==1){
							this.model = res.data;
							this.fileList = []
							if(this.model.ImageList.length>0){
								this.model.ImageList.forEach(x=>{
									let obj ={
										url:x
									}
									this.fileList.push(obj)
								})
							}
							this.GetAuthenticationTypeEnumList()//类型
							this.GetBrandTypeEnumList()//品牌归属地枚举
							this.GetBusinessTypeEnumList()//申请认证行业枚举
							this.GetAuthenticationCategoryEnumList()//认证分类枚举
						}
					}
				);
			},
			GetAuthenticationTypeEnumList(){
				this.request2(
					{
						url: '/api/AppletTrade/GetAuthenticationTypeEnumList',
						data: {Name:'',Id:''}
					},
					res => {
						if(res.resultCode==1){
							this.typeList = res.data
							if(this.isdisabled == true){
								this.typeList.map(x=>{
									if(x.Id==this.model.Type){
										this.TypeName = x.Name
										return
									}
								})
							}
						}
					}
				);
			},
			GetBrandTypeEnumList(){
				this.request2(
					{
						url: '/api/AppletTrade/GetBrandTypeEnumList',
						data: {Name:'',Id:''}
					},
					res => {
						if(res.resultCode==1){
							this.brandTypelist = res.data
							if(this.isdisabled == true){
								this.brandTypelist.map(x=>{
									if(x.Id==this.model.BrandType){
										this.BrandTypeName = x.Name
										return
									}
								})
							}
						}
					}
				);
			},
			GetBusinessTypeEnumList(){
				this.request2(
					{
						url: '/api/AppletTrade/GetBusinessTypeEnumList',
						data: {Name:'',Id:''}
					},
					res => {
						if(res.resultCode==1){
							this.yeTaiList = res.data
							if(this.isdisabled == true){
								this.yeTaiList.map(x=>{
									if(x.Id==this.model.BusinessType){
										this.BusinessName = x.Name
										return
									}
								})
							}
						}
					}
				);
			},
			GetAuthenticationCategoryEnumList(){
				this.request2(
					{
						url: '/api/AppletTrade/GetAuthenticationCategoryEnumList',
						data: {Name:'',Id:''}
					},
					res => {
						if(res.resultCode==1){
							this.shenList = res.data
							if(this.isdisabled == true){
								this.shenList.map(x=>{
									if(x.Id==this.model.Category){
										this.CategoryName = x.Name
										return
									}
								})
							}
						}
					}
				);
			},
			tijiao(){
				if(this.model.ImageList.length==0){
					uni.showToast({
					  title: "请选择图片",
					  icon:'none'
					});
					return
				}
				this.model.CoverImage = this.model.ImageList[0]
				
				this.request2(
					{
						url: '/api/AppletTrade/SetAuthenticationInfo',
						data: this.model
					},
					res => {
						if(res.resultCode==1){
							uni.showToast({
							  title: '提交成功',
							  icon:'none'
							});
							let that = this
							console.log(res.data)
							that.showTemplate(res.data)
							
							
							
						}
					}
				);
			},
			//显示模板
			showTemplate(template) {
				uni.requestSubscribeMessage({
					tmplIds: template,
					complete(res){
						console.log(res)
						uni.reLaunch({
							url: "/pages/kotra/firstShop/list",
						})
					},
				
				})
			},
			deletebtn(){//删除
				this.request2(
					{
						url: '/api/AppletTrade/DelAuthenticationInfo',
						data: {AuthenticationId:this.model.Id}
					},
					res => {
						if(res.resultCode==1){
							uni.showToast({
							  title: '删除成功',
							  icon:'none'
							});
							let that = this
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 前一个页面
							setTimeout(() => {
								uni.navigateBack({
									success: function() {
										beforePage.$vm.getsplice(that.index); // 执行前一个页面的created方法
									}
								});
							}, 500)
						}
					}
				);
			},
			confirmOpenTime(r){
				uni.hideLoading()
				this.model.OpenTime=r.year+"-"+r.month+"-"+r.day
			},
			
			onRemove1(index) {
				this.model.ImageList.splice(index, 1);
			},
			clickItem(index) {//类型选择
				this.TypeName = this.typeList[index].Name;
				this.model.Type = this.typeList[index].Id;
			},
			clickItem2(index){//品牌归属地
				this.BrandTypeName = this.brandTypelist[index].Name;
				this.model.BrandType = this.brandTypelist[index].Id;
			},
			clickItem3(index){//行业
				this.BusinessName = this.yeTaiList[index].Name;
				this.model.BusinessType = this.yeTaiList[index].Id;
			},
			clickItem4(index){//类别
				this.CategoryName = this.shenList[index].Name;
				this.model.Category = this.shenList[index].Id;
			},
			
			uploadSuccessHandler(data, index, lists) {
				let r = JSON.parse(data);
				console.log(r)
				this.model.ImageList.push(r.data);
			},
			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 MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo").MallBaseId :
					1;
				let action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
				let that = this
				uni.uploadFile({
					url: 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) {
						console.log(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);
						},
					},
				});
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  this.GetAuthenticationTypeEnumList()//类型
			  this.GetBrandTypeEnumList()//品牌归属地枚举
			  this.GetBusinessTypeEnumList()//申请认证行业枚举
			  this.GetAuthenticationCategoryEnumList()//认证分类枚举
			},
			//关闭登录窗口
			gbAuth(){
				uni.navigateBack()
			},
		}
	}
</script>

<style>
	.first-shop{background: #f6f6f6;padding: 30rpx;min-height: 100vh;font-family: pingfang;}
	.first-shop .label-text{
		font-size: 28rpx;
		color: #1F1F1F;
		font-weight: 600;
		margin-top: 40rpx;
	}
	.first-shop .slot-btn{
		width: 220rpx;
		height: 220rpx;
		background: #F5F5F5;
		border-radius: 17rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.first-shop .slot-btn .image{
		width: 54rpx;
		height: auto;
	}
	.first-shop .bottom-border{
		border-bottom: 3rpx #DADCE6 solid;
	}
	#myVideo{
		width: 150px; height: 200px;
	}
	.imglist{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.imglist-item{
		width: 180rpx;
		height: 180rpx;
		border-radius: 4px;
		margin-left: 15px;
		margin-bottom: 10px;
	}
</style>
