<template>
	<view>
		<form class="padding-lr cu-form-group flex-direction">
			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>出发时间</view>
				<date-selector @change="getStartData" />
			</view>
			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>抵达时间</view>
				<date-selector @change="getEndData" />
			</view>
			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>行程类型</view>
				<radio-group class="block" @change="TypeChange">
					<view class="flex">
						<view class="flex-sub margin-tb-sm" v-for="(journey,index) in journeys" :key="index">
							<label class="flex justify-between align-center">
								<radio class="round margin-right-xs" :checked="index === journeyType" :value="journey.value"></radio>
								<text class="flex-sub" style="font-size: 34rpx;">{{ journey.name }}</text>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="cu-form-group flex flex-direction padding-top">
				<view class="text-xl padding-tb-sm">出行交通方式（必选）</view>
				<radio-group class="block" @change="RadioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(transport,index) in transports" :key="index">
							<label class="flex justify-between align-center">
								<radio class="round margin-right-xs" :checked="index === tripMode" :value="transport.value"></radio>
								<view class="flex-sub" style="font-size: 34rpx;">{{ transport.name }}</view>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>乘坐航班车次或车牌号码及座位号（没有填无）</view>
				<input placeholder="请输入" name="input" type="text" v-model="carNo" />
			</view>
			<view class="cu-form-group flex flex-direction padding-tb">
				<view class="title padding-bottom-sm">同行人</view>
				<input placeholder="请输入同行人" name="input" type="text" v-model="together" />
			</view>
		</form>
		<view class="margin flex flex-wrap">
			<view @click="agree = !agree" class="iconfont agree-box" :class="[agree ? 'text-blue icon-check-square': 'text-gray icon-border']"></view>
			<view class="text-df text-black flex-sub agree-text">
				以上信息是我本人填写，本人对信息的真实性和完整性负责。
			</view>
		</view>
		<button class="bg-cyan margin primary-btn" hover-class="cc-active" @tap="handleAddStroke">确认提交</button>
		<!-- 历史 -->
		<button class="shadow round bg-cyan history-btn iconfont icon-history" hover-class="cc-active" @tap="openPage('/pages/my-trips/my-trips')"></button>
  </view>
</template>

<script>
import { showToast } from 'common/script/util';
import UniCalendar from 'components/uni-calendar/uni-calendar.vue';
import DateSelector from './components/date-selector.vue';
import { SUBMIT_JOURNEYS } from 'api/api';

export default {
	components: {UniCalendar,DateSelector},
	data() {
		return {
			startTime: this.$moment().format('YYYY-MM-DD'),
			endTime: this.$moment().format('YYYY-MM-DD'),
			transports: [
				{
					value: '0',
					name: '铁路',
				},
				{
					value: '1',
					name: '飞机',
				},
				{
					value: '2',
					name: '客运车辆',
				},
				{
					value: '3',
					name: '自驾',
				},
				{
					value: '4',
					name: '船',
				},
				{
					value: '5',
					name: '其他',
				}
			],
			carNo: '',
			journeys: [
				{
					value: '0',
					name: '返校行程',
				},
				{
					value: '1',
					name: '日常外出',
				}
			],
			together: '',
			tripMode: 0,
			journeyType: 0,
			agree: false
		};
	},
	methods: {
		RadioChange: function(evt) {
			for (let i = 0; i < this.transports.length; i++) {
				if (this.transports[i].value === evt.target.value) {
					this.tripMode = i;
					break;
				}
			}
		},
		
		TypeChange: function(evt) {
			for (let i = 0; i < this.journeys.length; i++) {
				if (this.journeys[i].value === evt.target.value) {
					this.journeyType = i;
					break;
				}
			}
		},
	
		/**
		 * 获取出发时间
		 * @param {string} start 开始时间
		 * @param {string} end 截止时间
		 */
		getStartData(start) {
		  console.log('出发时间 start: ', start);
		  this.startTime = start;
		},
		
		/**
		 * 获取抵达时间
		 * @param {string} start 开始时间
		 * @param {string} end 截止时间
		 */
		getEndData(end) {
		  console.log('抵达时间 end: ', end);
		  this.endTime = end;
		},
		
		/**
		 * 添加行程
		*/
		async handleAddStroke() {
			try {
				if (!this.checkRules()) return;
				const {
					carNo,
					endTime,
					journeyType,
					startTime,
					together,
					tripMode
				} = this;
				const params = {
					param: {
						carNo,
						endTime: +this.$moment(endTime).format('x'),
						journeyType: journeyType+1,
						startTime: +this.$moment(startTime).format('x'),
						together,
						tripMode
					}
				};
				console.log('params2',params)
				const res = await this.$http.post(SUBMIT_JOURNEYS, params);
				const {
					success,
					code,
					msg,
					data
				} = res.data;
				if (success && code === 200) {
					this.success = true;
					uni.reLaunch({
						url: `/pages/index/index`,
					});
				} else {
					uni.showToast({
						title: msg || '行程添加成功',
						icon: 'none'
					});
				}
			} catch (error) {
				console.log('error: ', error);
				if (error.msg) {
					uni.showToast({
						title: error.msg || '行程添加失败',
						icon: 'none'
					});
				}
			}
		},
		
		// 验证信息
		checkRules() {
		  const { startTime,endTime,journeyType,tripMode,carNo,agree } = this;
		  if (!this.startTime) {
		    showToast('请选择出发时间');
		    return;
		  }
		  if (!this.endTime) {
		    showToast('请选择抵达时间');
		    return;
		  }
		  if (this.journeyType<0) {
		    showToast('请选择行程类型');
		    return;
		  }
		  if (this.tripMode<0) {
		    showToast('请选择出行交通方式');
		    return;
		  }
		  if (!this.carNo) {
		    showToast('乘坐航班车次或车牌号码及座位号');
		    return;
		  }
		  if (!this.agree) {
		  	showToast('请确定是否为本人填写');
		  	return;
		  }
		  return true;
		},
	},
};
</script>

<style lang="scss" scoped>
	.agree-box{
		width: 70rpx;
	}
	.agree-text{
		line-height: 60rpx;
	}
	.primary-btn{
		border-radius: 15rpx;
	}
	.history-btn{
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 96rpx;
		height: 96rpx;
		line-height: 96rpx;
		padding: 0;
	}
	.history-btn::after{
		border: none;
	}
</style>