<template>
	<div class="site-wrapper site-page--login">
		<div class="site-content__wrapper">
			<div class="site-content">
				<div class="login-main">
					<h3 class="login-title">{{entryName}}</h3>
					<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
						status-icon>
						<el-form-item prop="userName">
							<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
						</el-form-item>
						<el-form-item prop="captcha">
							<el-row :gutter="20">
								<el-col :span="14">
									<el-input v-model="dataForm.captcha" placeholder="验证码">
									</el-input>
								</el-col>
								<el-col :span="10" class="login-captcha">
									<img :src="captchaPath" @click="getCaptcha()" alt="">
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item>
							<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
						</el-form-item>
						<!-- <el-form-item>
							<a @click="merchadd()"
								style="border: 1px solid #3E8EF7;cursor: pointer;font-size: 14px;color: #3E8EF7;border-radius: 6px;width: 340px;height:35px;line-height: 35px; display:block;text-align: center;text-decoration:none;">商家入驻</a>
						</el-form-item> -->
					</el-form>
				</div>
			</div>
		</div>
		<!-- 商家入驻-->
		<el-dialog title="商家入驻" :visible.sync="dialogFormVisible" center>
			<div style="margin-bottom: 15px;">
				<span style="width: 200px;display: inline-block;text-align: right;">商户选择：</span>
				<el-radio-group v-model="isWindow">
					<el-radio :label="1">新商户入驻</el-radio>
					<el-radio :label="2">查询审核状态</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 15px;" v-if="isWindow == 2">
				<span style="width: 200px;display: inline-block;text-align: right;">手机号：</span>
				<el-input style="width:40%;" type="text" v-model="phone" placeholder="请输入手机号"></el-input>
			</div>
			<div style="margin-bottom: 15px;" v-if="isWindow == 2">
				<span style="width: 200px;display: inline-block;text-align: right;">验证码：</span>
				<el-input style="width:25%;" v-model="msg" placeholder="请输入验证码"></el-input>
				<el-button class="send-msg" style="font-size: 12px;position: relative;top: -1px;" type="primary"
					@click="sendMsg" :disabled="sending">{{sendTime}}</el-button>
			</div>
			<div slot="footer" class="dialog-footer" v-if="isWindow == 1">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="merchoneTo()">确 定</el-button>
			</div>
			<div slot="footer" class="dialog-footer" v-if="isWindow == 2">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="merchtwoTo()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getUUID
	} from '@/utils'
  import { entryName } from '@/utils/httpRequest'
	export default {
		data() {
			return {
				dataForm: {
					userName: '',
					password: '',
					uuid: '',
					captcha: ''
				},
				dataRule: {
					userName: [{
						required: true,
						message: '帐号不能为空',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}],
					captcha: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}]
				},
				captchaPath: '',
				dialogFormVisible: false,
				isWindow: 1,
        entryName:'',
			}
		},
		created() {
      this.entryName = entryName
			this.getCaptcha()
		},
		methods: {
			// 提交表单
			dataFormSubmit() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$http({
							url: this.$http.adornUrl('sys/login'), // 商户端：sys/login  管理端：sys/adminLogin
							method: 'post',
							data: this.$http.adornData({
								'username': this.dataForm.userName,
								'password': this.dataForm.password,
								'uuid': this.dataForm.uuid,
								'captcha': this.dataForm.captcha
							})
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								this.$cookie.set('token', data.token)
								this.$router.replace({
									name: 'home'
								})
								console.log('登录成功············')
							} else {
								this.getCaptcha()
								this.$message.error(data.msg)
							}
						})
					}
				})
			},
			// 获取验证码
			getCaptcha() {
				this.dataForm.uuid = getUUID()
				this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
			},
			// 商户入驻
			merchadd() {
				this.dialogFormVisible = true
			},
			merchoneTo() {
				this.$router.push({
					path: '/merchant'
				})
			},
			merchtwoTo() {
				this.$http({
					url: this.$http.adornUrl('self/merchantApply/review'),
					method: 'get',
					params: this.$http.adornParams({
						'phone': this.phone,
						'msg': this.msg
					})
				}).then(({
					data
				}) => {
					if (data.status == 0) {
						this.$router.push({
							path: '/merchantClone',
							query: {
								phone: this.phone,
								msg: this.msg
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 3500,
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.site-wrapper.site-page--login {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(38, 50, 56, .2);
		overflow: hidden;

		&:before {
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			content: "";
			background-image: url(~@/assets/img/login_bg.jpg);
			background-size: cover;
		}

		.site-content__wrapper {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 0;
			margin: 0;
			overflow-x: hidden;
			overflow-y: auto;
			background-color: transparent;
		}

		.site-content {
			min-height: 100%;
			// padding: 30px 500px 30px 30px;
		}

		.brand-info {
			margin: 220px 100px 0 90px;
			color: #fff;
		}

		.brand-info__text {
			margin: 0 0 22px 0;
			font-size: 48px;
			font-weight: 400;
			text-transform: uppercase;
		}

		.brand-info__intro {
			margin: 10px 0;
			font-size: 16px;
			line-height: 1.58;
			opacity: .6;
		}

		.login-main {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -200px;
			margin-top: -150px;
			padding: 20px 30px;
			width: 400px;
			border-radius: 8px;
			background-color: #fff;
		}

		.login-title {
			font-size: 20px;
			text-align: center;
			margin-top: 10px;
		}

		.login-captcha {
			overflow: hidden;

			>img {
				width: 100%;
				cursor: pointer;
			}
		}

		.login-btn-submit {
			width: 100%;
			margin-top: 38px;
		}
	}
</style>
