<template>
	<view class="main" v-bind:style="{height: client.win_height + 'px'}">
		<view class="one">
			<form @submit="onSubmit">
				<view class="content">
					<view class="title">姓名：</view>
					<input :value="form.name" name="name" disabled placeholder="请输入新密码" />
				</view>
				<view class="content">
					<view class="title">身份证号：</view>
					<input :value="form.card" name="card" disabled placeholder="请输入身份证号" />
				</view>
				<view class="content">
					<view class="title">出生日期：</view>
					<input :value="form.birth" name="birth" disabled placeholder="请输入出生日期" />
				</view>
				<view class="content">
					<view class="title">联系电话：</view>
					<input :value="form.phone" name="phone" disabled placeholder="请输入联系电话" />
				</view>
				<view class="content">
					<view class="title">职业等级：</view>
					<input :value="form.exam_grade" name="exam_grade" disabled placeholder="请输入职业等级" />
				</view>
				<view class="content">
					<view class="title">发证日期：</view>
					<input :value="form.cert_date" name="cert_date" disabled placeholder="请输入发证日期" />
				</view>
				<view class="content">
					<view class="title">保安员编号：</view>
					<input :value="form.baoan_num" name="baoan_num" disabled placeholder="请输入保安员编号" />
				</view>
				<view class="content">
					<view class="title">证件状态：</view>
					<input :value="form.cert_status" name="cert_status" disabled placeholder="请输入证件状态" />
				</view>
				<view class="content">
					<view class="title">补打申请原因：</view>
					<input :value="form.make_apply" name="make_apply" placeholder="请输入补打申请原因" />
				</view>
				<view class="content">
					<view class="title">补打申请公安机关代码：</view>
					<input :value="form.make_applynum" name="make_applynum" placeholder="请输入补打申请公安机关代码" />
				</view>
				<view class="content">
					<view class="title">补打申请公安机关名称：</view>
					<input :value="form.make_applypolice" name="make_applypolice" placeholder="请输入补打申请公安机关名称" />
				</view>
				<view class="content">
					<view class="title">补打申请人：</view>
					<input :value="form.make_applypersonal" name="make_applypersonal" placeholder="请输入补打申请人" />
				</view>
				<view class="content">
					<view class="title">补打申请时间：</view>
					<picker class="picker" mode="date" :value="make_applydate" @change="applyChange">
						<view>{{make_applydate||'选择补打申请时间'}}</view>
					</picker>
				</view>
				<view class="btn">
					<button type="primary" size="mini" form-type="submit">提交申请</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions: certAgain
	} = createNamespacedHelpers('certificates_print_again');
	const {
		mapActions: certBase
	} = createNamespacedHelpers('certificates_base');
	const moment = require('moment');
	export default {
		data() {
			return {
				form: {},
				// 补打申请时间
				make_applydate: ''


			}
		},
		created() {
			this.search()
		},
		methods: {
			...certBase(['fetch']),
			...certAgain(['create']),
			// 查询信息
			async search() {
				let user = this.user;
				let res = await this.fetch({
					security_guard_id: user.id
				})
				if (this.$checkRes(res)) {
					let data = {
						name: res.data.name,
						card: res.data.card,
						birth: res.data.birth,
						phone: res.data.phone,
						exam_grade: res.data.exam_grade,
						cert_date: res.data.cert_date,
						baoan_num: res.data.baoan_num,
						cert_status: res.data.cert_status,
					}
					this.$set(this, `form`, data)
				}

			},
			// 提交申请
			onSubmit: async function(e) {
				let data = e.detail.value;
				data.make_applydate = this.make_applydate;
				data.security_guard_id = this.user.id;
				let res = await this.create(data);
				if (this.$checkRes(res)) {
					uni.showToast({
						title: '操作完成',
						duration: 2000,
						icon: 'success'
					});
				}
			},
			// 选择补打申请时间
			applyChange: function(e) {
				let date = e.detail.value;
				this.$set(this, `make_applydate`, date)
			},
		},
		computed: {
			...mapState(['user']),
			...mapGetters(['client']),
		},
		onLoad() {},
	}
</script>

<style lang="scss">
	.main {
		background-color: #409eff;
		overflow-y: auto;

		.one {
			float: left;
			width: 100%;

			.content {
				padding: 0 10px;
				margin: 10px 0;

				.title {
					font-size: 16px;
					margin: 0 0 8px 0;
					color: #000000;
				}

				input {
					border: 1px solid #ccc;
					border-radius: 5px;
					padding: 10px;
				}

				.picker {
					border: 1px solid #ccc;
					border-radius: 5px;
					padding: 10px;
				}
			}

			.btn {
				text-align: center;
				margin: 15rpx 0 0 0;

				button {
					margin: 0 10px;
				}
			}
		}
	}
</style>
