ldb-safe-hh/pages/fill-in/index.vue

<template>
	<view class="fillin-container">
		<title-status />
		<h-navbar title="安全事件填报" />
		<nav-button :menus="menuDatas[stepIndex]" @itemClick="menuClick"></nav-button>
		<view class="steps-layout">
			<view class="steps">
				<u-steps :current="stepIndex" inactiveColor="#DDDDDD" dot>
					<u-steps-item title="事件基本情况"></u-steps-item>
					<u-steps-item title="行为人/单位"></u-steps-item>
				</u-steps>
			</view>
		</view>
		<u-form
			labelPosition="left"
			ref="uForm"
			:labelStyle="labelStyle"
			labelWidth="100"
			:model="formData"
			:rules="rules">
			<template v-if="stepIndex === 0">
				<view class="prompt">事件详情</view>
				<u-form-item
					label="查获类型"
					required
					prop="queryThing"
					borderBottom>
					<u-radio-group v-model="formData.queryThing">
						<u-radio
							:customStyle="{marginRight: '46rpx'}"
							label="Ⅰ类事件"
							:name="1">
						</u-radio>
						<u-radio
							label="Ⅱ类事件"
							:name="2">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item
					label="违规所属"
					required
					prop="violationType"
					borderBottom>
					<u-radio-group v-model="formData.violationType">
						<u-radio
							:customStyle="{marginRight: '46rpx'}"
							label="旅客"
							:name="1">
						</u-radio>
						<u-radio
							:customStyle="{marginRight: '46rpx'}"
							label="货代"
							:name="2">
						</u-radio>
						<u-radio
							label="工作人员"
							:name="3">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item
					label="事件类型"
					prop="safeThingsType.safeThingsTypeId"
					labelWidth="90"
					@click="gotoSelectSafeThingsType"
					required
					borderBottom>
					<view class="form-item-body-right-content">
						<view class="placeholder" v-if="!formData.safeThingsType || Object.keys(formData.safeThingsType).length <= 0 || !formData.safeThingsType.safeThingsTypeId">请选择事件类型</view>
						<view v-else class="text-one">{{ formData.safeThingsType.value }}</view>
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item
					label="事件标题"
					prop="thingTitle"
					required
					borderBottom>
					<u-input
						v-model="formData.thingTitle"
						inputAlign="right"
						placeholder="请输入事件标题"
						border="none"/>
				</u-form-item>
				<u-form-item
					label="查获时间"
					prop="queryTime"
					@click="clickShowDate(1)"
					required
					borderBottom>
					<view class="form-item-body-right-content">
						<view class="placeholder" v-if="!formData.queryTime">请选择时间</view>
						<view v-else>{{ formData.queryTime }}</view>
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<template v-if="formData.violationType === 1 || formData.violationType === 3">
					<u-form-item
						label="查获位置"
						prop="safeThingsPlace"
						required
						:borderBottom="!formData.safeThingsPlace">
						<view class="form-item-body-right-content">
							<u-button type="primary" size="small" shape="circle" text="编辑" @click="gotoSelectCheckBox(1)"></u-button>
						</view>
					</u-form-item>
					<view class="form-select-content" v-if="formData.safeThingsPlace">
						{{ formData.safeThingsPlace | safeThingsPlaceFormat }}
					</view>
				</template>
				<template v-else-if="formData.violationType === 2">
					<u-form-item
						label="查获位置"
						prop="behaviorThingsPlaceVo"
						required
						:borderBottom="!(formData.behaviorThingsPlaceVo && formData.behaviorThingsPlaceVo.checkPoint && formData.behaviorThingsPlaceVo.postName)">
						<view class="form-item-body-right-content">
							<u-button type="primary" size="small" shape="circle" text="编辑" @click="gotoHuoDaiPage(1)"></u-button>
						</view>
					</u-form-item>
					<view class="form-select-content" v-if="formData.behaviorThingsPlaceVo && formData.behaviorThingsPlaceVo.checkPoint && formData.behaviorThingsPlaceVo.postName">
						货检 {{ formData.behaviorThingsPlaceVo.checkPoint || '' }} {{ formData.behaviorThingsPlaceVo.postName || '' }} 岗位
					</view>
				</template>
				<u-form-item
					label="查获地点"
					prop="safeThingsAddress.safeThingsAddressId"
					@click="showPicker('safeThingsAddress')"
					borderBottom>
					<view class="form-item-body-right-content">
						<view class="placeholder" v-if="!formData.safeThingsAddress.safeThingsAddressId">请选择查获地点</view>
						<view v-else>{{ formData.safeThingsAddress.value }}</view>
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<template v-if="formData.violationType === 1 || formData.violationType === 2 || formData.violationType === 3">
					<!-- 旅客 、  货代 、 工作人员 -->
					<u-form-item
						label="航班号"
						prop="flightNumber"
						borderBottom>
						<u-input
							v-model="formData.flightNumber"
							inputAlign="right"
							placeholder="请输入航班号"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="座位号"
						prop="seatNumber"
						borderBottom>
						<u-input
							v-model="formData.seatNumber"
							inputAlign="right"
							placeholder="请输入座位号"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="受害对象"
						prop="victims"
						borderBottom>
						<u-input
							v-model="formData.victims"
							inputAlign="right"
							placeholder="请输入受害对象"
							border="none"/>
					</u-form-item>
					<view class="prompt">事件内容</view>
					<u-form-item
						label="事件起因"
						required
						prop="thingCause"
						borderBottom>
						<u-input
							v-model="formData.thingCause"
							inputAlign="right"
							placeholder="请输入事件起因"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="事件后果"
						required
						prop="thingResult"
						borderBottom>
						<u-input
							v-model="formData.thingResult"
							inputAlign="right"
							placeholder="请输入事件后果"
							border="none"/>
					</u-form-item>
					<u-form-item
						:label="`照片（${formData.photoList ? formData.photoList.length : 0}/3）`"
						prop="photoList"
						labelPosition="top"
						required
						borderBottom>
						<h-upload v-model="formData.photoList" :maxCount="3" display="block" validateField="photoList" />
					</u-form-item>
					<template v-if="formData.violationType === 1 || formData.violationType === 3">
						<u-form-item
							label="简要情况"
							prop="briefDetails"
							required
							:borderBottom="!formData.briefDetails">
							<view class="form-item-body-right-content">
								<u-button type="primary" size="small" shape="circle" text="编辑" @click="gotoSelectCheckBox(2)"></u-button>
							</view>
						</u-form-item>
						<view class="form-select-content" v-if="formData.briefDetails">
							{{ formData.briefDetails | briefDetailsFormat }}
						</view>
					</template>
					<template v-if="formData.violationType === 2">
						<u-form-item
							label="简要情况"
							prop="behaviorDescribeVo"
							required
							:borderBottom="!formData.behaviorDescribeVo">
							<view class="form-item-body-right-content">
								<u-button type="primary" size="small" shape="circle" text="编辑" @click="gotoHuoDaiPage(2)"></u-button>
							</view>
						</u-form-item>
						<view class="form-select-content" v-if="formData.behaviorDescribeVo">
							在检查（托运人） {{ formData.behaviorDescribeVo.shipper }}  公司，经办人  {{ formData.behaviorDescribeVo.operator }}  ，运单号  {{ formData.behaviorDescribeVo.waybillNumber }}  ；{{ formData.behaviorDescribeVo.beginningPlace }}  至  {{ formData.behaviorDescribeVo.destination }}  的货物中，发现有可疑物品，经开包确认为  {{ formData.behaviorDescribeVo.suspiciousItems }}  存在  {{ formData.behaviorDescribeVo.suspectedIllegalPoints }}  的违法嫌疑，现将报警单、航空货运单（复印件）及查获的上述相关物品等提供公安机关调查处理。
						</view>
					</template>
					<u-form-item
						labelWidth="120"
						labelPosition="top"
						label="简要经过描述"
						prop="thingsDesc"
						borderBottom>
						<u-textarea
							v-model="formData.thingsDesc"
							placeholder="请简要描述事件经过~"
							border="none"
							height="330rpx"
							maxlength="200">
						</u-textarea>
					</u-form-item>
				</template>
			</template>
			
			<template v-if="stepIndex === 1">
				<template v-if="formData.violationType === 1 || formData.violationType === 3">
					<!-- 旅客 或 工作人员 -->
					<view class="prompt">行为人信息</view>
					<u-form-item
						:label="`照片（${formData.behaviorPhoto ? formData.behaviorPhoto.length : 0}/1）`"
						prop="behaviorPhoto"
						required
						borderBottom>
						<h-upload v-model="formData.behaviorPhoto" :maxCount="1" validateField="behaviorPhoto" />
					</u-form-item>
					<u-form-item
						label="姓名"
						required
						prop="behaviorName"
						borderBottom>
						<u-input
							v-model="formData.behaviorName"
							inputAlign="right"
							placeholder="请输入姓名"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="性别"
						required
						prop="behaviorSex"
						borderBottom>
						<u-radio-group v-model="formData.behaviorSex">
							<u-radio
								:customStyle="{marginRight: '46rpx'}"
								label="男"
								name="男">
							</u-radio>
							<u-radio
								label="女"
								name="女">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item
						label="证件类型"
						required
						prop="behaviorDocumentType"
						borderBottom>
						<u-input
							v-model="formData.behaviorDocumentType"
							inputAlign="right"
							placeholder="请输入证件类型"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="证件号码"
						required
						prop="behaviorDocumentNumber"
						borderBottom>
						<u-input
							v-model="formData.behaviorDocumentNumber"
							inputAlign="right"
							placeholder="请输入证件号码"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="国籍"
						required
						prop="behaviorNationality"
						borderBottom>
						<u-input
							v-model="formData.behaviorNationality"
							inputAlign="right"
							placeholder="请输入国籍"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="籍贯"
						required
						prop="behaviorPlace"
						borderBottom>
						<u-input
							v-model="formData.behaviorPlace"
							inputAlign="right"
							placeholder="请输入籍贯"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="民族"
						required
						prop="behaviorNation"
						borderBottom>
						<u-input
							v-model="formData.behaviorNation"
							inputAlign="right"
							placeholder="请输入民族"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="出生日期"
						prop="behavionBirth"
						@click="clickShowDate(2)"
						borderBottom>
						<view class="form-item-body-right-content">
							<view class="placeholder" v-if="!formData.behavionBirth">请选择出生日期</view>
							<view v-else>{{ formData.behavionBirth }}</view>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item
						label="婚姻状况"
						prop="behavionMarriage"
						@click="showPicker('behavionMarriage')"
						borderBottom>
						<view class="form-item-body-right-content">
							<view class="placeholder" v-if="!formData.behavionMarriage">请选择婚姻状况</view>
							<view v-else>{{ formData.behavionMarriage | behavionMarriageFormat }}</view>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item
						label="学历"
						prop="behavionEducation"
						@click="showPicker('behavionEducation')"
						borderBottom>
						<view class="form-item-body-right-content">
							<view class="placeholder" v-if="!formData.behavionEducation">请选择学历</view>
							<view v-else>{{ formData.behavionEducation }}</view>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item
						label="职业"
						prop="behavionWork"
						borderBottom>
						<u-input
							v-model="formData.behavionWork"
							inputAlign="right"
							placeholder="请输入职业"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="工作单位"
						:required="formData.violationType === 3"
						prop="behavionCompany"
						borderBottom>
						<u-input
							v-model="formData.behavionCompany"
							inputAlign="right"
							placeholder="请输入工作单位"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="手机号"
						required
						prop="behavionPhone"
						borderBottom>
						<u-input
							v-model="formData.behavionPhone"
							inputAlign="right"
							placeholder="请输入手机号"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="座机"
						prop="behavionLandline"
						borderBottom>
						<u-input
							v-model="formData.behavionLandline"
							inputAlign="right"
							placeholder="请输入座机"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="住址"
						prop="behavionAddress"
						borderBottom>
						<u-input
							v-model="formData.behavionAddress"
							inputAlign="right"
							placeholder="请输入住址"
							border="none"/>
					</u-form-item>
				</template>
				<template v-if="formData.violationType === 2">
					<!-- 货代 -->
					<view class="prompt">行为单位信息</view>
					<u-form-item
						label="单位名称"
						required
						prop="goodsCompany"
						borderBottom>
						<u-input
							v-model="formData.goodsCompany"
							inputAlign="right"
							placeholder="请输入单位名称"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="工商备案号"
						required
						prop="goodsBusinessNumber"
						borderBottom>
						<u-input
							v-model="formData.goodsBusinessNumber"
							inputAlign="right"
							placeholder="请输入工商备案号"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="注册地"
						prop="goodsRegistrationPlace"
						borderBottom>
						<u-input
							v-model="formData.goodsRegistrationPlace"
							inputAlign="right"
							placeholder="请输入注册地"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="货单号"
						required
						prop="goodsNumber"
						borderBottom>
						<u-input
							v-model="formData.goodsNumber"
							inputAlign="right"
							placeholder="请输入货单号"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="法人姓名"
						prop="goodsLegalPerson"
						borderBottom>
						<u-input
							v-model="formData.goodsLegalPerson"
							inputAlign="right"
							placeholder="请输入法人姓名"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="法人证件号"
						prop="goodsLegalCard"
						borderBottom>
						<u-input
							v-model="formData.goodsLegalCard"
							inputAlign="right"
							placeholder="请输入法人证件号"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="发货人姓名"
						prop="goodsSendName"
						borderBottom>
						<u-input
							v-model="formData.goodsSendName"
							inputAlign="right"
							placeholder="请输入发货人姓名"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="发货人电话"
						prop="goodsSendPhone"
						borderBottom>
						<u-input
							v-model="formData.goodsSendPhone"
							inputAlign="right"
							placeholder="请输入发货人电话"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="发货人地址"
						prop="goodsSendAddress"
						borderBottom>
						<u-input
							v-model="formData.goodsSendAddress"
							inputAlign="right"
							placeholder="请输入发货人地址"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="收货人姓名"
						prop="goodsDeliveryName"
						borderBottom>
						<u-input
							v-model="formData.goodsDeliveryName"
							inputAlign="right"
							placeholder="请输入收货人姓名"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="收货人电话"
						prop="goodsDeliveryPhone"
						borderBottom>
						<u-input
							v-model="formData.goodsDeliveryPhone"
							inputAlign="right"
							placeholder="请输入收货人电话"
							border="none"/>
					</u-form-item>
					<u-form-item
						label="收货人地址"
						prop="goodsDeliveryAddress"
						borderBottom>
						<u-input
							v-model="formData.goodsDeliveryAddress"
							inputAlign="right"
							placeholder="请输入收货人地址"
							border="none"/>
					</u-form-item>
				</template>
			</template>
		</u-form>
		<view style="height: 160rpx;"></view>
		<u-datetime-picker
			ref="datePicker"
			:show="showDate"
			v-model="curDateTime"
			:mode="dateType === 1 ? 'datetime' : 'date'"
			:minDate="0"
			:formatter="formatter"
			closeOnClickOverlay
			@confirm="dateConfirm"
			@cancel="showDate = false"
			@close="showDate = false">
		</u-datetime-picker>
		<u-picker
			ref="mPicker"
			closeOnClickOverlay
			:defaultIndex="[0]"
			:show="pickerShow"
			keyName="label"
			@close="pickerShow = false"
			@cancel="pickerShow = false"
			@confirm="pickerSelect">
		</u-picker>
	</view>
</template>

<script>
	import { getSafeThingsAddressList, add } from '@/network/module/fill-in.api.js'
	import TitleStatus from '@/components/title-status/title-status'
	import HNavbar from '@/components/h-navbar/h-navbar.vue'
	import NavButton from '@/components/nav-bottom/nav-button.vue'
	const briefDetailsTitle1 = '经安全检查，被移交人存在下列第（ '
	const briefDetailsTitle2 = ' ）种疑似违法行为：'
	
	export default {
		components: {
			TitleStatus,
			HNavbar,
			NavButton
		},
		data() {
			return {
				showDate: false,
				curDateTime: Number(new Date()),
				dateType: 1,	// 时间选择类型：1为查获时间，2为出生日期
				pickerShow: false,
				pickerType: null,
				safeThingsAddressList: [],	// 查获地点
				isSubmit: false,
				stepIndex: 0,
				labelStyle: {
					fontSize: '30rpx',
					color: '#606266',
					fontWeight: '400'
				},
				menuDatas: [
					[
						{
							title: '下一步',
							plain: false,
							disabled: false,
							bgColor: '#4983FB'
						}
					],
					[
						{
							title: '上一步',
							plain: true,
							disabled: false,
							bgColor: '#4983FB'
						},
						{
							title: '确定',
							plain: false,
							disabled: false,
							bgColor: '#4983FB'
						}
					]
				],
				formData: {
					// 安全事件Id
					safeThingsId: null,
					// 查获事件 1-I类事件 2-II类事件
					queryThing: null,
					// 违规所属 1-旅客 2-货代 3-工作人员
					violationType: null,
					// 事件类型
					safeThingsType: {
						safeThingsTypeId: null,
						value: null
					},
					// 事件标题
					thingTitle: null,
					// 查获时间 格式yyyy-MM-dd HH:mm
					queryTime: null,
					// 查获位置
					safeThingsPlace: null,
					// 货代-查获位置
					behaviorThingsPlaceVo: {
						// 检查通道
						checkPoint: null,
						// 岗位
						postName: null
					},
					// 查获地点
					safeThingsAddress: {
						safeThingsAddressId: null,
						// 查获地点名称
						value: null,
					},
					// 航班号
					flightNumber: null,
					// 座位号
					seatNumber: null,
					// 受害对象
					victims: null,
					// 事件起因
					thingCause: null,
					// 事件后果
					thingResult: null,
					// 多张照片
					photoList: null,
					// 旅客\工作人员的 简要情况
					briefDetails: null,
					// 货代 简要情况
					behaviorDescribeVo: null,
					// 简要经过描述
					thingsDesc: null,
					
					/* 旅客、工作人员 */
					// 单张图片
					behaviorPhoto: null,
					// 姓名
					behaviorName: null,
					// 性别
					behaviorSex: null,
					// 证件类型
					behaviorDocumentType: null,
					// 证件号码
					behaviorDocumentNumber: null,
					// 国籍
					behaviorNationality: null,
					// 籍贯
					behaviorPlace: null,
					// 民族
					behaviorNation: null,
					// 出生日期 格式yyyy-MM-dd
					behavionBirth: null,
					// 婚姻状况 1-未婚 2-已婚 3-离异 4-丧偶
					behavionMarriage: null,
					// 学历
					behavionEducation: null,
					// 职业
					behavionWork: null,
					// 工作单位
					behavionCompany: null,
					// 手机号码
					behavionPhone: null,
					// 座机号
					behavionLandline: null,
					// 地址
					behavionAddress: null,
					
					/* 货代 */
					// 单位名称
					goodsCompany: null,
					// 工商备案号
					goodsBusinessNumber: null,
					// 注册地
					goodsRegistrationPlace: null,
					// 货单号
					goodsNumber: null,
					// 法人姓名
					goodsLegalPerson: null,
					// 法人证件号
					goodsLegalCard: null,
					// 发货人姓名
					goodsSendName: null,
					// 发货人电话
					goodsSendPhone: null,
					// 发货人地址
					goodsSendAddress: null,
					// 收货人姓名
					goodsDeliveryName: null,
					// 收货人电话
					goodsDeliveryPhone: null,
					// 收货人地址
					goodsDeliveryAddress: null
				}
			}
		},
		computed: {
			rules() {
				const rule = {
					queryThing: [
						{
							required: true, 
							type: 'number',
							message: '请选择查获事件',
							trigger: 'blur'
						}
					],
					violationType: [
						{
							required: true, 
							type: 'number',
							message: '请选择违规所属',
							trigger: 'blur'
						}
					],
					'safeThingsType.safeThingsTypeId': [
						{
							required: true,
							type: 'number',
							message: '请选择事件类型',
							trigger: ['change','blur'],
						}
					],
					thingTitle: [
						{
							required: true,
							whitespace: true,
							message: '请输入事件标题',
							trigger: ['change','blur'],
						}
					],
					queryTime: [
						{
							required: true,
							whitespace: true,
							message: '请选择查获时间',
							trigger: ['change','blur'],
						}
					],
					safeThingsPlace: [
						{
							required: true,
							type: 'object',
							message: '请选择查获位置',
							trigger: ['change','blur'],
							validator: (rule, value, callback) => {
								if(!!value && Object.keys(value).length > 0) {
									return true
								}
								return false
							}
						}
					],
					behaviorThingsPlaceVo: [
						{
							required: true,
							type: 'object',
							message: '请选择查获位置',
							trigger: ['change','blur'],
							validator: (rule, value, callback) => {
								if(!!value && Object.keys(value).length > 0) {
									if(value.checkPoint && value.postName) {
										return true
									}
								}
								return false
							}
						}
					],
					'safeThingsAddress.safeThingsAddressId': [
						{
							required: false,
							type: 'number',
							message: '请选择查获地点',
							trigger: ['change','blur'],
						}
					],
					thingCause: [
						{
							required: true,
							whitespace: true,
							message: '请输入事件起因',
							trigger: ['change','blur'],
						}
					],
					thingResult: [
						{
							required: true,
							whitespace: true,
							message: '请输入事件后果',
							trigger: ['change','blur'],
						}
					],
					photoList: [
						{
							required: true,
							type: 'array',
							message: '请上传照片',
							trigger: ['change','blur'],
							validator: (rule, value, callback) => {
								if(!!value) {
									if(value.length > 0) {
										return true
									}
								}
								return false
							}
						}
					],
					briefDetails: [
						{
							required: true,
							type: 'object',
							message: '请输入简要情况',
							trigger: ['change','blur'],
							validator: (rule, value, callback) => {
								if(!!value && Object.keys(value).length > 0) {
									return true
								}
								return false
							}
						}
					],
					behaviorDescribeVo: [
						{
							required: true,
							type: 'object',
							message: '请输入简要情况',
							trigger: ['change','blur'],
							validator: (rule, value, callback) => {
								if(!!value && Object.keys(value).length > 0) {
									return true
								}
								return false
							}
						}
					],
					thingsDesc: [
						{
							required: false,
							whitespace: true,
							message: '请简要描述事件经过',
							trigger: ['change','blur'],
						}
					],
					// 旅客、工作人员
					behaviorPhoto: [
						{
							required: true,
							type: 'array',
							message: '请上传照片',
							trigger: ['change','blur'],
							validator: (rule, value, callback) => {
								if(!!value) {
									if(value.length > 0) {
										return true
									}
								}
								return false
							}
						}
					],
					behaviorName: [
						{
							required: true,
							whitespace: true,
							message: '请输入姓名',
							trigger: ['change','blur'],
						}
					],
					behaviorSex: [
						{
							required: true,
							whitespace: true,
							message: '请选择性别',
							trigger: ['change','blur'],
						}
					],
					behaviorDocumentType: [
						{
							required: true,
							whitespace: true,
							message: '请输入证件类型',
							trigger: ['change','blur'],
						}
					],
					behaviorDocumentNumber: [
						{
							required: true,
							whitespace: true,
							message: '请输入证件号码',
							trigger: ['change','blur']
						}
					],
					behaviorNationality: [
						{
							required: true,
							whitespace: true,
							message: '请输入国籍',
							trigger: ['change','blur']
						}
					],
					behaviorPlace: [
						{
							required: true,
							whitespace: true,
							message: '请输入籍贯',
							trigger: ['change','blur']
						}
					],
					behaviorNation: [
						{
							required: true,
							whitespace: true,
							message: '请输入民族',
							trigger: ['change','blur'],
						}
					],
					behavionCompany: [
						{
							required: this.formData.violationType === 3 ? true : false, 
							whitespace: true,
							message: '请输入工作单位',
							trigger: ['change','blur'],
						}
					],
					behavionPhone: [
						{
							required: true,
							whitespace: true,
							message: '请输入手机号码',
							trigger: ['change','blur'],
						}
					],
					// 货代
					goodsCompany: [
						{
							required: true,
							whitespace: true,
							message: '请输入单位名称',
							trigger: ['change','blur'],
						}
					],
					goodsBusinessNumber: [
						{
							required: true, 
							whitespace: true,
							message: '请输入工商备案号',
							trigger: ['change','blur'],
						}
					],
					goodsNumber: [
						{
							required: true, 
							whitespace: true,
							message: '请输入货单号',
							trigger: ['change','blur'],
						}
					]
				}
				return rule
			}
		},
		filters: {
			// 旅客、工作人员的 查获位置的filter
			safeThingsPlaceFormat(value) {
				if(value && value.length > 0) {
					let str = '验证：'
					for(let i = 0; i < value.length; i++) {
						str += `（${ value[i].checked ? "√" : " " }）${ value[i].value }${ value[i].extra || '' } `
					}
					return str
				}
				return ''
			},
			// 旅客、工作人员的 简要情况
			briefDetailsFormat(value) {
				if(value && value.length > 0) {
					let str = briefDetailsTitle1
					const checkeds = value.filter(item => {
						return item.checked
					})
					if(checkeds && checkeds.length > 0) {
						str += checkeds.map(item => item.key).join('，')
					}
					str += briefDetailsTitle2 + '\n'
					for(let i = 0; i < value.length; i++) {
						str += `${ value[i].value }${ value[i].extra || '' }（${ value[i].checked ? "√" : " " }）\n`
					}
					return str
				}
				return ''
			},
			// 婚姻状况 1-未婚 2-已婚 3-离异 4-丧偶
			behavionMarriageFormat(value) {
				if(value === 1) {
					return '未婚'
				} else if(value === 2) {
					return '已婚'
				} else if(value === 3) {
					return '离异'
				} else if(value === 4) {
					return '丧偶'
				} else {
					return ''
				}
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
			// 微信小程序需要用此写法
			this.$refs.datePicker.setFormatter(this.formatter)
		},
		onLoad(options) {
			this.getSafeThingsAddressList()
		},
		methods: {
			formatter(type, value) {
				if(type === 'year') {
					return `${value}年`
				} else if(type === 'month') {
					return `${value}月`
				} else if(type === 'day') {
					return `${value}日`
				} else if(type === 'hour') {
					return `${value}时`
				} else if(type === 'minute') {
					return `${value}分`
				} else if(type === 'second') {
					return `${value}秒`
				}
				return value
			},
			clickShowDate(type) {
				uni.hideKeyboard()
				this.dateType = type
				this.showDate = true
			},
			dateConfirm(e) {
				this.showDate = false
				if(this.dateType === 1) {
					// 查获时间
					this.formData.queryTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
				} else if(this.dateType === 2) {
					// 出生日期
					this.formData.behavionBirth = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				}
				this.dateType = 1
			},
			showPicker(type) {
				uni.hideKeyboard()
				this.pickerShow = true
				this.pickerType = type
				if(type === 'safeThingsAddress') {
					// 查获地点
					this.$refs.mPicker.setColumnValues(0, this.safeThingsAddressList)
				} else if(type === 'behavionMarriage') {
					// 婚姻状况
					this.$refs.mPicker.setColumnValues(0, [{id: 1, label: '未婚'}, {id: 2, label: '已婚'}, {id: 3, label: '离异'}, {id: 4, label: '丧偶'}])
				} else if(type === 'behavionEducation') {
					// 学历
					this.$refs.mPicker.setColumnValues(0, ['高中及以下','中专','大专','本科','研究生'])
				}
			},
			pickerSelect(e) {
				this.pickerShow = false
				if(this.pickerType === 'safeThingsAddress') {
					// 查获地点
					this.formData[this.pickerType].safeThingsAddressId = e.value[0].id
					this.formData[this.pickerType].value = e.value[0].label
				} else if(this.pickerType === 'behavionMarriage') {
					// 婚姻状况
					this.formData[this.pickerType] = e.value[0].id
				} else if(this.pickerType === 'behavionEducation') {
					// 学历
					this.formData[this.pickerType] = e.value[0]
				}
				this.pickerType = null
			},
			menuClick(index) {
				if(this.stepIndex === 0) {
					if(index === 0) {
						// 下一步
						let viloationFields = ['queryThing', 'violationType', 'safeThingsType.safeThingsTypeId', 'thingTitle', 'queryTime', 'thingCause', 'thingResult', 'photoList']
						if(this.formData.violationType === 1 || this.formData.violationType === 3) {
							// 旅客、工作人员
							viloationFields = viloationFields.concat(['safeThingsPlace', 'briefDetails'])	// 查获位置, 简要情况
						} else if(this.formData.violationType === 2) {
							// 货代
							viloationFields = viloationFields.concat(['behaviorThingsPlaceVo', 'behaviorDescribeVo'])	// 查获位置, 简要情况
						}
						this.$refs.uForm.validateField(viloationFields, (err) => {
							if(!err || err.length === 0) {
								this.stepIndex = 1
							}
						})
					}
				} else if(this.stepIndex === 1) {
					if(index === 0) {
						// 上一步
						this.stepIndex = 0
					} else if(index === 1) {
						// 确定
						this.addSubmit()
					}
				}
			},
			// 获取查获地点列表
			getSafeThingsAddressList() {
				getSafeThingsAddressList({loadingText: '正在加载...', hasMsg: true}).then(res => {
					if(res.data && res.data.length > 0) {
						this.safeThingsAddressList = res.data.map(item => {
							return {
								id: item.safeThingsAddressId,
								label: item.safeThingsAddressName
							}
						})
					} else {
						this.safeThingsAddressList = []
					}
				}).catch(error => {
					this.safeThingsAddressList = []
				})
			},
			// 跳转到事件类型选择页面
			gotoSelectSafeThingsType() {
				const that = this
				this.$navigate.navigateToPage(this.$config.route.fillin_safeThingsType, {type: this.formData.safeThingsType ? this.formData.safeThingsType.safeThingsTypeId || '' : '' }, false, {
					changeSuccess(data) {
						if(!data || Object.keys(data).length <= 0) {
							return
						}
						that.formData.safeThingsType = {
							safeThingsTypeId: data.id,
							value: data.name
						}
					}
				})
			},
			// 跳转到 旅客、工作人员 的选择页面
			gotoSelectCheckBox(type) {
				if(!type) {
					return
				}
				const that = this
				let checkboxList = ''
				let title = ''
				let subTitle = ''
				if(type === 1) {
					// 旅客、工作人员的 查获位置
					title = '查获位置'
					subTitle = ''
					checkboxList = encodeURIComponent(JSON.stringify(this.safeThingsPlace || this.$config.datas.safeThingsPlaceJson))
				} else if(type === 2) {
					// 旅客、工作人员的 简要情况
					title = '简要情况'
					subTitle = encodeURIComponent(briefDetailsTitle1 + briefDetailsTitle2)
					checkboxList = encodeURIComponent(JSON.stringify(this.formData.briefDetails || this.$config.datas.briefDetailsJson))
				}
				this.$navigate.navigateToPage(this.$config.route.fillin_checkbox, { type, title, subTitle, checkboxList }, false, {
					changeSuccess(data) {
						if(!data || data.length <= 0) {
							return
						}
						if(type === 1) {
							// 旅客、工作人员的 查获位置
							that.formData.safeThingsPlace = data
						} else if(type === 2) {
							// 旅客、工作人员的 简要情况
							that.formData.briefDetails = data
						}
					}
				})
			},
			// 货代的选择页面
			gotoHuoDaiPage(type) {
				if(!type) {
					return
				}
				const that = this
				let obj = ''
				let pagePath = ''
				if(type === 1) {
					// 货代的 查获位置
					pagePath = this.$config.route.fillin_huodai_behaviorThingsPlaceVo
					obj = this.formData.behaviorThingsPlaceVo ? encodeURIComponent(JSON.stringify(this.formData.behaviorThingsPlaceVo)) : ''
				} else if(type === 2) {
					// 货代的 简要情况
					pagePath = this.$config.route.fillin_huodai_briefDetails
					obj = this.formData.behaviorDescribeVo ? encodeURIComponent(JSON.stringify(this.formData.behaviorDescribeVo)) : ''
				}
				this.$navigate.navigateToPage(pagePath, { obj : obj }, false, {
					changeSuccess(data) {
						if(!data || data.length <= 0) {
							return
						}
						if(type === 1) {
							// 货代的 查获位置
							that.formData.behaviorThingsPlaceVo = data
						} else if(type === 2) {
							// 货代的 简要情况
							that.formData.behaviorDescribeVo = data
						}
					}
				})
			},
			addSubmit() {
				if(this.isSubmit) {
					return
				}
				this.$refs.uForm.validate().then(async res => {
					this.isSubmit = true
					let params = {
						// 安全事件Id
						// safeThingsId: this.formData.safeThingsId,
						// 查获事件 1-I类事件 2-II类事件
						queryThing: this.formData.queryThing,
						// 违规所属 1-旅客 2-货代 3-工作人员
						violationType: this.formData.violationType,
						// 事件类型
						safeThingsTypeId: this.formData.safeThingsType.safeThingsTypeId,
						// 事件标题
						thingTitle: this.formData.thingTitle,
						// 查获时间 格式yyyy-MM-dd HH:mm
						queryTime: this.formData.queryTime,
						// 查获地点
						safeThingsAddressId: this.formData.safeThingsAddress ? this.formData.safeThingsAddress.safeThingsAddressId || null : null,
						// 航班号
						flightNumber: this.formData.flightNumber,
						// 座位号
						seatNumber: this.formData.seatNumber,
						// 受害对象
						victims: this.formData.victims,
						// 事件起因
						thingCause: this.formData.thingCause,
						// 事件后果
						thingResult: this.formData.thingResult,
						// 多张照片
						photoList: (this.formData.photoList && this.formData.photoList.length > 0) ? this.formData.photoList : null,
						// 简要经过描述
						thingsDesc: null
					}
					if(this.formData.violationType === 1 || this.formData.violationType === 3) {
						// 旅客、工作人员
						// 查获位置
						params.safeThingsPlace = this.formData.safeThingsPlace ? JSON.stringify(this.formData.safeThingsPlace) : null
						// 旅客\工作人员的 简要情况
						if(!this.formData.briefDetails) {
							// 简要详情id列表
							params.briefDetailsList = null,
							// 简要详情其他
							params.briefDetailsOther = null
						} else {
							// 简要详情id列表
							params.briefDetailsList = this.formData.briefDetails.filter(item => !item.hasOwnProperty('extra') && item.checked).map(item => item.key)
							// 简要详情其他
							const extras = this.formData.briefDetails.filter(item => item.hasOwnProperty('extra') && item.checked)
							params.briefDetailsOther = extras && extras.length > 0 ? extras[0].extra : null
						}
						
						// 单张图片
						params.behaviorPhoto = (this.formData.behaviorPhoto && this.formData.behaviorPhoto.length > 0) ? this.formData.behaviorPhoto[0] : null,
						// 姓名
						params.behaviorName = this.formData.behaviorName,
						// 性别
						params.behaviorSex = this.formData.behaviorSex,
						// 证件类型
						params.behaviorDocumentType = this.formData.behaviorDocumentType,
						// 证件号码
						params.behaviorDocumentNumber = this.formData.behaviorDocumentNumber,
						// 国籍
						params.behaviorNationality = this.formData.behaviorNationality,
						// 籍贯
						params.behaviorPlace = this.formData.behaviorPlace,
						// 民族
						params.behaviorNation = this.formData.behaviorNation,
						// 出生日期 格式yyyy-MM-dd
						params.behavionBirth = this.formData.behavionBirth,
						// 婚姻状况 1-未婚 2-已婚 3-离异 4-丧偶
						params.behavionMarriage = this.formData.behavionMarriage,
						// 学历
						params.behavionEducation = this.formData.behavionEducation,
						// 职业
						params.behavionWork = this.formData.behavionWork,
						// 工作单位
						params.behavionCompany = this.formData.behavionCompany,
						// 手机号码
						params.behavionPhone = this.formData.behavionPhone,
						// 座机号
						params.behavionLandline = this.formData.behavionLandline,
						// 地址
						params.behavionAddress = this.formData.behavionAddress
					} else if(this.formData.violationType === 2) {
						// 货代
						// 查获位置
						params.behaviorThingsPlaceVo = this.formData.behaviorThingsPlaceVo
						// 货代 简要情况
						params.behaviorDescribeVo = this.formData.behaviorDescribeVo,
						// 单位名称
						params.goodsCompany = this.formData.goodsCompany,
						// 工商备案号
						params.goodsBusinessNumber = this.formData.goodsBusinessNumber,
						// 注册地
						params.goodsRegistrationPlace = this.formData.goodsRegistrationPlace,
						// 货单号
						params.goodsNumber = this.formData.goodsNumber,
						// 法人姓名
						params.goodsLegalPerson = this.formData.goodsLegalPerson,
						// 法人证件号
						params.goodsLegalCard = this.formData.goodsLegalCard,
						// 发货人姓名
						params.goodsSendName = this.formData.goodsSendName,
						// 发货人电话
						params.goodsSendPhone = this.formData.goodsSendPhone,
						// 发货人地址
						params.goodsSendAddress = this.formData.goodsSendAddress,
						// 收货人姓名
						params.goodsDeliveryName = this.formData.goodsDeliveryName,
						// 收货人电话
						params.goodsDeliveryPhone = this.formData.goodsDeliveryPhone,
						// 收货人地址
						params.goodsDeliveryAddress = this.formData.goodsDeliveryAddress
					}
					// console.info('params-->', params)
					try {
						const result = await add(params, {loadingText: '正在提交...', hasMsg: true})
						uni.$u.toast('添加成功!')
						uni.$u.sleep(500).then(() => {
							this.$navigate.navigateBack()
						})
					} catch (e) {
						uni.$u.toast(e.msg)
					} finally {
						this.isSubmit = false
					}
				}).catch(errors => {
					// console.log('addSubmit', errors)
					// uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
</style>
<style lang="scss" scoped>
	@import "@/common/css/form.scss";
	.fillin-container {
		display: flex;
		flex-direction: column;
		.steps-layout {
			position: relative;
			height: 124rpx;
			width: 100%;
			.steps {
				width: calc(100% - 240rpx);
				padding: 20rpx 120rpx;
				background-color: #FFF;
				position: fixed;
				z-index: 999;
				border-bottom: 1px solid #F3F4F6;
			}
		}
		.prompt {
			background-color: #fff;
			padding: 32rpx 0 8rpx 32rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
			margin-top: 16rpx;
		}
		/deep/ .u-textarea {
			margin-top: 10rpx !important;
		}
	}
</style>