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

const list = ref([{list:[{}]}] as any[])

const onClickLeft = () =>{
  router.go(-1);
}
const onClickRight=()=>{
  list.value.push([])
}
</script>

<template>
  <view class="flex">
    <van-nav-bar
      title="色胚质检项维护"
      left-text="返回"
      left-arrow
      right-text="新增"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <view class="content">
      <view class="card" v-for="(item,index) in list" :key="index">
        <van-cell-group inset>
          <view class="a-b">
            <van-icon name="clear" color="red" size="25" @click="list.splice(index,1)"/>
            <van-field
              v-model="item.name"
              name="质检项名称"
              label="质检项名称"
              colon
              class="a-c"
              label-width="6em"
              :rules="[{ required: true, message: '请填写' }]"
            />
            <van-button type="primary">新增选项</van-button>
          </view>
          <van-field name="是否必填" label="是否必填" colon label-width="7.5em">
            <template #input>
              <van-radio-group v-model="item.type1" direction="horizontal">
                <van-radio name="1">是</van-radio>
                <van-radio name="2">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-cell-group>
        <view class="grid-container">
          <view class="grid-item"></view>
          <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">{{itemSecond.name}}</view>
          <view class="grid-item" style="display: flex;align-items: center;justify-content: center">
            <van-checkbox-group v-model="itemSecond.checked">
              <van-checkbox name="1"></van-checkbox>
            </van-checkbox-group></view>
          <view class="grid-item" style="color: red">删除</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.flex{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  .van-nav-bar{
    width: 100%;
  }
  .content{
    flex: 1;
    padding: 0 10px;
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 2fr 1.5fr 1.5fr;
      .grid-item{
        border: 1px solid #f2f2f2;
        text-align: center;
        ::v-deep(.van-cell){
          padding: 0 5px;
        }
      }
    }
    .card{
      margin: 8px 10px;
      padding: 5px;
      border: 1px solid #02a7f0;
      border-radius: 10px;
    }
    .a-b{
      display: flex;
      align-items: center;
      ::v-deep(.van-button--normal){
        padding: 5px;
        height: 30px;
        width: 7em;
      }
    }
  }
  ::v-deep(.van-field){
    font-size: 16px;
    padding: 0;
  }
  ::v-deep(.van-cell-group--inset){
    margin: 0;
  }
  .a-c{
    ::v-deep(.van-field__control){
      border-bottom: 1px solid #d7d7d7;
    }
  }

  ::v-deep(.van-field__label){
    text-align: end;
  }
}
</style>