<template>
	<div class="order-wrapper">
		<!-- <breadcrumb :item-name="['订单管理', '订单列表']"></breadcrumb> -->
		<el-card>
			<div class="wrap">
				<el-form :model="form" style="width: 500px;">
					
					<el-form-item label="绑定二维码" :label-width="formLabelWidth">
						<!-- <canvas id="canvas"></canvas> -->
						<img  :src="images" alt="">
					</el-form-item>
					<el-form-item label="密钥" :label-width="formLabelWidth">
						<el-input v-model="form.secret" type="text" 
							placeholder="" width="300px"></el-input>
					</el-form-item>
					<el-form-item label="绑定口令" :label-width="formLabelWidth">
						<el-input v-model="form.code" type="text" 
							placeholder="请输入绑定口令" width="300px"></el-input>
					</el-form-item>
				</el-form>
				<div class="dialog-footer">
					<el-button type="primary" @click="checkCode">确 定</el-button>
				</div>
			</div>


		</el-card>
	</div>
</template>

<script>
	import {
		setTransaction
	} from '@/request/agent.js'
	//getga
	import {
		getga,
		checkCode
	} from '@/request/user.js'
	export default {
		name: 'setGa',
		data() {
			return {
				images: '',
				formLabelWidth: '120px',
				form: {
					newpassword: '',
					oldpassword: '',
					secret: ''
				},
				dialogTableVisible: false,
				queryInfo: {
					keyword: '',
					page: 1,
					limit: 10
				},
				list: [],
				total: 0,
				loading: false,
			}
		},
		created() {},
		mounted() {
			
			this.getga()
		},
		methods: {
			openBuy() {
				this.dialogTableVisible = true
			},
			getga() {
				getga().then(res => {
					console.log(res);
					this.form.secret = res.data.secret
					// this.useqrcode(res.data.qrCodeUrl)
					this.images = res.data.qrCodeUrl
				})
			},
			checkCode() {
				if(this.loading) {
					return
				}
				this.loading = true
				checkCode({
					code: this.form.code
				}).then(res => {
					this.loading = false
					this.$msg.success('绑定成功')
				}).then(err => {
					this.loading = false
				})
			},
			useqrcode(tit) {
				var canvas = document.getElementById("canvas");
				this.$QRCode.toCanvas(canvas, tit, function(error) {
					if (error) {
						console.error(error);
					} else {
						console.log("success!");
					}
				})
			},
			
		},

	}
</script>

<style scoped>
	.dialog-footer {
		display: flex;
		justify-content: flex-end;
		width: 500px;
	}

	/deep/ .el-card__body {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>