<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 edit = (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="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="(item,index) in list" :key="index">
        <view class="grid-item">{{item.name}}</view>
        <view class="grid-item">{{item.id}}</view>
        <view class="grid-item">{{item.id}}</view>
        <view
          class="grid-item"><span style="color: #35a5f7" @click="edit(item)">编辑</span>  &nbsp;&nbsp; <span
          style="color: red">删除
        </span></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
          class="bot"
          label-width="6em"
          :rules="[{ required: true, message: '请填写' }]"
        />
        <van-field name="状态" label="状态" colon label-width="6em">
          <template #input>
            <van-radio-group v-model="form.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="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 10px;
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 3fr 1.5fr 2fr;
      .grid-item{
        border: 1px solid #f2f2f2;
        text-align: center;
        ::v-deep(.van-cell){
          padding: 0 5px;
        }
      }
    }
    .card{
      margin: 10px 15px;
      padding: 5px;
      border: 1px solid #02a7f0;
      border-radius: 10px;
    }
  }
}
.a-b{
  display:flex;
  margin-bottom:10px;
  ::v-deep(.van-cell){
    padding: 0;
  }
}
::v-deep(.van-field){
  font-size: 16px;
}
.bot{
  ::v-deep(.van-field__control){
    border-bottom: 1px solid #d7d7d7;
  }
}
::v-deep(.van-field__label){
  text-align: end;
}
.a-c{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin:15px;
  ::v-deep(.van-button--normal){
    padding: 5px;
    height: 30px;
  }
}
</style>
