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

const form = ref({data:formatDate(new Date()),list:[{}]} as any)
const show = ref(false)
const onSubmit = () =>{

}

const onClickLeft = () =>{
  uni.navigateBack()
}
const onClickRight=()=>{
}
const chooseDate = ()=>{
  show.value=true
}
const onConfirmDate = (val:any) =>{
  form.value.data = formatDate(val)
  show.value = false
}
</script>

<template>
<view class="flex">
  <van-nav-bar
    title="白胚列表"
    left-text="返回"
    left-arrow
    right-text="出入库记录"
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
  <van-form @submit="onSubmit">
    <van-cell-group inset style="display: flex;">
      <van-field
        v-model="form.data"
        name="开始时间"
        label="开始时间"
        colon
        class="bor"
        label-width="5em"
        readonly
        @click="chooseDate()"
        :rules="[{ required: true, message: '请填写' }]"
      />
	  <van-field
	    v-model="form.data"
	    name="截止时间"
	    label="截止时间"
	    colon
	    class="bor"
	    label-width="5em"
	    readonly
	    @click="chooseDate()"
	  />
   </van-cell-group>
   <van-cell-group inset style="display: flex;">
      <van-field
        v-model="form.data"
        name="面料名称"
        label="面料名称"
        colon
        class="bor"
        label-width="5em"
        readonly
      />
   	  <van-field
   	    v-model="form.data"
   	    name="面料编号"
   	    label="面料编号"
   	    colon
   	    class="bor"
   	    label-width="5em"
   	    readonly
   	  />
   </van-cell-group>
   <van-cell-group inset style="display: flex;">
      <van-field
        v-model="form.data"
        name="面料米数"
        label="面料米数"
        colon
        class="bor"
        label-width="5em"
        readonly
      />
   	  <van-field
   	    v-model="form.data"
   	    name="面料位置"
   	    label="面料位置"
   	    colon
   	    class="bor"
   	    label-width="5em"
   	    readonly
   	  />
   </van-cell-group>
  <view class="content">
  </view>
  </van-form>
  <view class="floot"> 
  </view>
</view>
  <van-calendar v-model:show="show" @confirm="onConfirmDate" :min-date="new Date(2010, 0, 1)" :max-date="new Date(2050, 0, 31)"/>
</template>

<style scoped lang="scss">
.flex{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  .van-nav-bar{
    width: 100%;
  }
  .content{
    flex: 1;
    .grid-container {
      display: grid;
      grid-template-columns: 2fr 2fr 1fr;
      .grid-item{
        border: 1px solid #f2f2f2;
        text-align: center;
       
      }
    }
  }
}
 ::v-deep .van-cell {
   padding: 5px!important;
}
::v-deep .van-field {
  font-size: 16px;
}
.bor{
  ::v-deep .van-field__control {
    border: 1px solid #d7d7d7;
    text-align: center;
  }
  ::v-deep .van-field__label{
	  margin: 0;
  }
}
::v-deep .van-button--normal{
  padding: 5px 8px;
  height: 30px;
}
</style>
