<template>
	<!-- 信息填报 -->
	<view class="filling">
		<u-picker keyName="cateName" v-if="showTransportation" :show="showTransportation" :columns="transportation"
			@confirm="rightTransportation" @cancel="showTransportation = false" :value="form.transportation"></u-picker>
		<u-picker :show="showCatch" v-if="showCatch" :columns="columns" @confirm="rightCatch"
			@cancel="showCatch = false" v-model="form.catch"></u-picker>
		<u-datetime-picker :show="showDate" v-if="showDate" :value="form.time" mode="datetime" @confirm="rightTime"
			@cancel="showDate = false"></u-datetime-picker>
		<u--form labelPosition="top" :model="form" ref="uForm" :rules="rules">
			<u-form-item label="交通工具" labelWidth="80" prop="transportation" ref="item1">
				<u--input :disabled="isWrite" value-name="dictValue" label-name="dictLabel" placeholder="请选择交通工具"
					:readonly="true" :suffixIcon="showTransportation?'arrow-up':'arrow-down'"
					:value="form.transportationLabel"
					@click.native="isWrite ? isWrite=true : showTransportation = !showTransportation"></u--input>
			</u-form-item>
			<u-form-item label="到达车站/机场" labelWidth="120" prop="station" ref="item1">
				<u--input :disabled="isWrite" placeholder="请输入到达车站/机场" v-model="form.station"></u--input>
			</u-form-item>

			<u-form-item label="到达时间" labelWidth="80" prop="time" ref="item1">
				<u--input placeholder="请选择到达时间" labelWidth="80" :readonly="true" prefixIcon="clock"
					v-model="currentTime" @click.native="showDateTime"></u--input>
			</u-form-item>

			<!-- <u-form-item label="是否接站" labelWidth="80" prop="catch" ref="item1">
				<u--input :disabled="isWrite" placeholder="请选择是否接站" labelWidth="80" :readonly="true"
					:suffixIcon="showCatch?'arrow-up':'arrow-down'" v-model="form.catch"
					@click.native="isWrite ? isWrite=true : showCatch = !showCatch"></u--input>
			</u-form-item> -->
			<u-button class="submit-btn" :disabled="isWrite" text="完成" type="primary" @click="submit"></u-button>
		</u--form>

		<u-toast ref="uToast" @show="submit"></u-toast>
		<FloatBall />
	</view>
</template>

<script>
	import {
		getOwnArrInfo,
		addOwnArrInfo,
		getVehicle
	} from "@/api/arrivalinfoApi.js";
	import {
		isEmpty
	} from "@/api/helpFunc.js";
	import FloatBall from "@/pages/compoents/FloatBall.vue";
	import moment from "moment"
	import "moment/locale/zh-cn"
	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				isWrite: false,

				// 选择时间显示
				showDate: false,
				// 选择接站显示or隐藏
				showCatch: false,
				// 选择交通工具
				showTransportation: false,
				form: {
					transportation: "",
					station: "",
					time: Number(new Date()),
					catch: "",
					id:''
				},
				currentTime: '',
				columns: [
					[
						"是",
						"否"
					]
				],
				transportation: [],
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					transportation: {
						type: 'string',
						required: true,
						message: '请选择交通工具',
						trigger: ['blur', 'change']
					},
					station: {
						type: 'string',
						required: true,
						message: '请输入到达的站点',
						trigger: ['blur', 'change']
					},
					catch: {
						type: 'string',
						required: true,
						message: '请选择是否要接站',
						trigger: ['blur', 'change']
					},
					time: {
						type: 'any',
						required: true,
						message: '请选择到站时间',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		methods: {
			async getWrite() {
				let res = await getOwnArrInfo();
				if (res.code == 200) {
					let data = res.data;
					let temp = this.transportation[0].find((x) => {
						if (parseInt(x.id) == data.toolsType) {
							return x;
						}
					});
					this.form.transportationLabel = temp.cateName;
					this.form.transportation = temp.id;
					this.form.id=data.id;
					this.form.station = data.atStation;
					let time = moment(data.atDatetime).valueOf();

					this.currentTime = data.atDatetime;
					this.form.time = time;
					this.form.catch = data.isNeedPick == 1 ? "是" : "否";
					// this.isWrite = true;
				}
			},
			async getTrans() {
				let res = await getVehicle();
				if (res.code == 200) {
					let temp2 = [];
					res.data.map(x => {
						temp2.push({
							cateName: x.dictLabel,
							id: x.dictValue
						});
					});
					this.transportation.push([...temp2]);
				}
			},


			// 选择的时间
			rightTime(value) {
				this.currentTime = moment(value.value).format('YYYY年MM月DD日 HH:mm')
				this.form.time = value.value
				this.showDate = false
			},
			// 显示选择时间的selected
			showDateTime() {
				if (this.isWrite) return
				this.showDate = !this.showDate
			},
			// 确认是否接站
			rightCatch(Array) {
				this.form.catch = Array.value[0]
				this.showCatch = false
			},
			// 选择出行的方式
			rightTransportation(Array) {
				this.form.transportationLabel = Array.value[0].cateName;
				this.form.transportation = Array.value[0].id;
				this.showTransportation = false
			},
			// 提交表单
			submit() {
				if (this.form.station.length > 20) {
					this.$refs.uToast.show({
						type: "error",
						message: "到站不能超过30个字",
						duration: 1500,
					});
					return;
				}
				this.$refs.uForm.validate().then(res => {
					this.$refs.uToast.show({
						type: "loading",
						loading: true,
						message: "保存中",
						duration: 600,
						complete: () => {
							let sdata = {};
							let temp = {
								...this.form
							};
							sdata.id=temp.id
							sdata.toolsType = temp.transportation;
							sdata.atStation = temp.station;
							sdata.atDatetime = temp.time;
							sdata.isNeedPick = temp.catch == "是" ? 1 : 0;
							addOwnArrInfo(sdata).then(res => {
								console.log(res);
								if (res.code == 200) {
									uni.$u.toast('保存成功');
									// this.isWrite = true;
									this.getWrite();
									uni.redirectTo({
										url: "/pages/newindex/newindex"
									});
								}
							})
						}
					})

					uni.setStorageSync("regin", this.form)
				}).catch(errors => {
					uni.$u.toast('请填写完整信息')
				})
			}
		},
		created() {

			this.getTrans();
			this.getWrite();
			if (!uni.getStorageSync("regin"))
				return ""
			this.form = uni.getStorageSync("regin")
			this.currentTime = moment(this.form.time).format('YYYY年MM月DD日 HH:mm')
		}
	}
</script>

<style lang="less" scoped>
	.filling {
		padding: 50rpx;
		// height: 90vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.u-form-item {
			/deep/ .u-form-item__body__left {
				margin-bottom: 10px !important;
			}
		}

		.submit-btn {
			margin-top: 100rpx;
		}
	}

	.u-input {
		background-color: white;
	}
</style>