<template>
	<view class="container-main">
		<uni-forms :model="form" ref="uForm" :rules="rules" label-width="150rpx">
			<uni-forms-item label="主体名称" name="enterpriseName">
				<u-input v-model="form.enterpriseName" />
			</uni-forms-item>
			<uni-forms-item label="统一信用代码" name="code">
				<u-input v-model="form.code" />
			</uni-forms-item>
			<uni-forms-item label="经营性质" name="manageproperty">
				<u-input v-model="form.manageproperty" />
			</uni-forms-item>
			<uni-forms-item label="经营类型" name="manageType">
				<u-input v-model="form.manageType" />
			</uni-forms-item>
			<uni-forms-item label="投保区域范围" name="coverageArea">
				<u-input v-model="form.coverageArea" @click="show=true" placeholder="请选择区域" disabled />
			</uni-forms-item>
			<uni-forms-item label="年销售额" name="annualSales">
				<u-input v-model="form.annualSales" />
			</uni-forms-item>
			<uni-forms-item label="所选保险公司" >
				<u-input disabled v-model="form.companyName" disabled />
			</uni-forms-item>
			<uni-forms-item label="所选保险产品" >
				<u-input disabled v-model="form.productName" disabled />
			</uni-forms-item>
			<uni-forms-item label="保险期间" name="insurancePeriod">
				<view>
					<uni-datetime-picker type="date" v-model="form.effectuateTime" placeholder="开始日期" />
				</view>
				<view>-</view>
				<view>
					<uni-datetime-picker type="date" v-model="form.insurancePeriod" placeholder="结束日期" />
				</view>
			</uni-forms-item>
			<uni-forms-item label="保费合计" name="totalPremium">
				<u-input v-model="form.totalPremium" />
			</uni-forms-item>
			<uni-forms-item label="投保时间">
				<uni-datetime-picker type="date" v-model="form.insureTime" disabled />
			</uni-forms-item>
			<uni-forms-item label="投保状态" name="status">
				<u-input v-model="form.status" @click="statusFlag = true" placeholder="请选择投保状态" disabled />
			</uni-forms-item>
			<uni-forms-item label="生效时间" name="effectuateTime">
				<uni-datetime-picker type="date" v-model="form.effectuateTime" />
			</uni-forms-item>
			<uni-forms-item label="投保单附件">
				<u-upload :action="action" max-count="3" @on-success="uploadSuccess" width="160" height="170">
				</u-upload>
			</uni-forms-item>
		</uni-forms>
		<u-select v-model="show" :list="citylist" @confirm="clickConfirm" value-name="id" label-name="cityName">
		</u-select>
		<u-select v-model="statusFlag" :list="statusList" @confirm="clickStatus">
		</u-select>
		<view class="button-text" @click="submit">提交</view>
	</view>
</template>

<script>
	import moment from "@/utils/moment.min.js";
	//添加投保记录和获取城市列表
	import {
		addInsure,
		cityList
	} from "@/api/shianliaoning/insure.js";
	import config from '@/config.js'
	import {
		from
	} from "form-data";
	export default {
		components: {},
		data() {
			return {
				//投保状态
				statusFlag: false,
				statusList: [{
						label: '生效中',
						value: 1,
					},
					{
						label: '未生效',
						value: 2,
					},
					{
						label: '已过期',
						value: 3,
					}
				],
				//后端服务器地址
				action: config.baseUrl + "/common/uploadMinioonfile", // 上传的图片服务器地址
				//上传的文件数组合集
				fileList: [],
				show: false,
				form: {
					enterpriseName: '', //企业名称
					code: '', //统一信用代码
					manageproperty: '', //经营性质
					manageType: '', //经营类型
					coverageArea: '', //投保区域范围
					annualSales: '', //年销售额
					companyName: '', //所选保险公司
					productName: '', //所选保险产品
					insurancePeriod: '', //保险期间
					totalPremium: '', //保费合计
					insureTime: '', //投保时间
					status: '', //投保状态
					effectuateTime: '', // 生效时间
					//以及投保单附件
					appendix: '',
				},
				//3.10 10:30增
				//传输过来的数据
				transmit: {},
				//投保时间的显示和隐藏
				startFlag: false,
				//投保城市列表
				citylist: [],
				//校监
				rules: {
					// 必填规则
					enterpriseName: {
						rules: [{
							required: true,
							errorMessage: '主体名称不能为空',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '统一社会信用代码不能为空',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					manageproperty: {
						rules: [{
							required: true,
							errorMessage: '经营性质不能为空',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					manageType: {
						rules: [{
							required: true,
							errorMessage: '经营类型不能为空',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					coverageArea: {
						rules: [{
							required: true,
							errorMessage: '请选择投保区域范围',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					annualSales: {
						rules: [{
							required: true,
							errorMessage: '年销售额不能为空',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					insurancePeriod: {
						rules: [{
							required: true,
							errorMessage: '请选择保险期间',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					totalPremium: {
						rules: [{
							required: true,
							errorMessage: '保费合计不能为空',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					status: {
						rules: [{
							required: true,
							errorMessage: '请选择投保状态',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					effectuateTime: {
						rules: [{
							required: true,
							errorMessage: '请选择生效时间',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
				}
			};
		},
		onLoad(option) {
			this.transmit = option
			this.form.companyName = option.result
			this.form.productName = option.msg
			this.form.insureTime = new Date()
			cityList().then((res) => {
				this.citylist = res.rows
			})
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			//选择状态
			clickStatus(e) {
				this.form.status = e[0].label
			},
			//选择城市
			clickConfirm(e) {
				console.log(e);
				this.form.coverageArea = e[0].label
			},
			//上传成功
			uploadSuccess(e) {
				url = e.url.split("/");
				let url =
					url[url.length - 4] +
					"/" +
					url[url.length - 3] +
					"/" +
					url[url.length - 2] +
					"/" +
					url[url.length - 1];
				this.fileList.push(
					url
				)
			},
			//提交
			submit() {
				console.log(this.form);
				this.$refs.uForm.validate().then(msg => {
					this.form.appendix = this.fileList.toString()
					this.form.effectuateTime = new Date(this.form.effectuateTime)
					this.form.insurancePeriod = new Date(this.form.insurancePeriod)
					addInsure(this.form).then(res => {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/sub-enterprise/food-toubao/food-toubao'
							})
						}, 500)
					})
				})

			},
		},
	}
</script>

<style lang="scss" scoped>
	.container-main {
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
	}

	.button-text {
		margin: 0 auto;
		width: 508rpx;
		height: 88rpx;
		border-radius: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 400;
		background: linear-gradient(90deg, #3976f1 0%, #3ca0f6 100%);
		color: #ffffff;
		font-weight: 400;
	}
</style>
