<script setup lang="ts">
	import { onMounted, ref } from 'vue';
import { formatDate } from '../../utils/date';

	const form=ref({ybrq:formatDate(new Date())} as any)
	const showPicker = ref(false)
	const show = ref(false)
	const popuList = ref([] as any[])
	
	onMounted(()=>{
		const info = JSON.parse(localStorage.getItem('info')) 
		form.value.jyy=info.userName
	})
	
	const chooseDate = () => {
		show.value = true
	}
	const onConfirmDate = (val : any) => {
		form.value.ybrq = formatDate(val)
		show.value = false
	}
	//选择框事件
	const choosePic = (type : any, index : any) => {
		showPicker.value = true
	}
	//选择框确认
	const pickerConfirm = (val : any) => {
	
		showPickerCancel()
	}
	//取消
	const showPickerCancel = () => {
		showPicker.value = false
	}
	//弹窗开启事件
	const handleOpen = () => {
		
	}
	const onClickLeft = () => {
		history.back()
	}
</script>

<template>
	<view class="flex">
		<van-nav-bar title="色胚质检" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="content">
			<van-cell-group inset>
				<van-field class="bor" label="验布日期" label-width="5em" colon v-model="form.ybrq" readonly :rules="[{ required: true, message: '请填写' }]" @click="chooseDate()" />
				<van-field label="检验员" label-width="5em" colon v-model="form.jyy" readonly/>
				<van-field label="面料名称" label-width="5em" colon v-model="form.ybrq" readonly/>
				<van-field label="面料颜色" label-width="5em" colon v-model="form.ybrq" readonly/>
				<van-field label="工厂" label-width="5em" colon v-model="form.ybrq" readonly/>
				<van-field label="工艺" label-width="5em" colon v-model="form.ybrq" readonly/>
				<van-field label="工艺要求" label-width="5em" colon v-model="form.ybrq" readonly/>
				<van-field class="bor" label="纸管" label-width="5em" colon v-model="form.ybrq" readonly :rules="[{ required: true, message: '请填写' }]" @click="choosePic()" />
				<van-field class="line" label="姆米" label-width="5em" colon v-model="form.mm" type="number" :rules="[{ required: true, message: '请填写' }]" />
				<van-field class="line" label="门幅" label-width="5em" colon v-model="form.mf" type="number" :rules="[{ required: true, message: '请填写' }]" />
			</van-cell-group>
		</view>
	</view>
	<van-calendar v-model:show="show" @confirm="onConfirmDate" :min-date="new Date(2010, 0, 1)"
		:max-date="new Date(2050, 0, 31)" />
	
	<!--选择框-->
	<van-popup v-model:show="showPicker" round position="bottom" @open="handleOpen">
		<van-picker show-toolbar :columns="popuList" @confirm="pickerConfirm" @cancel="showPickerCancel"
			v-model="selectValue" ref="pickerRef" />
	</van-popup>
</template>

<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;

		.van-nav-bar {
			width: 100%;
		}

		.content {
			flex: 1;
			padding: 0 20rpx;
		}
		::v-deep .van-field {
			font-size: 16px;
		}
		::v-deep .van-field__label{
			display: flex;
			justify-content: space-between;
		}
		::v-deep .van-button--normal {
			padding: 5px 8px;
			height: 30px;
		}
		::v-deep .van-field__control {
			text-align: center;
			font-size: 16px;
		}
		.bor {
			::v-deep .van-field__control {
				border: 1px solid #d7d7d7;
			}
		}
		.line{
			::v-deep .van-field__control {
				border-bottom: 1px solid #d7d7d7;
			}
		}
	}
</style>