<template>
	<div class="transference">
		<div class="title">
			填写账号信息
		</div>
		<div class="form" style="width: 40%;">
			<el-form ref="ruleFormRef" label-width="120px" label-position="right" :model="form">
				<el-form-item :rules="[{required: true,message: '请输入本人手机号',trigger: 'blur',},]" label="本人手机号"
					prop="phone">
					<el-input readonly v-model="form.phone" placeholder="请输入本人手机号" />
				</el-form-item>
				<el-form-item :rules="[{required: true,message: '请输入短信验证码',trigger: 'blur',},]" label="短信验证码"
					prop="code">
					<div class="flex" style="width: 100%;">
						<el-input v-model="form.code" placeholder="请输入短信验证码" />
						<el-button style="width: 140px;" @click="getCode()" :disabled="isDjs"
							type="primary">{{isDjs?second:'获取验证码'}}</el-button>
					</div>
				</el-form-item>
				<el-form-item :rules="[{required: true,message: '请输入转让人手机号',trigger: 'blur',},]" label="转让人手机号"
					prop="phone2">
					<el-input v-model="form.phone2" placeholder="请输入转让人手机号" />
				</el-form-item>
			</el-form>
		</div>
		<div class="title" style="margin-top: 20px;">
			核对企业信息
		</div>
		<div class="companyInfo">
			<el-form ref="formCompany" size="large" style="margin-top: 20px;" class="flex align-center justify-between"
				label-position="top" :inline="true" :model="companyInfo" label-width="120px">
				<el-form-item prop="companyName" class="row45" label="企业名称">
					<el-input placeholder="请输入企业名称" readonly class="inputClass" v-model="companyInfo.companyName" />
				</el-form-item>
				<el-form-item prop="companyName" class="row45" label="营业地址">
					<el-input placeholder="请输入营业地址" readonly class="inputClass" v-model="companyInfo.companyAddress" />
				</el-form-item>
				<el-form-item prop="companyScope" class="row45" label="经营范围">
					<el-input placeholder="请输入经营范围" readonly class="inputClass" v-model="companyInfo.companyScope" />
				</el-form-item>
				<el-form-item prop="companyRegisteredFund" class="row45" label="注册资金(万)">
					<el-input placeholder="请输入注册资金(万)" readonly class="inputClass"
						v-model="companyInfo.companyRegisteredFund" />
				</el-form-item>
				<el-form-item prop="createTime" class="row45" label="注册时间">
					<el-input placeholder="请输入注册时间" readonly class="inputClass" v-model="companyInfo.createTime" />
				</el-form-item>
				<el-form-item prop="companyDetails" class="row45" label="资质简介">
					<el-input placeholder="请输入资质简介" readonly class="inputClass" v-model="companyInfo.companyDetails" />
				</el-form-item>



				<div style="width: 100%;margin-top: 20px;" class="flex align-center justify-center">
					<el-button @click="saveCompany()" style="width: 100px;margin-left: 30px;"
						type="primary">确认转让</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	export default {
		data() {
			return {
				form: {
					phone: '',
					code: '',
					phone2: '',
				},
				second: 59,
				screenHeight: 0,
				isDjs: false, //是否正在倒计时
				timer: null,
				companyInfo: {},
			}
		},

		mounted() {
			this.form.phone = this.$store.state.phone
			this.screenHeight = window.innerHeight
			this.getQiyeInfo();
		},
		methods: {
			//退出登录
			outLogin() {
				localStorage.removeItem('token');
				localStorage.removeItem('userId');
				localStorage.removeItem('userType')
				// 调用重置状态的函数  
				this.$store.dispatch('SET_DATA');
				this.$router.push({
					name: 'login'
				})
			},
			//确认转让
			saveCompany() {
				let ruleFormRef = this.$refs.ruleFormRef
				ruleFormRef.validate((valid) => {
					if (valid) {
						ElMessageBox.confirm(
							'确认转让企业吗？',
							'温馨提示', {
								confirmButtonText: '确认',
								cancelButtonText: '取消',
								type: 'warning',
							}
						).then(() => {
							let data = {
								phone: this.form.phone,
								msg: this.form.code,
								givePhone: this.form.phone2
							}
							this.$Request.post('/app/company/giveCompany', data).then(res => {
								if (res.code === 0) {
									ElMessage({
										message: '转让成功',
										type: 'success',
										duration: 1500,
										offset: this.screenHeight / 2
									})
									setTimeout(() => {
										this.outLogin()
									}, 1000)

								} else {
									ElMessage({
										message: res.msg,
										type: 'error',
										duration: 1500,
										offset: this.screenHeight / 2
									})
								}
							});
						}).catch(() => {

						})
					}
				})

			},
			getQiyeInfo() {
				let data = {
					userId: localStorage.getItem('userId')
				}
				this.$Request.get('/app/company/selectCompanyByUserId', {
					params: data
				}).then(res => {
					if (res.code === 0) {
						this.companyInfo = res.data
					} else {
						ElMessage({
							message: res.msg,
							type: 'error',
							duration: 1500,
							offset: this.screenHeight / 2
						})
					}
				});
			},
			//开始倒计时
			startCode() {
				this.timer = setInterval(() => {
					if (this.second > 0) {
						this.second = this.second - 1
					} else {
						clearInterval(this.timer)
						this.timer = null
						this.isDjs = false
						this.second = 59
					}
				}, 1000)
			},
			//获取验证码
			getCode() {
				if (this.isDjs == true) {
					return
				}
				let str = /^[1][3,5,7,8,9][0-9]{9}$/
				let mobile = this.form.phone
				if (str.test(mobile) == false) {
					ElMessage({
						message: '请输入正确的手机号',
						type: 'info',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					return
				}
				this.$Request.get('/app/Login/sendMsg/' + mobile + '/forget').then(res => {
					if (res.code === 0) {
						this.isDjs = true
						this.startCode()
					} else {
						ElMessage({
							message: res.msg,
							type: 'info',
							duration: 1500,
							offset: this.screenHeight / 2
						})
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding-left: 10px;
		border-left: 4px solid #00DD9A;
	}

	.form {
		margin-top: 20px;
	}

	.companyInfo {
		margin-top: 20px;
	}

	.row45 {
		width: 45%;
	}
</style>