<template>
	<view class="mt">
		<view class="flex_column flex_items" style="width: 100%;">
			<view class="mt120 f58 flex_column flex_items bolder" style="color: #4d4d4d;">
				<text>美食一键送达</text>
				<text class="ml10">让生活更有滋味</text>
			</view>
			<image class="mt50" :src="imgUrl+'mtc11.png'" style="width:446rpx;" mode="widthFix"></image>
			<view v-if="istype==1" class="flex_items flex_center"
				style="width: 100%;position: fixed;left: 0;bottom: 30rpx;">
				<view class="bgwhite plr30 pb30 pt50" style="width: calc(100% - 120rpx);border-radius:20rpx;">
					<view class="f-center f30 bold">请登录</view>
					<view class="mt40">
						<u--form labelPosition="left" :model="form" labelWidth="60">
							<!-- 		<u-form-item label="手机号" prop="form.account" borderBottom>
								<u--input v-model="form.account" border="none" placeholder="请输入用户名"></u--input>
							</u-form-item> -->
							<u-form-item label="手机号" prop="form.account" borderBottom style="border-radius: 8rpx;">
								<u--input v-model="form.mobile" border="none" placeholder="请输入手机号"
									placeholderStyle="color:#9D9EA2;font-size:32rpx"></u--input>
								<u-button @click="getcode" :text="codemsg" size="normal" type="warning"
									style="width:180rpx;"></u-button>
							</u-form-item>
							<u-form-item label="验证码" prop="form.password" borderBottom>
								<u--input v-model="form.code" border="none" placeholder="请输入验证码"
									type="password"></u--input>
							</u-form-item>
							<view class="mt30 flex_items flex_center">
								<u-button @click="getloadin" text="登 录" type="warning"></u-button>
							</view>
							<!-- 		<view v-if="isfa" class="mt30">
								<liu-slider-verify sBgColor="#FBB500" sColor="#ffffff" ref="verify"
									@change='change'></liu-slider-verify>
							</view> -->
						</u--form>
					</view>
				</view>
			</view>
			<!-- 登录 -->
			<view v-if="istype==0" class="flex_items flex_center"
				style="width: 100%;position: fixed;left: 0;bottom: 30rpx;">
				<view class="bgwhite plr30 pb30 pt50" style="width: calc(100% - 120rpx);border-radius:20rpx;">
					<view class="f-center f30 bold">请登录</view>
					<view class="mt40">
						<u--form labelPosition="left" :model="form" labelWidth="60">
							<u-form-item label="姓名" prop="form.account" borderBottom>
								<u--input v-model="form.account" border="none" placeholder="请输入用户名"></u--input>
							</u-form-item>
							<u-form-item label="密码" prop="form.password" borderBottom>
								<u--input v-model="form.password" border="none" placeholder="请输入密码"
									type="password"></u--input>
							</u-form-item>
							<view class="mt30 flex_items flex_center">
								<u-button @click="getloadin" text="登 录" type="warning"></u-button>
							</view>
						</u--form>
					</view>
					<view class="mt30 f26 f-center">还没有账号?点击<text style="color: #FBB500;" class="f30 bold"
							@click="gore">这里</text>注册</view>
				</view>
			</view>
		</view>
		<!-- tk -->
		<view v-if="modalShow" class="flex_items flex_center"
			style="width: 100%;height: 100vh;background: rgba(0,0,0,.5);position: fixed;left: 0;top: 0;z-index: 5;">
			<view class="bgwhite tkk flex_column flex_items ptb30">
				<text class="f36 bold" style="color: #585858;">请输入账号</text>
				<input type="text" class="mt30 ptb20 plr20" v-model="usernumber" placeholder="账号"
					style="text-align: left;border: 1px solid #e9e9e9;background:#d4d4d4;width:70%;">
				<view class="mt10 f24" style="color:#a9a6a6;width: 65%;">访客登陆账号为：13902、13903、13904、13905、13906</view>
				<view class="flex_start flex_items mt20 bte9s ptb20" style="width: 80%;">
					<view @click="out" class="flex_items flex_center"
						style="width: 49%;height: 40rpx;border-right: 1px solid #e9e9e9;">
						<text>取消</text>
					</view>
					<view @click="yes" style="width: 50%;height: 40rpx;color: #167eef;">
						<text>确认</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="show"
			style="width: 100%;height: 100vh;background: rgba(0,0,0,.7);top: 0;left: 0;position: fixed;z-index: 2;"
			class="flex_items flex_center">
			<view class="flex_items flex_center bgwhite ptb40" style="width: 650rpx;">
				<view style="width:calc(100% - 60rpx)">
					<view class="flex_between flex_items">
						<u-icon name="photo" color="#e6effb" size="28" style="opacity: 0;"></u-icon>
						<text class="f32">请滑动验证</text>
						<u-icon @click="close" name="close-circle" color="#5e6d82" size="20"></u-icon>
					</view>
					<liu-slider-verify class="mt40" sBgColor="#FBB500" sColor="#ffffff" ref="verify"
						@change='change'></liu-slider-verify>
				</view>
			</view>
		</view>

		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usernumber: "",
				modalShow: false,
				types: 1,
				imgUrl: "",
				form: {
					// account: "",
					// password: "",
					mobile: "",
					code: ""
				},
				imgcode: "",
				istype: 1,
				codemsg: "发送验证码",
				show: false
			}
		},
		onLoad(options) {
			// console.log(options.usernumber)
			// this.usernumber = options.usernumber
			this.imgUrl = this.api.imgUrl
		},
		methods: {
			goout(types) {
				uni.removeStorageSync('token')
				if (types == '1') {
					uni.showLoading({
						title: "登录中..."
					})
					this.api.mtlogin({
						account: "zhangsan",
						password: "123456"
					}).then((res) => {
						console.log(res)
						if (res.data.code == '200') {
							uni.setStorageSync('token', res.data.data.token)
							uni.navigateTo({
								url: "/pages/mt/preferential?user=" + res.data.data.user_number
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					})
				} else {
					this.modalShow = true
				}
				return false
				let that = this
				this.types = types
				this.usernumber = ""
				that.modalShow = true
			},
			getcode() {
				if (this.form.phone == '') {
					uni.showToast({
						title: "手机号不能为空",
						icon: "none"
					})
					return false
				}
				this.show = true
				// if (this.codemsg == "发送验证码" || this.codemsg == "重新发送") {
				// 	// this.getphonecode()
				// 	this.codemsg = 5;
				// 	this.int = setInterval(() => {
				// 		this.codemsg -= 1;
				// 		if (this.codemsg == 0) {
				// 			clearInterval(this.int);
				// 			this.codemsg = "重新发送";
				// 		}
				// 	}, 1000);
				// }
			},
			out() {
				this.modalShow = false
			},
			yes() {
				if (this.usernumber == "") {
					uni.showToast({
						title: "账号不能为空",
						icon: "none"
					})
					return false
				}
				this.submit(this.types, this.usernumber)
			},
			close() {
				this.show = false
			},
			//验证回调
			change(e) {
				console.log(e)
				if (e.state) {
					this.getphonecode()
					// this.goregister()
				} else {
					this.reset()
				}
			},
			getphonecode() {
				let that = this
				uni.showLoading({
					title: "发送中..."
				})
				that.api.gocode({
					mobile: that.form.mobile
				}).then((res) => {
					console.log(res)
					if (res.data.code == '200') {
						uni.showToast({
							title: "发送成功",
							icon: "success",
							duration: 800,
						})
						setTimeout(function() {
							that.show = false
							if (that.codemsg == "发送验证码" || that.codemsg == "重新发送") {
								// that.getphonecode()
								that.codemsg = 5;
								that.int = setInterval(() => {
									that.codemsg -= 1;
									if (that.codemsg == 0) {
										clearInterval(that.int);
										that.codemsg = "重新发送";
									}
								}, 1000);
							}
						}, 800);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						this.reset()
						this.show = false
					}
				})
			},
			goregister() {
				uni.showLoading({
					title: "注册中..."
				})
				this.api.register(this.form).then((res) => {
					console.log(res)
					if (res.data.code == '200') {
						uni.showToast({
							title: '注册成功！',
							icon: "success"
						})
						this.getloadin()
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 1200
						})
						let that = this
						setTimeout(function() {
							that.istype = 0
							that.reset()
						}, 1200);

					}
				})
			},
			getloadin() {
				if(this.form.mobile==''){
					uni.showToast({
						title:'手机号不能为空',
						icon:"none"
					})
					return false
				}
				if(this.form.code==''){
					uni.showToast({
						title:'手机验证码不能为空',
						icon:"none"
					})
					return false
				}
				uni.showLoading({
					title: "正在登录..."
				})
				this.api.mtlogin(this.form).then((res) => {
					console.log(res)
					if (res.data.code == '200') {
						uni.setStorageSync('token', res.data.data.token)
						uni.showToast({
							title: '登录成功！',
							icon: "success",
							duration: 1200
						})
						setTimeout(function() {
							uni.reLaunch({
								url: "/pages/mt/index?user=" + res.data.data.user_number
							})
						}, 1200);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			gore() {
				this.istype = 1
			},
			//重置
			reset() {
				this.$refs.verify.initialization()
			},
			submit(types, usernumber) {
				uni.showLoading({
					title: "登录中..."
				})
				// https://mtapi.86698.cn
				uni.request({
					url: "https://mtapi.86698.cn/api/login?user_number=" + usernumber + "&type=" + types,
					method: 'get',
					header: {
						'content-type': 'application/json',
					},
					success: res => {
						console.log(res)
						uni.hideLoading()
						var href = res.data.url
						window.open(href, '_self')
					},
					fail: (error) => {
						console.log(error);
					},
				})
			}
		}
	}
</script>

<style>
	.mt {
		background-image: url('https://mtweb.86698.cn/static/images/mtbg.png');
		background-size: 100% 100%;
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		overflow-y: auto;
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		background: rgba(0, 0, 0, .5);
	}

	.tkk {
		width: 80%;
		background-color: #fff;
		text-align: center;
		border-radius: 3px;
		overflow: hidden;
	}
</style>