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

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

}

const onClickLeft = () =>{
  router.go(-1);
}
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>
      <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.gys"
        name="供应商名"
        label="供应商名"
        colon
        class="bor"
        label-width="5em"
        readonly
        :rules="[{ required: true, message: '请填写' }]"
      />
      <van-field
        v-model="form.mlmc"
        name="面料名称"
        label="面料名称"
        colon
        class="bor"
        label-width="5em"
        readonly
        :rules="[{ required: true, message: '请填写' }]"
      />
      <view class="content">
        <template v-for="(item,index) in form.list" :key="index">
          <van-field
            v-model="item.bpdj"
            name="白胚等级"
            label="白胚等级"
            colon
            class="bor"
            label-width="5em"
            readonly
            :rules="[{ required: true, message: '请填写' }]"
          >
            <template #button>
              <van-icon name="add" color="red" size="25" @click="form.list.push([])" v-if="index===0"/>
              <van-icon name="clear" color="red" size="25" @click="form.list.splice(index,1)" v-else/>
            </template>
          </van-field>
          <view class="grid-container">
            <view class="grid-item">面料编号</view>
            <view class="grid-item">米数</view>
            <view class="grid-item">操作</view>
          </view>
          <view class="grid-container" v-for="(itemSecond,indexSecond) in item.list" :key="indexSecond">
            <view class="grid-item">面料编号</view>
            <view class="grid-item">米数</view>
            <view class="grid-item">操作</view>
          </view>
          <view class="grid-container">
            <view class="grid-item">
              <van-button type="primary">扫一扫</van-button>
            </view>
            <view class="grid-item"></view>
            <view class="grid-item"></view>
          </view>
        </template>
      </view>

    </van-cell-group>
    <view style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </view>
  </van-form>
</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: 0 5px;
        }
      }
    }
  }
}

::v-deep(.van-field){
  font-size: 16px;
}
.bor{
  ::v-deep(.van-field__control){
    border: 1px solid #d7d7d7;
    text-align: center;
  }
}
::v-deep(.van-button--normal){
  padding: 5px 8px;
  height: 30px;
}
</style>
