<template>
	<view :class="[AppTheme]" class="all_box">

		<view class="content_detail">
			<view class="detail_title">店铺头像</view>
			<view class="detail_text1">
				<view class="detail_ipt">

					<view class="detail_logo" v-if="logo">
						<image class="img" :src="logo" mode="" @click="uploadlogo(1)"></image>
					</view>
					<view v-if="!logo" class="choose_img">
						<view class="icon_plus" @click="uploadlogo(1)">
							<u-icon name="plus" size="40"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content_detail">
			<view class="detail_title">基本信息</view>
			<view class="detail_text">
				<view style="width: 20%;">联系人</view>
				<u--input border="none" v-model="reason.name"></u--input>
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 22%;">联系电话</view>
				<u--input border="none" v-model="reason.mobile"></u--input>

			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 20%;">微信号</view>
				<u--input border="none" v-model="reason.wxhao"></u--input>

			</view>
		</view>
		<view class="content_detail">
			<view class="detail_title">账号信息</view>
			<view class="detail_text">

				<view style="width: 20%;">账号</view>
				<u--input border="none" v-model="reason.username" :disabled='true' disabledColor=''></u--input>

			</view>
			<view class="bor_solp"></view>
			<view class="detail_text" @click="xiugai()">
				<view>密码</view>
				<view class="tubiao">
					<u-icon name="arrow-right" size="20" label='修改密码' labelPos='left'></u-icon>
				</view>
			</view>
		</view>
		<view class="content_detail">
			<view class="detail_title">店铺信息</view>
			<view class="detail_text">营业状态
				<view>
					<u-switch v-model="value" @change="change" :activeColor="primary" size='20'></u-switch>
				</view>
			</view>

			<view v-if='value'>
				<view class="bor_solp"></view>
				<view class="detail_text">
					<u-radio-group v-model="value1" @change="groupChange">

						<u-radio :labelDisabled="true" :name='1' :activeColor="primary" label="全天24小时营业"></u-radio>

						<u-radio :labelDisabled="true" :name='2' :activeColor="primary" label="自定义营业时间"></u-radio>

					</u-radio-group>

				</view>
			</view>
			<view v-if='value1==2'>
				<view class="bor_solp"></view>
				<view class="detail_text" @click="xunzeshijian1">
					<view>
						营业开始时间
					</view>
					<view class="tubiao">
						<u-icon name="arrow-right" size="20" :label='lable1' labelPos='left'></u-icon>
					</view>
				</view>
				<view class="bor_solp"></view>
				<view class="detail_text" @click="xunzeshijian2">
					<view>
						营业结束时间
					</view>
					<view class="tubiao">
						<u-icon name="arrow-right" size="20" :label='lable2' labelPos='left'></u-icon>
					</view>
				</view>
			</view>

			<view class="bor_solp"></view>
			<view class="detail_text" style="display: flex;justify-content: flex-start;">
				<view style="width:20%;">
					所在区域
				</view>
				<view style="width: 65%;">
					<u--input border="none" v-model="form.site" suffixIconStyle="color: #909399"></u--input>
				</view>
				<!-- #ifdef APP-PLUS || MP-WEIXIN -->
				<view @click="map" style="width: 14%;display: flex;justify-content: end;">
					<u-icon name="map-fill" size="20"></u-icon>
				</view>
				<!-- #endif -->
			</view>
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 20%;">详细地址</view>
				<u--input border="none" v-model="form.address"></u--input>
			</view>
			<!-- 	<view class="bor_solp"></view>
			<view class="detail_text">
				 
				<view>
					所售类目
				</view>
				<view class="tubiao">
					<u-icon name="arrow-right" size="20" :label='lable3' labelPos='left'></u-icon>
				</view>
			</view> -->
			<view class="bor_solp"></view>
			<view class="detail_text">
				<view style="width: 20%;">客服电话</view>
				<u--input border="none" v-model="reason.servicemobile"></u--input>
			</view>
			<view class="bor_solp"></view>
		</view>
		<view class="submit bg-linear-gradient" @click="submit">保存</view>
		<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
			<view class="loginstatus">
				<view class="sign_in_title">修改密码</view>
				<!-- 登录信息 -->
				<view class="login_infon">
					<view class="inputline">
						<u-input placeholder="请输入手机号" v-model="loginphone" border="bottom" fontSize="16"></u-input>
					</view>
					<view>
						<view class="inputline">
							<u-input placeholder="请输入验证码" v-model="verificationcode" border="bottom" fontSize="16">
								<template slot="suffix">
									<u-button :color="primary" @tap="getCode" :disabled="!ifsend" :text="codemess"
										:type="ifsend?'success':'warning'" shape="circle"></u-button>
								</template>
							</u-input>
						</view>
					</view>
					<view class="inputline">
						<u-input placeholder="请输入密码" v-model="loginpassword" :password="true" border="bottom"
							fontSize="16"></u-input>
					</view>
				</view>
				<!-- 登录按钮 -->
				<view class="login_button bg-linear-gradient" @click="register()">
					修改密码
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="show1" mode="time" @cancel='cencal' @confirm='confirm'></u-datetime-picker>
	</view>
</template>

<script>
	import mineApi from "@/api/mine/index.js"
	import loginApi from "../../../api/login/login.js"
	import {
		pathToBase64
	} from "@/js/pathto64.js"

	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				reason: {},
				//steps状态  默认为0
				steps_status: 0,
				status: 0, //申请状态

				agree: 1,
				value: false, //商家入驻协议
				logo: '', //农场展示的logo
				detailimg: [], //农场描述附加图
				//表单数据
				form: {
					logo: "", //农场logo的base64格式

					address: '', //农场地址
					site: ''
				},
				mapshow: false, //地图组件的显示隐藏
				show: false,
				// 登录手机号
				loginphone: null,
				// 验证码
				verificationcode: null,
				//密码
				loginpassword: null,
				//验证码是否可以发送
				ifsend: true,
				// 验证码状态
				codemess: '获取验证码',
				value: false,
				value1: '',

				trade: '',
				show1: false,
				lable1: '选择时间',
				lable2: '选择时间',
				lable3: '新鲜蔬菜',
				lable4: '河南省，郑州市',
				type: '',
				time1: '',
				time2: '',
				ye_status: ''


			}
		},
		onLoad() {
			this.getstatus()
		},
		methods: {
			confirm(e) {
				if (this.type == 1) {
					this.lable1 = e.value
					this.time1 = e.value
				}
				if (this.type == 2) {
					this.lable2 = e.value
					this.time2 = e.value
				}
				this.show1 = false
			},
			cencal() {
				this.show1 = false
			},
			xunzeshijian1() {
				this.type = 1
				this.show1 = true
			},
			xunzeshijian2() {
				this.type = 2
				this.show1 = true
			},
			groupChange(e) {

				this.trade = e

				console.log(e, 'ppp')
			},

			change(e) {
				if (e == false) {
					this.value1 = false,
						this.value1 = '',
						this.trade = '',
						this.lable1 = '选择时间',
						this.lable2 = '选择时间',
						this.time1 = '',
						this.time2 = '',
						this.type = '',
						this.ye_status = 2
				} else {
					this.ye_status = 1
				}
			},
			open() {

			},
			close() {
				this.show = false
			},
			xiugai() {
				this.show = true;
			},
			deleteimg(idx) { //图片删除
				this.detailimg.splice(idx, 1)
				this.form.detailimg.splice(idx, 1)
			},
			getstatus() { //获取steps状态
				mineApi.storemanagement()
					.then(res => {
						if (res.status == 1) {
							this.reason = res.data;
							this.form.logo = res.data.shop_avatars
							this.logo = res.data.shop_avatar
							this.form.address = res.data.farm_address
							this.form.site = res.data.site
							this.ye_status = res.data.ye_status
							this.trade = res.data.trade
							if (res.data.ye_status == 1) {
								this.value = true
							}
							if (res.data.trade == 1) {
								this.value1 = 1
								console.log(this.value1, 'this.value1')
							}
							if (res.data.trade == 2) {
								this.value1 = 2
								this.lable1 = res.data.trade_time
								this.lable2 = res.data.trade_endtime
								this.time1 = res.data.trade_time
								this.time2 = res.data.trade_endtime


							}
						}
					})
			},
			agrees() {
				this.value = !this.value
			},

			//提交资料
			submit() {


				let data = {
					farm_logo: this.form.logo,
					name: this.reason.name,
					mobile: this.reason.mobile,
					wxhao: this.reason.wxhao,
					username: this.reason.username,
					ye_status: this.ye_status,
					trade: this.trade,
					trade_time: this.time1,
					trade_endtime: this.time2,
					servicemobile: this.reason.servicemobile,
					farm_address: this.form.address,
					site: this.form.site,
					farmid: this.reason.farmid,
				}
				mineApi.getmanagement(data)
					.then(res => {
						if (res.status === 1) {

							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
					.catch(error => {
						console.log(error, 'error')
					})
			},
			//上传Logo和农场描述附加图
			uploadlogo(num) {
				let that = this
				// #ifdef  MP-WEIXIN
				if (num == 1) {
					uni.chooseImage({
						count: 1,
						success: function(res) {
							that.logo = res.tempFilePaths[0]
							uni.getFileSystemManager().readFile({
								filePath: res.tempFilePaths[0],
								encoding: 'base64',
								success: function(ress) {
									console.log(ress, 'ressress')
									mineApi.upshopimg({
											pic: 'data:image/jpeg;base64,' + ress.data,
										})
										.then(res => {
											if (res.status == 200) {
												// 上传完成后处理
												that.form.logo = res.data.path;
											}
										});
								}
							})
						},
						fail: function(res) {
							console.log(res)
						}
					})
				}
				// #endif

				// #ifdef APP||H5
				if (num == 1) {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						success: function(res) {
							that.logo = res.tempFilePaths[0]

							pathToBase64(res.tempFilePaths[0]).then(base64 => {
								mineApi.upshopimg({
										pic: base64
									})
									.then(res => {
										if (res.status == 200) {
											console.log(res, 'ooo')
											// 上传完成后处理
											that.form.logo = res.data.path;

										}
									});
							})
						}
					})
				}
				// #endif
			},
			//打开地图
			map() {

				let that = this
				// #ifdef MP-WEIXIN || APP-PLUS
				that.$until.chooseLocation(function(res) {
					that.form.address = res.address + res.name
					that.form.site = res.address
				});
				// #endif
			},
			// 获取验证码
			getCode() {
				let that = this
				if (that.loginphone !== null && that.loginphone !== undefined && that.loginphone.length === 11) {
					var myreg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (myreg.test(that.loginphone)) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading()
							//获取验证码
							let params = {
								mobile: that.loginphone
							}
							loginApi.sendvecode(params).then(res => {
								if (parseInt(res.status) === 1) {
									uni.showToast({
										icon: 'none',
										title: '验证码已发送'
									})
									that.ifsend = false
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
								}
							})
						}, 1000)
						let num = 60
						that.timeer = setInterval(function() {
							if (num > 0) {
								that.codemess = num + 's后重新获取'
								num = num - 1
							} else {
								clearInterval(that.timeer)
								that.ifsend = true
								that.codemess = '重新获取验证码'
							}
						}, 1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: '请输入有效的手机号'
						})
						return;
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入有效的手机号'
					})
				}
			},

			register() {
				let that = this
				if (that.loginphone !== null && that.loginphone !== undefined && that.loginphone.length === 11) {
					var myreg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (myreg.test(that.loginphone)) {
						if (that.verificationcode !== null && that.verificationcode !== undefined && that.verificationcode
							.length > 0) {
							if (that.loginpassword !== null && that.loginpassword !== undefined && that.loginpassword
								.length > 0) {
								let params = {
									mobile: that.loginphone,
									code: that.verificationcode,
									password: that.loginpassword,
									id: that.reason.farm_id,
								}
								mineApi.reset_pwd(params).then(res => {
									if (parseInt(res.status) === 1) {
										uni.showToast({
											icon: 'none',
											title: '修改成功'
										})
										this.show = false

									} else {
										uni.showToast({
											icon: 'none',
											title: '修改失败' + res.msg
										})
										this.show = false
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: '请输入正确的密码'
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '请输入正确的验证码'
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号'
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all_box {
		background-color: #ffffff;

		.step_bar {
			padding: 50rpx;
			padding-bottom: 80rpx;
			color: #fff;
		}

		.reason {
			background-color: #f97c00;
			color: #fff;
			line-height: 50rpx;
			padding: 0 20rpx;

			.reason_text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}


		.content_detail {
			padding: 0 0 0rpx 0;


			.detail_title {
				padding: 0 25rpx;
				font-size: 28rpx;
				background-color: #eae8e9;
				line-height: 60rpx;

			}

			.bor_solp {
				background-color: #999;
				height: 1rpx;
				width: 100%;
				transform: scaleY(0.3);
				margin: 10rpx 0;
			}

			.detail_text1 {
				// font-size: 25rpx;
				// margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				padding: 10rpx 30rpx;
				align-items: center;

				.input {
					width: 100%;
					padding-left: 10rpx;
					height: 80rpx;
					border-radius: 5rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border: 1rpx solid #eae8e9;
				}

				.detail_ipt {
					// border: 1rpx solid #eae8e9;
					// padding: 15rpx;
					width: 100%;

					.text {
						margin-bottom: 20rpx;
					}

					.detail_logo {
						// margin-top: 20rpx;

						.img {
							width: 120rpx;
							height: 120rpx;
						}
					}

					.choose_img {
						margin-top: 20rpx;
						width: 120rpx;
						height: 120rpx;
						text-align: center;
						overflow: hidden;
						border: 1rpx solid #eae8e9;

						.icon_plus {
							margin: 15rpx;
						}
					}
				}

				.detail_ipt1 {
					border: 1rpx solid #eae8e9;
					padding: 15rpx;
					height: 70rpx;
				}

				.icon {
					position: absolute;
					top: 10rpx;
					right: 20rpx;
					z-index: 10;
				}
			}

			.detail_text {
				// font-size: 25rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				padding: 10rpx 30rpx;
				align-items: center;

				.input {
					width: 100%;
					padding-left: 10rpx;
					height: 80rpx;
					border-radius: 5rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border: 1rpx solid #eae8e9;
				}

				.detail_ipt {
					// border: 1rpx solid #eae8e9;
					// padding: 15rpx;
					width: 100%;

					.text {
						margin-bottom: 20rpx;
					}

					.detail_logo {
						// margin-top: 20rpx;

						.img {
							width: 120rpx;
							height: 120rpx;
						}
					}

					.choose_img {
						margin-top: 20rpx;
						width: 120rpx;
						height: 120rpx;
						text-align: center;
						overflow: hidden;
						border: 1rpx solid #eae8e9;

						.icon_plus {
							margin: 15rpx;
						}
					}
				}

				.detail_ipt1 {
					border: 1rpx solid #eae8e9;
					padding: 15rpx;
					height: 70rpx;
				}

				.icon {
					position: absolute;
					top: 10rpx;
					right: 20rpx;
					z-index: 10;
				}
			}

			.detail_text_address {
				width: 100%;
				margin-top: 20rpx;
				height: 80rpx;
				border-radius: 5rpx;
				border: 1rpx solid #eae8e9;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.input {
					padding-left: 10rpx;
					width: 92%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.icon {}
			}

			.content_detail_img {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				.detail_img {
					position: relative;
					margin-top: 10rpx;
					width: 150rpx;
					height: 150rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1rpx solid #eae8e9;
					margin-right: 20rpx;

					.image {
						width: 150rpx;
						height: 150rpx;
					}

					.delete_img {
						position: absolute;
						top: 5rpx;
						right: 5rpx;
					}
				}
			}


		}

		.agree_terms {
			display: flex;
			justify-content: center;
			align-items: center;

			.agree_dot {
				margin-right: 10rpx;
			}

			text {
				color: #2375f4;
			}
		}

		.submit {
			font-size: 30rpx;
			color: #ffffff;
			padding: 25rpx 0;
			border-radius: 35rpx;
			text-align: center;
			width: 90%;
			margin: 20rpx auto;
			margin-bottom: 40rpx;
		}

		// }

		.under_review {
			margin-top: 100rpx;
			text-align: center;

			image {
				width: 150rpx;
				height: 150rpx;
			}

			.text {
				margin-top: 20rpx;
			}
		}
	}

	.loginstatus {
		.gologin {
			// float: right;
			margin-left: 60vw;
			color: #4271a1;
			margin-bottom: 4vh;
		}

		.sign_in_title {
			padding: 40rpx 10% 0 10%;
			width: 80%;
			color: #000000;
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
		}

		.login_infon {
			padding: 20rpx 10%;
			width: 80%;

			.inputline {
				display: flex;
				margin: 20rpx 0;

				.btn {
					margin-top: 13rpx;
					margin-bottom: 5vh;
					position: absolute;
					margin-left: 55vw;
					padding: 0 10rpx;
				}
			}

			.form_input {
				border-bottom: 1px solid #c0c4cc;
				margin-top: 5%;
			}
		}

		.consent_agreement {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80%;
			padding: 0 10%;

			.agreement_details {
				margin-left: 15rpx;
				color: #999;
				font-size: 24rpx;

				.agreement_details_text {
					color: #3C9CFF;
				}
			}
		}

		.login_button {
			margin: 25rpx 10% 25rpx 10%;
			padding: 24rpx 0;
			width: 80%;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			border-radius: 50rpx;
		}
	}

	.agreement_content {
		margin: 0 15rpx;
		height: 100vh;

		.agreement_content_title {
			padding: 20rpx 0 25rpx 0;
			font-size: 36rpx;
			color: #000000;
			font-weight: 700;
			width: 100%;
			text-align: center;
			position: relative;

			.closepop_boton {
				position: absolute;
				right: 15rpx;
				top: 50%;
				transform: translate(0, -50%);
			}
		}

		.ementconte_content {
			width: 100%;
		}
	}

	::v-deep .u-radio-group--row[data-v-97ce24d6] {
		justify-content: space-between;
	}
</style>
