<template>
	<page-meta :page-style="themeColor"></page-meta>
	<div>
		<div class="view">
			<div class="item">
				<div class="title">
					店铺名称
					<span class="star">*</span>
				</div>
				<div class="input">
					<u-input placeholder="请填写公司或店铺名称" v-model="form.title"></u-input>
				</div>
			</div>

			<!-- 	<div class="item">
				<div class="title">
					店铺编号<span class="star">*</span>
				</div>
				<div class="input">
					<u-input placeholder="请填写店铺编号" v-model="form.store_code"></u-input>
				</div>
			</div> -->

			<div class="item">
				<div class="title">
					店铺类型
					<!-- <span class="star">*</span> -->
				</div>
				<div class="input">
					<div class="picker">
						<div class="select" @click="isShowStoreType()">
							<div class="left" :style="{ color: form.store_type ? '#222' : '' }">
								{{ form.store_type || '请填写店铺类型' }}
							</div>
							<div class="right">
								<u-icon name="arrow-right" color="#c6c6c6"></u-icon>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="item">
				<div class="title">
					联系人
					<span class="star">*</span>
				</div>
				<div class="input">
					<u-input placeholder="请填写联系人" v-model="form.contacts"></u-input>
				</div>
			</div>

			<div class="item">
				<div class="title">
					电话号码
					<span class="star">*</span>
				</div>
				<div class="input">
					<u-input placeholder="请填写电话号码" type="number" v-model="form.phone"></u-input>
				</div>
			</div>
			<div class="item">
				<div class="title">电子邮箱</div>
				<div class="input">
					<u-input placeholder="请填写电子邮箱" v-model="form.email"></u-input>
				</div>
			</div>
			<div class="item">
				<div class="title">联系地址</div>
				<div class="input">
					<u-input placeholder="请填写联系地址" v-model="form.address"></u-input>
				</div>
			</div>

			<div class="item">
				<div class="title">
					所属地
					<span class="star">*</span>
				</div>

				<pick-regions :default-regions="defaultRegions" @getRegions="handleGetRegions">
					<div class="picker">
						<div class="select">
							<div class="left" :style="{ color: addressName ? '#222' : '' }">
								{{ addressName || '请选择所属地' }}
							</div>

							<div class="right">
								<u-icon name="arrow-right" color="#c6c6c6"></u-icon>
							</div>
						</div>
					</div>
				</pick-regions>
			</div>

			<div class="item">
				<div class="title">
					营业资质或医疗机构许可证
					<span class="star">*</span>
					<div class="sub_title">请上传营业执照</div>
				</div>
				<div class="upload" @click="upload('license')">
					<div class="box" v-if="!form.license">
						<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
							style="width: 48rpx; height: 48rpx;"></image>
						<div class="desc">上传图片</div>
						<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</div>
					<image class="cover" :src="$util.img(form.license)" mode="aspectFill"
						style="width: 100%; height: 100%;"></image>
				</div>
			</div>

			<div class="item">
				<div class="title">
					药品经营许可证
					<span class="star">*</span>
					<div class="sub_title">请上传药品经营许可证</div>
				</div>
				<div class="upload" @click="upload('drugs_license')">
					<div class="box" v-if="!form.drugs_license">
						<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
							style="width: 48rpx; height: 48rpx;"></image>
						<div class="desc">上传图片</div>
						<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</div>
					<image class="cover" :src="$util.img(form.drugs_license)" mode="aspectFill"
						style="width: 100%; height: 100%;"></image>
				</div>
			</div>


			<div class="item">
				<div class="title">
					法人身份证
					<span class="star">*</span>
					<div class="sub_title">请上传法人身份证</div>
				</div>
				<div class="upload" @click="upload('card_images')">
					<div class="box" v-if="!form.card_images">
						<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
							style="width: 48rpx; height: 48rpx;"></image>
						<div class="desc">上传图片</div>
						<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</div>
					<image class="cover" :src="$util.img(form.card_images)" mode="aspectFill"
						style="width: 100%; height: 100%;"></image>
				</div>
			</div>


			<div class="item">
				<div class="title">
					法人委托书
					<div class="sub_title">请上传法人委托书</div>
				</div>
				<div class="upload" @click="upload('trust_book_images')">
					<div class="box" v-if="!form.trust_book_images">
						<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
							style="width: 48rpx; height: 48rpx;"></image>
						<div class="desc">上传图片</div>
						<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</div>
					<image class="cover" :src="$util.img(form.trust_book_images)" mode="aspectFill"
						style="width: 100%; height: 100%;"></image>
				</div>
			</div>



			<div class="item">
				<div class="title">
					发票信息
					<div class="sub_title">请上传发票信息</div>
				</div>
				<div class="upload" @click="upload('invoice_images')">
					<div v-if="form.invoice_images" @click.stop="form.invoice_images = ''">
						<u-icon name="close-circle-fill" color="red" size="20"
							style="position: absolute;right: -10rpx;top:-10rpx;z-index:1"></u-icon>
					</div>

					<div class="box" v-else>
						<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
							style="width: 48rpx; height: 48rpx;"></image>
						<div class="desc">上传图片</div>
						<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</div>
					<image class="cover" :src="$util.img(form.invoice_images)" mode="aspectFill"
						style="width: 100%; height: 100%;"></image>
				</div>
			</div>

			<div class="item">
				<div class="title">
					店铺logo
					<!-- <span class="star">*</span> -->
					<div class="sub_title">请上传店铺logo</div>
				</div>
				<div class="upload" @click="upload('logo')">
					<div v-if="form.logo" @click.stop="form.logo = ''">
						<u-icon name="close-circle-fill" color="red" size="20"
							style="position: absolute;right: -10rpx;top:-10rpx;z-index:1"></u-icon>
					</div>
					<div class="box" v-else>
						<image :src="$util.img('/upload/weapp/user/jia1.png')" mode=""
							style="width: 48rpx; height: 48rpx;"></image>
						<div class="desc">上传图片</div>
						<div class="text">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</div>
					<image class="cover" :src="$util.img(form.logo)" mode="aspectFill"
						style="width: 100%; height: 100%;"></image>
				</div>
			</div>

		</div>

		<div class="btnBox">
			<div class="btn" @click="submit">确认</div>
		</div>
		<u-action-sheet :show="showStoreType" :actions="storeTypeList" @close="showStoreType = false"
			@select="selectStoreType"></u-action-sheet>
	</div>
</template>

<script>
	import pickRegions from './components/pick-regions/pick-regions.vue';
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				form: {
					store_code: '',
					store_type: '',
					contacts: '',
					phone: '',
					email: '',
					address: '',
					province_id: '',
					city_id: '',
					district_id: '',
					license: '',
					drugs_license: '',
					card_images: '',
					trust_book_images: '',
					invoice_images: '',
					title: '',
					logo: ''

				},
				defaultRegions: [],
				addressName: '',
				id: '',
				showStoreType: false,
				storeTypeList: []
			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id;
				uni.setNavigationBarTitle({
					title: '修改店铺'
				});
				this.getStoreInfo();
			} else {
				uni.setNavigationBarTitle({
					title: '新增店铺'
				});
			}
			this.getStoreTypeList();
		},
		methods: {
			isShowStoreType() {
				this.showStoreType = true;
			},
			selectStoreType(index) {
				this.form.store_type = index.name;
				console.log(this.form.store_type);
			},
			getStoreTypeList() {
				this.storeTypeList = [];
				this.$api.sendRequest({
					url: '/api/member/getStoreTypeList',
					success: res => {
						res.data.forEach(item => {
							this.storeTypeList.push({ name: item });
						});
						console.log(this.storeTypeList);
					}
				});
			},
			getStoreInfo(id) {
				this.$api.sendRequest({
					url: '/api/member/getStoreInfo',
					data: {
						id: this.id
					},
					success: ({ data }) => {
						data.trust_book_images = data.trust_book_images[0];
						data.card_images = data.card_images[0];
						this.form = data;
						this.addressName = data.province_name + data.city_name + data.district_name;
					}
				});
			},
			submit() {
				let {
					title,
					contacts,
					phone,
					province_id,
					license,
					drugs_license,
					card_images,
					trust_book_images,
					invoice_images,
					logo
				} = this.form;
				console.log(this.form);
				if (!title) {
					this.$util.showToast({
						title: '请填写公司或店铺名称'
					});
					return;
				}
				if (!contacts) {
					this.$util.showToast({
						title: '请填写联系人'
					});
					return;
				}
				if (!phone) {
					this.$util.showToast({
						title: '请填写电话号码'
					});
					return;
				}
				if (!province_id) {
					this.$util.showToast({
						title: '请选择所属地'
					});
					return;
				}
				if (!license) {
					this.$util.showToast({
						title: '请上传营业执照'
					});
					return;
				}
				if (!drugs_license) {
					this.$util.showToast({
						title: '请上传药品经营许可证'
					});
					return;
				}
				if (!card_images) {
					this.$util.showToast({
						title: '请上传法人身份证'
					});
					return;
				}
				// if (!trust_book_images.length) {
				// 	this.$util.showToast({
				// 		title: '请上传法人委托书'
				// 	});
				// 	return;
				// }

				let url = this.id ? '/api/member/editStore' : '/api/member/addStore';
				this.$api.sendRequest({
					url,
					data: this.form,
					success: res => {
						this.$util.showToast({
							title: res.message
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 800);
					}
				});
			},
			delImg(type, index) {
				this.form[type].splice(index, 1);
			},
			// 获取选择的地区
			handleGetRegions(regions) {
				this.defaultRegions = regions;
				this.addressName = '';
				let arr = ['province_id', 'city_id', 'district_id'].map((v, i) => {
					this.form[v] = regions[i].value;
					this.addressName += regions[i].label;
				});
			},
			// 上传图片
			upload(type, size = 1) {
				this.$util.upload(
					size, {
						path: 'storeRegister'
					},
					res => {
						if (size == 1) {
							this.form[type] = res[0];
						} else {
							this.form[type] = [...this.form[type], ...res];
						}
					}
				);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		background-color: #fff;
		padding: 30rpx 30rpx 160rpx;

		.cover {
			border-radius: 16rpx;
			width: 100%;
			height: 332rpx;
			margin: 24rpx 0;
			display: block;
		}

		.item {
			margin-bottom: 48rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;

				.star {
					margin-left: 8rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #f33b50;
				}

				.sub_title {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #999999;
				}
			}

			.input {
				margin-top: 24rpx;

				::v-deep {
					.u-input--radius {
						background: #f6f6f6;
						border-radius: 16rpx;
						border: 0;
						padding: 20rpx 28rpx !important;
					}
				}
			}

			.picker {
				.select {
					margin-top: 24rpx;
					height: 80rpx;
					background: #f6f6f6;
					border-radius: 16rpx;

					display: flex;
					align-items: center;

					.left {
						margin-left: 28rpx;

						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						color: #bfbfbf;
						flex-grow: 1;
					}

					.right {
						margin-right: 24rpx;
					}
				}
			}

			.upload {
				margin-top: 24rpx;
				height: 320rpx;
				background: #f6f6f6;
				border-radius: 16rpx;
				position: relative;

				.box {
					text-align: center;
					position: absolute;
					transform: translate(-50%, -50%);
					left: 50%;
					top: 50%;
					width: 800rpx;

					.desc {
						margin-top: 16rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #bfbfbf;
					}

					.text {
						margin-top: 8rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #bfbfbf;
					}
				}
			}
		}
	}

	.btnBox {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 32rpx;
		background-color: #fff;

		// box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.3);
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;

			height: 80rpx;
			background: $base-color;
			border-radius: 16rpx;

			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #ffffff;
		}
	}
</style>