<template>
	<view class="">
	
		<u-form :model="form" ref="uForm" label-width="230">
			<u-form-item label="车牌号码">
				<u-input placeholder="车牌号码" v-model="form.name" type="text"></u-input>
			</u-form-item>
			<u-form-item label="车辆类型">
				<u-input type="select" :select-open="selectShow" v-model="form.goodsType" placeholder="请选择商品类型"
					@click="selectShow = true"></u-input>
				<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm">
				</u-select>
			</u-form-item>
			<u-form-item label="车辆注册日期">
				<u-input v-model="form.time" type="select" placeholder="车辆注册日期" @click="show=true"></u-input>
			</u-form-item>
			<u-form-item label="检验有效期至">
				<u-input v-model="form.sex" type="select" placeholder="检验有效期至" @click="show1=true"></u-input>
			</u-form-item>
			<u-form-item label="座位数">
				<u-input type="select" :select-open="selectShow1" v-model="form.goodsType" placeholder="座位数"
					@click="selectShow1 = true"></u-input>
				<u-select mode="single-column" :list="selectList1" v-model="selectShow1" @confirm="selectConfirm1">
				</u-select>
			</u-form-item>
			<u-form-item label="车辆使用性质">
				<u-input type="select" :select-open="selectShow2" v-model="form.goodsType" placeholder="车辆使用性质"
					@click="selectShow2 = true"></u-input>
				<u-select mode="single-column" :list="selectList2" v-model="selectShow2" @confirm="selectConfirm2">
				</u-select>
			</u-form-item>
			<u-form-item label="车辆所有">
				<u-input type="select" :select-open="selectShow3" v-model="form.goodsType" placeholder="车辆所有"
					@click="selectShow3 = true"></u-input>
				<u-select mode="single-column" :list="selectList3" v-model="selectShow3" @confirm="selectConfirm1">
				</u-select>
			</u-form-item>
			<u-form-item label="未造成伤亡事故">
				<u-switch slot="right" v-model="switchVal"></u-switch>
			</u-form-item>
		</u-form>
		<u-picker v-model="show" mode="time" @confirm="confirm"></u-picker>
		<u-picker v-model="show1" mode="time" @confirm="confirm1"></u-picker>
		<u-button type="primary" style="border-radius: 50px;font-weight: bold;margin-top: 40rpx;">确认</u-button>
		<view class="shanchu" @click="editshow=true">
			<text>删除</text>
		</view>
		<u-popup v-model="editshow" mode="center" border-radius="14">
			<view class="shu" style="padding: 40rpx;box-sizing: border-box;">
				<text style="font-weight: bold;">你确定要删除此车辆吗？</text>
				<view class="heng">
					<view></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					intro: '',
					sex: '',
					goodsType: "",
					time: "",
				},
				show: false, //注册日期
				show1: false, //检验有效期
				switchVal: false, //开关
				selectShow: false, //车辆类型
				selectShow1: false, //座位数
				selectShow2: false, //性质
				selectShow3: false, //所有
				editshow: false, //删除
				selectList: [{
						value: '小型轿车',
						label: '小型轿车'
					},
					{
						value: '小型普通客车',
						label: '小型普通客车'
					},
					{
						value: '小型越野客车',
						label: '小型越野客车'
					},
					{
						value: '小型专用客车',
						label: '小型专用客车'
					},
					{
						value: '微型轿车',
						label: '微型轿车'
					},
					{
						value: '微型普通客车',
						label: '微型普通客车'
					},
					{
						value: '微型越野客车',
						label: '微型越野客车'
					},
					{
						value: '中型轿车',
						label: '中型轿车'
					},
					{
						value: '大型轿车',
						label: '大型轿车'
					},
					{
						value: '中型普通客车',
						label: '中型普通客车'
					},
					{
						value: '中型越野客车',
						label: '中型越野客车'
					},
					{
						value: '中型专用客车',
						label: '中型专用客车'
					},
					{
						value: '乘用车及客车',
						label: '乘用车及客车'
					},
					{
						value: '其他',
						label: '其他'

					},

				],
				selectList1: [{
						value: '4座',
						label: '4座'
					},
					{
						value: '5座',
						label: '5座'
					},
					{
						value: '6座',
						label: '6座'
					},
					{
						value: '7座',
						label: '7座'
					},
					{
						value: '8座',
						label: '8座'
					},
					{
						value: '9座',
						label: '9座'
					},
					{
						value: '9座以上',
						label: '9座以上'
					},
				],
				selectList2: [{
						value: '非营运车',
						label: '非营运车'
					},
					{
						value: '营运车',
						label: '营运车'
					},

				],
				selectList3: [{
						value: '公司车',
						label: '公司车'
					},
					{
						value: '私家车',
						label: '私家车'
					},

				]

			}
		},
		onLoad() {

		},
		methods: {
			selectConfirm(e) {
				console.log(e)
				this.form.goodsType = e[0].value;
			},
			selectConfirm1(e) {
				console.log(e)
				this.form.goodsType = e[0].value;
			},
			//注册日期
			confirm(e) {
				console.log(e);
				this.form.time = e.year + "-" + e.month + "-" + e.day;
			},
			//检验有效期
			confirm1(e) {
				console.log(e);
				this.form.time = e.year + "-" + e.month + "-" + e.day;
			},
			upload() {
				uni.chooseImage({
					count: 1,
					sizeType: "compressed",
					success(res) {}
				});
			}
		}
	}
</script>

<style>
	.headers {
		width: 100%;
		height: auto;
		text-align: right;
	}

	page {
		padding: 36rpx;
		box-sizing: border-box;
	}

	.shanchu {
		width: 100%;
		text-align: center;
		color: #999;
		cursor: pointer;
	}
</style>
