<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 :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>
			<view class="bottom-border">
				<view class="label-text">首店名称</view>
				<u-field v-model="model.shopName" 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.shopType" @click="showTypeAction" :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" :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="model.area" 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.openTime" @click="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" 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.shangQuan" 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.shopType" @click="showYeTai=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="checkYetai" :list="yeTaiList" v-model="showYeTai"></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.yeZhong" 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;">（如书店，超市，川菜，日料等）</text>
				</view>
				<u-field v-model="model.city" 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.shenQingType" @click="showShenQingType=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="checkShenType" :list="shenList" v-model="showShenQingType"></u-action-sheet>
			</view>
			<view class="bottom-border">
				<view class="label-text">联系人</view>
				<u-field v-model="model.concatName" 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.concatPhone" 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.remark" type="textarea" 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" 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">
				<u-button shape="square" :ripple="true" :custom-style="{background:mainColor,border:'none',color:'#FFF'}">提交申请</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				action: this.host2 + "/api/File/UploadTencent",
				fileList:[],
				resultFileList:[],
				mainColor:"",
				model:{
					shopName:"",
					shopType:'',
					area:"",
					openTime:"",
					address:"",
					shangQuan:"",
					yeTai:"",
					yeZhong:"",
					city:"",
					shenQingType:"",
					concatName:"",
					concatPhone:"",
					remark:"",
					description:""
				},
				typeList: [
					{
						text: '全新品牌',
					},
					{
						text: '首家旗舰店'
					},
					{
						text: '跨界店'
					},
					{
						text: '概念店'
					},
					{
						text: '体验店'
					},
					{
						text: '新场景'
					}
				],
				yeTaiList: [
					{
						text: '零售',
					},
					{
						text: '餐饮'
					},
					{
						text: '娱乐'
					},
					{
						text: '配套'
					}
				],
				shenList: [
					{
						text: '全球首店',
					},
					{
						text: '全球旗舰店'
					},
					{
						text: '中国内地首店'
					},
					{
						text: '西部首店'
					},
					{
						text: '西南首店'
					},
					{
						text: '成都首店'
					}
				],
				showTypeStatus:false,
				showOpenTime:false,
				showYeTai:false,
				showShenQingType:false
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: '首店申请'
			});
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods: {
			confirmOpenTime(r){
				this.model.openTime=r.year+"-"+r.month+"-"+r.day
			},
			showTypeAction() {
				this.showTypeStatus = true;
			},
			onRemove1(index) {
				this.resultFileList.splice(index, 1);
			},
			clickItem(index) {
				this.model.shopType = this.typeList[index].text;
			},
			checkYetai(index) {
				this.model.yeTai = this.yeTaiList[index].text;
			},
			checkShenType(index) {
				this.model.shenQingType = this.shenList[index].text;
			},
			uploadSuccessHandler(data, index, lists) {
				let r = JSON.parse(data);
				this.resultFileList.push(r.data);
			},
		}
	}
</script>

<style>
	.first-shop{background: #f6f6f6;padding: 35rpx;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;
	}
	.first-shop .bottom-border{
		border-bottom: 3rpx #DADCE6 solid;
	}
</style>
