<template>
	<uni-row class="main" v-bind:style="{ 'min-height': client.win_height + 'px' }">
		<uni-col :span="24" class="one"></uni-col>
		<uni-col :span="24" class="two" v-bind:style="{ 'min-height': client.win_height - 110 * 2 + 'px' }">
			<uni-col :span="24" class="one_1">
				<uni-col :span="7" class="one_1img">
					<image class="img" :src="coverImg"></image>
				</uni-col>
				<uni-col :span="17" class="one_1info">
					<view>
						<text>保安姓名</text>
						<text>：</text>
						<text>{{ info.name }}</text>
					</view>
					<view>
						<text>职业等级</text>
						<text>：</text>
						<text>{{ info.exam_grade }}</text>
					</view>
					<view>
						<text>发证日期</text>
						<text>：</text>
						<text>{{ info.cert_date }}</text>
					</view>
				</uni-col>
			</uni-col>
			<uni-col :span="24" class="one_2">
				<view>
					<text>证件状态</text>
					<text>：</text>
					<text>{{ info.cert_status == "0" ? "正常" : "注销" }}</text>
				</view>
				<view><text>证件编号</text><text>：</text>
					<text>{{ info.baoan_num }}</text>
				</view>
				<view><text>出生日期</text>
					<text>：</text>
					<text>{{ info.birth }}</text>
				</view>
				<view><text>身份证号</text>
					<text>：</text>
					<text>{{ info.card }}</text>
				</view>
				<view>
					<text>现住详址</text>
					<text>：</text>
					<text>{{ info.house_onaddress }}</text>
				</view>
				<view>
					<text>发证机关</text>
					<text>：</text>
					<text>{{ info.cert_police }}</text>
				</view>
				<view>
					<text>人像信息</text>
					<text>：</text>
					<text>{{ info.collect_photo }}</text>
				</view>
				<view>
					<text>指纹信息</text>
					<text>：</text>
					<text>{{ info.collect_fingerprint }}</text>
				</view>
				<view>
					<text>虹膜信息</text>
					<text>：</text>
					<text>{{ info.collect_iris }}</text>
				</view>
			</uni-col>
			<uni-col :span="24" class="one_3">
				<uni-col :span="24" class="one_3txt">工作经历</uni-col>
				<uni-col :span="24" class="list" v-for="(i, index) in workList" :key="index">
					<view class="name">{{ i.zw }}</view>
					<view class="other">
						<view class="otherInfo">
							工作单位：<text>{{ i.company_name || "暂无" }}</text>
						</view>
						<view class="otherInfo">
							起止时间：<text>{{ i.contract_startdate }}-{{ i.contract_enddate }}</text>
						</view>
					</view>
				</uni-col>
			</uni-col>
			<uni-col :span="24" class="one_3">
				<uni-col :span="24" class="one_3txt">二维码</uni-col>
				<uni-col :span="24" class="qrcode">
					<canvas class='qrcode-canvas' canvas-id='qrcode'></canvas>
				</uni-col>
			</uni-col>
		</uni-col>
		<uni-col :span="24" class="one thr"></uni-col>
	</uni-row>
</template>

<script>
	import {
		mapState,
		mapGetters,
		createNamespacedHelpers
	} from "vuex";
	import helper from "../../common/base.js";
	const {
		mapActions: certBase
	} = createNamespacedHelpers("certificates_base");
	const {
		mapActions: collect
	} = createNamespacedHelpers(
		"security_guard_collect"
	);
	const {
		mapActions: companyWork
	} =
	createNamespacedHelpers("company_baoan_work");
	let QRCode = require('../../util/qrcode.js').default
	export default {
		data() {
			return {
				// 头像
				coverImg: "",
				// 详细信息
				info: {},
				// 工作经历
				workList: [],
				// 二维码
				canvasId: 'qrcode',
				QR: '', // 二维码
				qrText: '', // 输入的二维码内容
				color: '#000000', // 选择的颜色，默认：黑色
				colorData: {
					r: 0,
					g: 0,
					b: 0,
					a: 1
				}
			};
		},
		async created() {
			await this.search();

		},
		mounted() {
			this.saveQrcode();
		},
		methods: {
			...certBase(["fetch"]),
			...collect(["query"]),
			...companyWork({
				workQuery: "query"
			}),
			// 查询信息
			async search() {
				let {
					id,
					collect_photo,
					collect_fingerprint,
					collect_iris
				} = this.user;
				// 存储用户id
				this.$set(this, `qrText`, id);
				if (id) {
					let res = await this.fetch({
						security_guard_id: id
					});
					if (this.$checkRes(res)) {
						let data = res.data;
						data.collect_photo = collect_photo;
						data.collect_fingerprint = collect_fingerprint;
						data.collect_iris = collect_iris;
						this.$set(this, `info`, data);
						// 查询头像
						this.searchCollect(id);
						// 查询工作经历
						this.searchWork(id);
					}
				}
			},
			// 查询头像
			async searchCollect(id) {
				let res = await this.query({
					security_guard_id: id,
					type: "人像"
				});
				if (this.$checkRes(res)) {
					let data = res.data[0];
					let url = helper.webfilesUrl + data.data;
					this.$set(this, `coverImg`, url);
				}
			},
			// 查询工作经历
			async searchWork(id) {
				let res = await this.workQuery({
					security_guard_id: id
				});
				if (this.$checkRes(res)) {
					this.$set(this, `workList`, res.data);
				}
			},
			// 保存二维码
			saveQrcode() {
				this.QR.clear()
				this.QR._opts.colorDark = this.color
				this.QR.makeCode(this.qrText)
				this.createQRCodeDone = true
			},

		},
		computed: {
			...mapState(["user"]),
			...mapGetters(["client"]),
		},
		onLoad() {
			let that = this
			let res = uni.getSystemInfoSync()
			that.canvasWidth = res.windowWidth * 350 / 750
			that.canvasHeight = res.windowWidth * 350 / 750
			let qrcode = new QRCode(that.canvasId, {
				text: 'test',
				width: that.canvasWidth,
				height: that.canvasHeight,
				colorDark: '#ccc',
				colorLight: '#fff',
				correctLevel: QRCode.correctLevel.H,
				logo: '',
				successTips: false
			})
			that.QR = qrcode;
		},
	};
</script>

<style lang="scss">
	.main {
		.one {
			background-image: url(../../static/1.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 110px;
		}

		.two {
			background-image: url(../../static/2.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.one_1 {
				width: 80%;
				margin: 0 38px;

				.one_1img {
					.img {
						width: 100%;
						height: 100px;
						overflow: hidden;
						border: 1px solid #f1f1f1;
					}
				}

				.one_1info {
					view {
						padding: 0 15px;
						font-size: 14px;
						font-weight: bold;
						margin: 12px 0;
					}
				}
			}

			.one_2 {
				width: 80%;
				margin: 0 38px;

				view {
					padding: 0 0 0 8px;
					font-size: 14px;
					font-weight: bold;
					margin: 0 0 15px 0;
				}
			}

			.one_3 {
				width: 80%;
				margin: 0 38px;

				.one_3txt {
					text-align: center;
					font-size: 14px;
					font-weight: bold;
					margin: 0 0 5px 0;
				}

				.list {
					border-radius: 8px;
					padding: 5px 0;
					margin: 0 0 5px 0;
					border: 1px solid #000000;

					.name {
						padding: 0 8px;
						font-size: 16px;
						font-weight: bold;
						margin: 0 0 5px 0;
					}

					.other {
						.otherInfo {
							padding: 0 8px;
							margin: 0 0 5px 0;
							font-size: 14px;
							color: #000000;
						}
					}
				}

				.qrcode {
					.qrcode-canvas {
						margin: 2rpx;
						height: 350rpx;
						width: 350rpx;
						position: relative;
						left: 130rpx;
					}
				}
			}
		}

		.thr {
			background-image: url(../../static/3.jpg);
		}
	}
</style>
