<template>
	<view class="content">
		<image class="shop-banner" src="../../static/images/shop-banner.png" mode="widthFix"></image>
		<view class="enterprise">
			<view class="enterprise-box">
				<view class="box-item">
					<view class="item-left">联系人：</view>
					<view class="item-right"><input type="text" placeholder="请输入联系人" v-model="nameP" /></view>
				</view>
				<view class="box-item">
					<view class="item-left">联系电话：</view>
					<view class="item-right"><input type="text" placeholder="请输入联系电话" v-model="phone" /></view>
				</view>
			</view>
			<view class="enterprise-box">
				<view class="box-item">
					<view class="item-left">店铺名称：</view>
					<view class="item-right"><input type="text" placeholder="请输入店铺名" v-model="name" /></view>
				</view>
				<!-- <view class="box-item" @click="getLocation"> -->
				<view class="box-item">
					<view class="item-left">商家地址：</view>
					<view class="item-right">
						<input type="text" placeholder="请填写详细地址" v-model="showaddress" />
					</view>
				</view>
				<view class="box-item">
					<view class="item-left">商户类型：</view>
					<view class="item-right">
						<picker mode="selector" :range="typeList" range-key='type_name' @change="changeType">
							<view>{{type.type_name}}</view>
						</picker>
					</view>
				</view>
				<view class="box-item">
					<view class="item-left">店铺类型：</view>
					<view class="item-right"><picker mode="selector" :range="classifyList" range-key='category_name' @change="changeClassify">
							<view>{{classify.category_name}}</view>
						</picker></view>
				</view>
			</view>
			<view class="enterprise-box">
				<view class="box-item">
					<view class="item-left">身份证：</view>
					<view class="item-right"><input type="text" placeholder="请输入身份证" v-model="Idcard" /></view>
				</view>
				<view class="box-item">
					<view class="item-left">店铺简介：</view>
					<view class="item-right"><input type="text" placeholder="请输入店铺简介" v-model="introductory" /></view>
				</view>
			</view>
			<view class="enterprise-box">
				<view class="box-item">
					<view class="item-left">商户账号：</view>
					<view class="item-right"><input type="text" placeholder="请输入商户账号" v-model="account" /></view>
				</view>
				<view class="box-item">
					<view class="item-left">商户密码：</view>
					<view class="item-right"><input type="password" placeholder="请输入商户密码" v-model="pwd" /></view>
				</view>
				<view class="box-item">
					<view class="item-left">重复密码：</view>
					<view class="item-right"><input type="password" placeholder="请重复输入商户密码" v-model="pwdRs" /></view>
				</view>
			</view>
			
			<view class="enterprise-box">
				<view class="box-item1">
					<view class="item-left">商户门头：</view>
					<view class="item-right">
						<image :src="cardimg" mode="" class="upload-img" @click.stop="imgsub('cardimg')" v-if="cardimg"></image>
						<image src="../../static/images/up-img.png" class="upload-img" mode="" v-if="!cardimg" @click.stop="imgsub"></image>
					</view>
				</view>
			</view>
			<view class="enterprise-box">
				<view class="box-item1">
					<view class="item-left">商户logo：</view>
					<view class="item-right">
						<image :src="imgY" mode="" class="upload-img" @click.stop="imgsub('imgsubY')" v-if="imgY"></image>
						<image src="../../static/images/up-img.png" class="upload-img" mode="" v-if="!imgY" @click.stop="imgsubY"></image>
					</view>
				</view>
			</view>
			<!-- <view class="enterprise-box">
				<view class="box-item">
					<view class="item-left">环境介绍：</view>
					<view class="item-right"><input type="text" placeholder="请输入" v-model="introductory" /></view>
				</view>
				<view class="box-item1">
					<view class="item-left">店内照片：</view>
					<view class="item-right">
						<image :src="shopImg" mode="" class="upload-img" @click.stop="imgsub('imgsub')" v-if="shopImg"></image>
						<image src="../../static/images/up-img.png" class="upload-img" mode="" v-if="!shopImg" @click.stop="imgsut"></image>
					</view>
				</view>
			</view> -->
		</view>
		<!-- <view class="flex">
			<view class="">
			</view>
			<view class="">
				我已阅读并同意
			</view>
			<view class="shopDetail">
			《商户入驻协议》
			</view>
		</view> -->
		<view class="comfirm" @click="comfirm">提交申请</view>
		<canvas canvas-id="canvas" v-if="canvasStatus"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
	</view>
</template>

<script>
// import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
import { mapState, mapMutations } from 'vuex';
import { upload } from '@/api/order.js';
import { apply,gettype,getclassify } from '@/api/shop.js';
export default {
	// components: {
	// 	pickerAddress
	// },
	computed: {
		...mapState(['userInfo'])
	},
	data() {
		return {
			classify:{category_name:'请选择店铺类型'},//选择的商户分类
			classifyList:[],//商户分类列表
			type:{type_name:'请选择商户类型'},//选择的商户类型
			typeList:[],//商户类型列表
			imgY: '', //商户logo
			checked: false,
			name: '', //店铺名
			introductory: '', //简介
			Idcard: '', //身份证号码
			nameP: '', //联系人
			phone: '', //联系人电话
			showaddress: '', //详细地址
			// addressDetail: '', //省市区
			cardimg: '', //商户门头
			// latitude: '',
			// longitude: '',
			account:'',//商户账号
			pwd:'',//商户密码
			canvasStatus:false,
			canvasWidth:'',
			canvasHeight:'',
			pwdRs:''
		};
	},
	onShow() {
		this.getType();
		this.getClassify();
	},
	methods: {
		// 获取商户分类列表
		getType(){
			gettype().then(({data}) =>{
				this.typeList = data
			})
		},
		// 获取店铺类型列表
		getClassify() {
			getclassify().then(({data}) =>{
				this.classifyList = data
			})
		},
		changeClassify(e) {
			let i = e.detail.value
			this.classify = this.classifyList[i]
			console.log(this.classify ,'123');
		},
		changeType(e) {
			let i = e.detail.value
			this.type = this.typeList[i]
		},
		// 上传门内图片
		imgsut() {
			// console.log('上传logo');
			upload({
				filename: ''
			}).then(data => {
				// console.log('data', data);
				this.shopImg = data[0].url;
			});
		},
		// 上传门店logo图片
		imgsub(image) {
			// console.log('上传logo');
				let that = this;
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image', function(res) {
					that[image] = res.data.url;
					console.log(that[image]);
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
		},
		// 上传营业执照图片
		imgsubY() {
			// console.log('i上传营业执照');
			upload({
				filename: ''
			}).then(data => {
				this.imgY = data[0].url;
			});
		},
		check() {
			this.checked = !this.checked;
		},
		// getLocation() {
		// 	console.log('选择当前位置');
		// 	let obj = this;
		// 	uni.chooseLocation({
		// 		success: function(res) {
		// 			obj.latitude = res.latitude;
		// 			obj.longitude = res.longitude;
		// 			if (res.address) {
		// 				obj.showaddress = res.address;
		// 			} else {
		// 				obj.showaddress = res.name;
		// 			}
		// 		}
		// 	});
		// },
		// 选中城市切换
		onCityClick({ data }) {
			this.addressDetail = data.join(',');
		},
		// 提交申请
		comfirm() {
			const obj = this;
			if (obj.name == '') {
				obj.$api.msg('请输入店铺名');
				return;
			}
			if (obj.classify.category_name == '请选择店铺类型') {
				obj.$api.msg('请选择店铺类型');
				return;
			}
			if (obj.type.type_name == '请选择商户类型') {
				obj.$api.msg('请选择商户类型');
				return;
			}
			if (obj.introductory == '') {
				obj.$api.msg('请输入您的商铺简介');
				return;
			}
			if (obj.Idcard == '') {
				obj.$api.msg('请输入身份证号');
				return;
			}
			if (obj.nameP == '') {
				obj.$api.msg('请输入联系人');
				return;
			}
			if (obj.phone == '') {
				obj.$api.msg('请输入联系人电话');
				return;
			}
			if (obj.showaddress == '') {
				obj.$api.msg('请选择详细地址');
				return;
			}
			if (obj.cardimg == '') {
				obj.$api.msg('请上传门头照片');
				return;
			}
			if (obj.imgY == '') {
				obj.$api.msg('请上传营业执照');
				return;
			}
			if (obj.account == '') {
				obj.$api.msg('请填写商户账号');
				return;
			}
			if (obj.pwd == '') {
				obj.$api.msg('请填写商户密码');
				return;
			}
			if(obj.pwd!=obj.pwdRs){
				obj.$api.msg('重复密码输入不相同请重新输入');
				return;
			}
			apply({
				mer_name: obj.name,
				category_id: obj.classify.merchant_category_id,
				type_id:obj.type.mer_type_id,
				name:obj.nameP,
				account:obj.account,
				pwd:obj.pwd,
				phone:obj.phone,
				mer_address:obj.showaddress,
				Idcard:obj.Idcard,
				introduction: obj.introductory,
				image:obj.imgY,
				shopImg:obj.shopImg
			})
				.then(e => {
					uni.showToast({
						title: '申请成功，请耐心等待审核',
						icon: 'success',
						duration: 2000
					});
				})
				.catch(function(e) {
					console.log('出错了');
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
.content {
}
.shop-banner{
	width: 750rpx;
}
.enterprise{
	padding: 30rpx;
}
.enterprise-box {
	background-color: #ffffff;
	border-radius: 12rpx;
	width: 100%;
	margin-bottom: 30rpx;
	.box-item {
		display: flex;
		border-bottom: 1rpx solid #f0f0f0;
		padding: 32rpx 24rpx;
		align-items: center;
		&:nth-last-child(1) {
			border-bottom: none;
		}
	}
	.item-left {
		font-size: 28rpx;
		width: 160rpx;
		flex-shrink: 0;
	}
	.item-right {
		width: 100%;
		margin-left: 24rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		color: #999999;
		input {
			font-size: 28rpx;
		}
		image {
			width: 160rpx;
			height: 160rpx;
			margin-top: 24rpx;
			margin-left: 60rpx;
		}
	}
	.box-item1 {
		display: flex;
		border-bottom: 1rpx solid #f0f0f0;
		padding: 32rpx 24rpx;
		// align-items: center;
		&:nth-last-child(1) {
			border-bottom: none;
		}
	}
}
.comfirm {
	margin: 20rpx auto 0;
	width: 750rpx;
	height: 80rpx;
	background: #681445;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 36rpx;
}
.comfirm1 {
	margin: 0 auto;
	border-radius: 80rpx;
	width: 650rpx;
	height: 100rpx;
	background: #b1b1b1;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 36rpx;
}
.checkbox {
	font-size: 32rpx;
	color: #eeeeee;
	background: #eeeeee;
	border-radius: 50px;
}
.checked {
	color: #fd4343;
	background: #ffffff;
}
.radio {
	padding-top: 5rpx;
	margin-right: 15rpx;
}
</style>
