<template>
	<view class="">
		<view class="step">

			<uni-steps active-color="#FF6A69" :options="[
			{title: '注册账号',url:'./getShop'},
			{title: '扫码授权',url:'./qrCode'},
			{title: '提交支付资质',url:'./addPay'}, 
			{title: '基础信息',url:'./basics'} ]" :active="3"></uni-steps>
		</view>

		<view style="height: 130rpx;"></view>

		<form @submit="onSubmit">

			<view class="box-pack-between item flex-y-center border-b" style="padding: 30rpx;">
				<text>基本信息</text>
			</view>

			<view class="content">

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>小程序名称</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.nickname" name="nickname" class="input-box"
							placeholder="请输入小程序名称" placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>小程序简称</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.abbr" name="abbr" class="input-box" placeholder="请输入小程序简称"
							placeholder-class="desc-placeholder">
					</view>
				</view>

				<view class="item flex flex-y-center">
					<view class="title-block required">
						<text>介绍内容</text>
					</view>
					<view class="desc">
						<input type="text" :value="info.introduction" name="introduction" class="input-box"
							placeholder="请输入介绍内容" placeholder-class="desc-placeholder">
					</view>
				</view>
			</view>

			<view class="box-pack-between item flex-y-center border-b" style="padding: 30rpx;margin-top: 20rpx;">
				<text>退货信息</text>
			</view>

			<view class="item flex flex-y-center">
				<view class="title-block required">
					<text>收货人姓名</text>
				</view>
				<view class="desc">
					<input type="text" :value="info.user_name" name="user_name" class="input-box" placeholder="请输入收货人姓名"
						placeholder-class="desc-placeholder">
				</view>
			</view>
			<view class="item flex flex-y-center">
				<view class="title-block required">
					<text>邮箱</text>
				</view>
				<view class="desc">
					<input type="text" :value="info.mail" name="mail" class="input-box" placeholder="请输入邮箱"
						placeholder-class="desc-placeholder">
				</view>
			</view>

			<view class="item flex flex-y-center">
				<view class="title-block required">
					<text>联系号码</text>
				</view>
				<view class="desc">
					<input type="text" :value="info.tel_number" name="tel_number" class="input-box"
						placeholder="请输入联系号码" placeholder-class="desc-placeholder">
				</view>
			</view>

			<view class="item flex flex-y-center box-pack-between" @click="open">
				<view class="title-block required">
					<text>商户地址</text>
				</view>
				<view class="desc">
					{{address.Prov_title}} {{address.City_title}} {{address.Dist_title}}
					<text class="iconfont icongengduo"></text>
				</view>
			</view>

			<!-- 			<view class="bgf mar-24 item box-pack-between" @click="open" data-type="1">
				<text class="ft28">商户地址</text>
				<view class=" flex-y-center br desc">
					<view class="flex-y-center ft26">
						{{address.Prov_title}} {{address.City_title}} {{address.Dist_title}}
						<text class="iconfont icongengduo"></text>
					</view>
				</view>
			</view> -->


			<view class="item flex flex-y-center">
				<view class="title-block required">
					<text>详细地址</text>
				</view>
				<view class="desc">
					<input type="text" :value="info.detail_info" name="detail_info" class="input-box"
						placeholder="请输入详细地址" placeholder-class="desc-placeholder">
				</view>
			</view>

			<button class="sub-btn" hover-class="none" form-type="submit">
				立即提交
			</button>

		</form>
		<uni-popup ref="uniScroll" type="bottom">
			<uni-scroll :Prov_arr="Prov_arr" @select="select"></uni-scroll>
		</uni-popup>
	</view>
</template>

<script>
	import uniScroll from '../components/uni-scroll/uni-scroll.vue'
	export default {
		components: {
			uniScroll,
		},
		data() {
			return {
				Prov_arr: [],
				address: {
					Prov_title: "请选择",
					City_title: "",
					Dist_title: "",
				},	
				info:{}
			}
		},
		onLoad() {
			this.wechat_store();
			this.Prov();
		},
		methods: {
			open(e) {
				var type = e.currentTarget.dataset.type;
				this.$refs.uniScroll.open();
			},
			
			wechat_store() {
				this.request({
					url: 'Wechatstore/wechat_store',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					}
				}).then(res => {
					this.info = res.data;
					this.address = {
						Prov_title: res.data.province_name,
						Prov_code: res.data.s_province,
						City_title: res.data.city_name,
						City_code: res.data.s_city,
						Dist_title: res.data.county_name,
						Dist_code: res.data.s_area,
					}
				})
			},
			
			// 获取省
			Prov(e) {
				this.request({
					url: "setting/getprovince",
					data: {},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.Prov_arr = res.data;
					}
				});
			},
			
			// 获取地址
			select(e) {
				console.log(e)
				this.address = e;
			},

			onSubmit(e) {
				let data = e.detail.value;
				data.admin_id = uni.getStorageSync("admin_id");
				data.s_province = this.address.Prov_code;
				data.s_city = this.address.City_code;
				data.s_area = this.address.Dist_code;
				// console.log(data, "data")
				// return
				this.request({
					url: "Wechatstore/submit_basicinfo",
					data: data,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}

	.item {
		background-color: #FFF;
		padding: 0 25rpx;
	}

	.title-block {
		margin-right: 20rpx;
		max-width: 220rpx;
	}

	.title-block text {
		font-size: 28rpx;
	}

	.desc {
		text-align: right;
		flex: 1;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.rund {
		width: 40rpx;
		height: 40rpx;
	}

	.red {
		color: red;
		padding: 10rpx 25rpx;
		font-size: 26rpx;
	}

	.sub-btn {
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(315deg, #FF6A69 2%, #FF6A69 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		margin: 0 auto;
		margin-top: 30px;
	}
</style>
