<template>
	<div class="register-container">
		<div>
			<h5>软件注册</h5>
			<hr />
		</div>
		<el-form ref="form" :model="form" :rules="rules" label-width="80px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="客户名称" prop="customerName">
						<el-input v-model="form.customerName" style="width:300px"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="Key" prop="key">
						<el-input v-model="form.key" style="width:300px"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-form-item label="mac">
				<el-input v-model="form.mac" style="width:610px"></el-input>
			</el-form-item>

			<el-row>
				<el-col :span="12">
					<el-form-item label="注册地址" display="flex">
						<el-input v-model="form.registerUrl" style="width:300px"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-button type="primary" @click="getSercet" style="margin-left:80px">获取秘钥</el-button>

				</el-col>
			</el-row>
			<el-form-item label="秘钥" prop="SecretKey">
				<el-input type="textarea" v-model="form.SecretKey" style="width:610px" disabled></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-check" style=" position:absolute;right:10px" @click="saveInfo">
					提交</el-button>
			</el-form-item>

		</el-form>
	</div>
</template>

<script>
import {
	register,
	getSercet,
	saveInfo
} from '@/api/apis/register'
export default {
	data() {
		return {
			form: {
				customerName: '',
				mac: '',
				registerUrl: '',
				secretKey: '',
				key: ''
			},
			rules: {
				// validator:自定义函数
				customerName: [{
					required: true,
					trigger: 'blur',
					message: '客户名称不能为空'
				},]
			},
		}
	},
	created() {
		this.register()
	},
	methods: {
		//获取注册信息，回显数据
		async register() {
			const res = await register()
			this.form.mac = res.data[0].mac;
			this.form.registerUrl = res.data[0].registerUrl;
			this.form.key = res.data[0].key
			this.form.customerName = res.data[0].customerName
			this.form.secretKey = res.data[0].secretKey

		},
		//获取密钥
		async getSercet() {
			const res = await getSercet(this.form)
			this.form.secretKey = res.data[0]
		},
		//提交
		saveInfo() {
			this.$refs.form.validate(async isOK => {
				if (isOK) {
					try {
						this.loading = true
						await saveInfo(this.form)
						this.$message.success('提交成功')

						this.$router.push('/login')
					} catch (error) {
					} finally {
						//  不论执行try 还是catch  都去关闭转圈
						this.loading = false
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.register-container {
	width: 800px;
	height: 500px;
	margin: 100px;
}
</style>>
