<template>
	<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="210rpx" class="wrapper">
		<view class="container">
			<view class="title">办理信息</view>
			<uni-forms-item label="申请时间" name="applyDate" required>
				<uni-datetime-picker type="date" v-model="formData.applyDate" :border="false" placeholder="请选择申请时间" />
			</uni-forms-item>
			<uni-forms-item label="是否本人申请" name="isSelf" required>
				<uni-data-checkbox v-model="formData.isSelf" :localdata="isSelf" @change="handleIsSelfChange" />
			</uni-forms-item>
			<uni-forms-item label="代理人姓名" name="agentName" required v-if="formData.isSelf === '0'">
				<uni-easyinput :input-border="false" placeholder="代理人姓名" v-model="formData.agentName" />
			</uni-forms-item>
			<uni-forms-item label="关系" name="relation" required v-if="formData.isSelf === '0'">
				<uni-data-checkbox v-model="formData.relation" :localdata="relation" />
			</uni-forms-item>
		</view>
		<view class="container">
			<view class="title">申请人信息</view>
			<uni-forms-item label="申请人姓名" name="applicantEmpName" required>
				<uni-easyinput :input-border="false" placeholder="申请人姓名" v-model="formData.applicantEmpName" />
			</uni-forms-item>
			<uni-forms-item label="性别" name="sex" required>
				<uni-data-checkbox v-model="formData.sex" :localdata="sex" />
			</uni-forms-item>
			<uni-forms-item label="警号" name="empNo" required>
				<uni-easyinput :input-border="false" placeholder="警号" v-model="formData.empNo" />
				
			</uni-forms-item>
			<uni-forms-item label="单位" name="departId" required>
				<uni-data-picker :localdata="departs" placeholder="请选择单位" :border="false"
					:map="{text:'shortName', value: 'id'}" v-model="formData.departId" />
			</uni-forms-item>
			<uni-forms-item label="身份证" name="idCode" required>
				<uni-easyinput :input-border="false" placeholder="身份证" v-model="formData.idCode" />

			</uni-forms-item>
			<uni-forms-item label="出生年月" name="birthday">
				<uni-datetime-picker type="date" v-model="formData.birthday" :border="false" placeholder="请选择出生年月" />
				
			</uni-forms-item>
			<uni-forms-item label="联系电话" name="mobile" required>
				<uni-easyinput :input-border="false" placeholder="联系电话" v-model="formData.mobile" />
			</uni-forms-item>
			<uni-forms-item label="职务" name="job" >
				<uni-easyinput :input-border="false" placeholder="职务" v-model="formData.job" />
			</uni-forms-item>
			<uni-forms-item label="警衔" name="policeRank" >
				<uni-easyinput :input-border="false" placeholder="警衔" v-model="formData.policeRank" />
			</uni-forms-item>
			<uni-forms-item label="文化程度" name="levelEducation">
				<uni-data-select
				      v-model="formData.levelEducation"
				      :localdata="levelEducation"
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="政治面貌" name="politicCountenance" >
				<uni-data-select
				      v-model="formData.politicCountenance"
				      :localdata="politicCountenance"
				    ></uni-data-select>
			</uni-forms-item>
			
			<uni-forms-item label="开户行" name="bankCard" required>
				<uni-data-select
				      v-model="formData.bankCard"
				      :localdata="bank.map(item => {
						  return {
							  text: item.dictLabel,
							  value: item.dictValue
						  }
					  })"
					  
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="所属支行" name="bankBranch" required>
				<uni-easyinput :input-border="false" placeholder="所属支行" v-model="formData.bankBranch" />
			</uni-forms-item>
			<uni-forms-item label="银行账号" name="bankCardAccount" required>
				<uni-easyinput :input-border="false" placeholder="银行账号" v-model="formData.bankCardAccount" />
			</uni-forms-item>
		</view>
		<view class="container">
			<view class="title">案发情况</view>
			<uni-forms-item label="事发时间" name="happenTime" required>
				<uni-datetime-picker type="datetime" v-model="formData.happenTime" :border="false" placeholder="请选择事发时间" />
			</uni-forms-item>
			<uni-forms-item label="事实与理由" name="factReason" required>
				<uni-easyinput type="textarea" :input-border="false" placeholder="事实与理由" v-model="formData.factReason" />
			</uni-forms-item>
			<uni-forms-item label="案发环节" name="incidentLink" required>
				<uni-data-select
				      v-model="formData.incidentLink"
				      :localdata="incidentLink.map(item => {
						  return {
							  text: item.dictLabel,
							  value: item.dictValue
						  }
					  })"
					  @change="(val) => {
						  formData.incidentLinkName = getDictLabel(incidentLink, val)
					  }"
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="受伤程度" name="injurySeverity" required>
				<uni-data-select
				      v-model="formData.injurySeverity"
				      :localdata="injurySeverity.map(item => {
						  return {
							  text: item.dictLabel,
							  value: item.dictValue
						  }
					  })"
					  @change="(val) => {
						formData.injurySeverityName = getDictLabel(injurySeverity, val)
					  }"
				    ></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="侵权形式" name="formsOfTort" required>
					<uni-data-picker :localdata="formsOfTort" placeholder="侵权形式" :border="false" :map="{text:'dictLabel', value: 'dictValue'}" v-model="formData.formsOfTort" 
						@change="(val) => {
							formData.formsOfTortName = detail.value[0].text
						}"
					/>
			</uni-forms-item>
			<uni-forms-item label="侵权人姓名" name="infringerName">
				<uni-easyinput :input-border="false" placeholder="侵权人姓名" v-model="formData.infringerName" />
			</uni-forms-item>
			<uni-forms-item label="处理方式" name="infringerHandle" required>
				<uni-data-checkbox v-model="formData.infringerHandle" :localdata="infringerHandle" />
				
			</uni-forms-item>
		</view>
		<view class="container">
			<view class="title">佐证材料</view>
			<uni-forms-item label="附件" name="documentFile" label-position="top" required>
				<upload v-model="formData.documentFile" />
			</uni-forms-item>
		</view>
		<view class="container">
			<view class="title">呈报审批</view>
			<uni-forms-item label="主办单位" name="handleDepartId" required>
				<uni-data-picker :localdata="secondDeparts" placeholder="请选择主办单位" :border="false"
					:map="{text:'shortName', value: 'id'}" v-model="formData.handleDepartId" />
			</uni-forms-item>
			<uni-forms-item label="审批人" name="approverEmpNo" required>
				<view>{{ formData.approver }}</view>
			</uni-forms-item>
		</view>
	</uni-forms>
	<view class="footer col-24 flex gap-8">
		<button class="col-12" @tap="back">取消</button>
		<button type="primary" @tap="submit" class="col-12">确定</button>
	</view>
</template>

<script>
	import { getDictLabel } from '@/common/util'
	import moment from 'moment'
	import store from '@/store'
	import { getDictOptions } from '@/common/dict'
	import {
		departTree, secondList
	} from '@/api/depart'

	import {
		addComfort,
		listRightPersonByDepartId
	} from '@/api/comfort'

	let _this;
	export default {
		data() {
			return {
				formData: {
					applyDate: moment().format('YYYY-MM-DD'),
					documentFile: [],
				},
				departs: [],
				secondDeparts: [],
				rules: {
					applyDate: {
						rules: [{
							required: true,
							errorMessage: '请选择申请时间',
						}]
					},
					isSelf: {
						rules: [{
							required: true,
							errorMessage: '请选择是否本人申请',
						}]
					},
					agentName: {
						rules: [{
							required: true,
							errorMessage: '请输入代理人姓名',
						}]
					},
					relation: {
						rules: [{
							required: true,
							errorMessage: '请选择代理人关系',
						}]
					},
					applicantEmpName: {
						rules: [{
							required: true,
							errorMessage: '请输入申请人姓名',
						}]
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}]
					},
					empNo: {
						rules: [{
							required: true,
							errorMessage: '请输入警号',
						}]
					},
					departId: {
						rules: [{
							required: true,
							errorMessage: '请选择单位',
						}]
					},
					idCode: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证',
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式',
						}]
					},
					bankCard: {
						rules: [{
							required: true,
							errorMessage: '请选择开户行',
						}]
					},
					bankBranch: {
						rules: [{
							required: true,
							errorMessage: '请输入所属支行',
						}]
					},
					bankCardAccount: {
						rules: [{
							required: true,
							errorMessage: '请输入银行账号',
						}]
					},
					happenTime: {
						rules: [{
							required: true,
							errorMessage: '请选择事发时间',
						}]
					},
					factReason: {
						rules: [{
							required: true,
							errorMessage: '请输入事实与理由',
						}]
					},
					incidentLink: {
						rules: [{
							required: true,
							errorMessage: '请选择案发环节',
						}]
					},
					injurySeverity: {
						rules: [{
							required: true,
							errorMessage: '请选择受伤程度',
						}]
					},
					formsOfTort: {
						rules: [{
							required: true,
							errorMessage: '请选择侵权形式',
						}]
					},
					infringerHandle: {
						rules: [{
							required: true,
							errorMessage: '请选择处理方式',
						}]
					},
					handleDepartId: {
						rules: [{
							required: true,
							errorMessage: '请选择主办单位',
						}]
					},
					approverEmpNo: {
						rules: [{
							required: true,
							errorMessage: '未配置审批人，当前主办单位的未配置维权专干(请联系系统管理员)',
						}]
					},
					// documentFile: {
					// 	rules: [{
					// 		validateFunction: function(rule,value,data,callback){
					// 			if (!value || value.length === 0) {
					// 				callback('请上传附件')
					// 			}
					// 			return true
					// 		}
					// 	}]
					// },
				},
				isSelf: [
					{
						text: '是',
						value: '1'
					},
					{
						text: '否',
						value: '0'
					}
				],
				relation: [
					{
						text: '同事',
						value: '1'
					},
					{
						text: '亲属',
						value: '2'
					}
				],
				sex: [
					{
						text: '男',
						value: '0'
					},
					{
						text: '女',
						value: '1'
					}
				],
				levelEducation: [
					{
						text: '高中',
						value: '高中'
					},
					{
						text: '大专',
						value: '大专'
					},
					{
						text: '本科',
						value: '本科'
					},
					{
						text: '研究生及以上',
						value: '研究生及以上'
					}
				],
				politicCountenance: [
					{
						text: '群众',
						value: '群众'
					},
					{
						text: '团员',
						value: '团员'
					},
					{
						text: '预备党员',
						value: '预备党员'
					},
					{
						text: '党员',
						value: '党员'
					}
				],
				infringerHandle: [
					{
						text: '行政处罚',
						value: '行政处罚'
					},
					{
						text: '刑事处罚',
						value: '刑事处罚'
					},
				]
			}
		},
		watch : {
			'formData.handleDepartId': function(val) {
				listRightPersonByDepartId(val).then((data) => {
					if (data.length) {
						this.formData.approverEmpNo = data.map((item) => item.empNo);
						this.formData.approver = data
							.map((item) => item.empName)
							.join("、");
					} else {
						delete this.formData.approverEmpNo;
						delete this.formData.approver;
					}
				});
			},
		},
		setup() {
			const formsOfTort = getDictOptions('formsOfTort')
			const injurySeverity = getDictOptions('injurySeverity')
			const incidentLink = getDictOptions('incidentLink')
			const bank = getDictOptions('bank')
			
			return {
				formsOfTort,
				injurySeverity,
				incidentLink,
				bank,
				getDictLabel
			}
		},
		onLoad() {
			_this = this;
			departTree().then(data => {
				this.departs = data[0].children
			})
			secondList().then(data => {
				this.secondDeparts = data
			})
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					this.formData.happenTime = moment(this.formData.happenTime, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm')
					addComfort(this.formData).then(data => {
						_this.formData = {
							applyDate: moment().format('YYYY-MM-DD'),
							documentFile: [],
						}
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 3000
						})
						uni.navigateBack({
							
						});
						
					})
				}).catch(err => {
					uni.showToast({
						title: '请检查表单必填项',
						icon: 'none',
						duration: 3000
					})
				})
			},
			back() {
				uni.navigateBack({
					
				});
			},
			handleIsSelfChange() {
				console.log('handleIsSelfChange')
				if (this.formData.isSelf === '1') {
					this.formData.applicantEmpName = store.state.user.nickName
					this.formData.empNo = store.state.user.empNo
					this.formData.idCode = store.state.user.userName
					this.formData.mobile = store.state.user.mobile
					this.formData.departId = store.state.user.departId
					if (store.state.user.userName.length === 18) {
						this.formData.birthday = moment(store.state.user.userName.substr(6, 8), 'YYYYMMDD').format('YYYY-MM-DD')
						this.formData.sex = getSex(store.state.user.userName)
					}
				}
			}
		}
	}
	
	function getSex(idCard) {
		let res = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
		if (idCard && res.test(idCard)) {
			let genderCode = idCard.charAt(16);
			if (parseInt(genderCode) % 2 == 0) {
				return '1';
			}
			return '0';
		}
		return '';
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		background-color: #f5f5f5;
		padding-bottom: 72px;
	}
	.container {
		background-color: #fff;
		margin-bottom: 24rpx;
	}
	.footer {
		background-color: #fff;
		border-top: 1px solid #eee;
	}
	.title {
		margin-bottom: 16rpx;
	}
</style>