<script lang="ts" setup>

import { ref } from 'vue'

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

const onClickLeft = () =>{
  history.back()
}
const onClickRight=()=>{
  showPop.value=true
}
const addLittle = (item:any) =>{
  console.log(item)
  showPop.value=true
}
const submit =()=>{

}
</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">
        <view
          style="display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #d7d7d7;padding: 5px">
          <p>染色后做缩</p>
          <p style="display: flex;align-items: center"> <van-icon name="add" color="red" size="25"
                                                                  @click="addLittle(item)"/> 新增</p>
        </view>
        <view class="grid-container">
          <view class="grid-item" v-for="(itemSecond,indexSecond) in item.list" :key="indexSecond">
            缩率<2%
            <van-icon name="clear" color="red" size="25" @click="list.splice(indexSecond,1)"/>
          </view>
        </view>
      </view>
    </view>
  </view>

  <van-popup v-model:show="showPop" style="width: 80%" round>
    <view>
      <h3 style="text-align: center">新增</h3>
      <van-cell-group inset>
        <van-field
          v-model="form.name"
          name="大类"
          label="大类"
          colon
          label-width="4em"
          :rules="[{ required: true, message: '请填写' }]"
        />
        <view v-for="(item,index) in form.list" :key="index" class="a-b">
          <van-icon name="add" color="red" size="25" v-if="index===0" @click="form.list.push({})"/>
          <van-icon name="clear" color="red" size="25" v-if="index!=0" @click="form.list.splice(index,1)"/>
          <van-field
            v-model="item.type"
            name="小类"
            label="小类"
            colon
            label-width="2.5em"
            :rules="[{ required: true, message: '请填写' }]"
          />
        </view>
      </van-cell-group>
      <view class="a-c">
        <van-button type="danger" @click="showPop=false">取消</van-button>
        <van-button type="primary" @click="submit">确认</van-button>
      </view>
    </view>
  </van-popup>
</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 20rpx;
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      .grid-item{
        text-align: center;
      }
    }
    .card{
      margin: 20rpx 30rpx;
      padding: 10rpx;
      border: 1rpx solid #02a7f0;
      border-radius: 20rpx;
    }
  }
}
.a-b{
  display:flex;
  align-items: center;
}
::v-deep .van-field{
  font-size: 16px;
}
::v-deep .van-field__body {
	border-bottom: 1rpx solid #d7d7d7!important;
}
::v-deep .van-field__label{
  text-align: end!important;
}
.a-c{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin:30rpx;
  ::v-deep .van-button--normal{
      padding: 10rpx!important;
      height: 60rpx!important;
    }
}
</style>
