<template>
  <div class="content">
    <el-tabs
      v-model="editableTabsValue"
      editable
      class="demo-tabs"
      @edit="handleTabsEdit"
      type="border-card"
      tab-position="left"
      :stretch="false"
    >
      <el-tab-pane
        v-for="item in subList"
        :key="item.name"
        :label="item.sequenceCode"
        :name="item.name"
        >
        <el-form :model="item" label-width="auto" :rules="qualityBatchRules" ref="qualityBatchFormRef">
          <el-row :gutter="20">
            <!-- <el-col :span="12">
              <el-form-item label="质量通知单号" prop="qualityNoticeNumber">
                <el-input v-model="item.qualityNoticeNumber" placeholder="请输入质量通知单号" />
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="顺序号" prop="sequenceCode">
                <el-input v-model="item.sequenceCode" placeholder="请输入顺序号" type="number" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物料代码" prop="itemCode">
                <el-input v-model="item.itemCode" placeholder="请输入物料代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="批次" prop="batch">
                <el-input v-model="item.batch" placeholder="请输入批次" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检验批次" prop="inspectionBatch">
                <el-input v-model="item.inspectionBatch" placeholder="请输入检验批次" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物料描述" prop="itemDesc">
                <el-input v-model="item.itemDesc" placeholder="请输入物料描述" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总数量" prop="totalAmount">
                <el-input v-model="item.totalAmount" placeholder="请输入总数量" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计量单位" prop="uom">
                <el-input v-model="item.uom" placeholder="请输入计量单位" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="title-btn">
          <div class="title">质量通知包装</div>
          <el-button type="primary" plain  @click="handleAdd('package',item)">添加包装</el-button>
        </div>
        <el-table :data="item.packageList" style="width: 100%" border>
          <!-- <el-table-column prop="qualityNoticeNumber" label="质量通知单号" align="center"/>-->
          <el-table-column label="" width="60" align="center">
            <template #default="scope">
              <Icon icon="ep:remove" @click="det(scope.$index,item.packageList)" size='24' style="cursor: pointer;"/>
            </template>
          </el-table-column>
          <el-table-column prop="packageCode" label="包装编码"  align="center"/> 
          <el-table-column prop="sequenceCode" label="顺序号" align="center" type="number"/>
          <el-table-column prop="amount" label="数量"  align="center" type="number"/>
          <el-table-column prop="uom" label="计量单位"  align="center"/>
          <el-table-column prop="packUnit" label="包装规格"  align="center"/>
        </el-table>
        <div class="title-btn">
          <div class="title">质量通知任务</div>
          <el-button type="primary" plain  @click="handleAdd('task',item)">添加任务</el-button>
        </div>
        <el-table :data="item.taskList" style="width: 100%" border>
          <!-- <el-table-column prop="qualityNoticeNumber" label="质量通知单号" align="center" width="150"/>
          <el-table-column prop="code" label="编码"  align="center" width="150"/> -->
          <el-table-column label="" width="60" align="center">
            <template #default="scope">
              <Icon icon="ep:remove" @click="det(scope.$index,item.taskList)" size='24' style="cursor: pointer;"/>
            </template>
          </el-table-column>
          <el-table-column prop="sequenceCode" label="顺序号" align="center" width="150" type="number"/>
          <el-table-column prop="status" label="状态"  align="center" width="150"/>
          <el-table-column prop="type" label="类型"  align="center" width="150"/>
          <el-table-column prop="taskGroupCode" label="任务代码组"  align="center" width="150"/>
          <el-table-column prop="taskCode" label="任务代码"  align="center" width="150"/>
          <el-table-column prop="taskDesc" label="任务描述"  align="center" width="150"/>
          <el-table-column prop="taskDetail" label="任务详情"  align="center" width="150"/>
          <el-table-column prop="leaderType" label="负责人类型"  align="center" width="150"/>
          <el-table-column prop="leader" label="负责人"  align="center"/>
          <el-table-column prop="planStartTime" label="计划开始时间"  align="center" width="150"/>
          <el-table-column prop="planEndTime" label="计划结束时间"  align="center" width="150"/>
          <el-table-column prop="finishTime" label="完成时间"  align="center" width="150"/>
          <el-table-column prop="finishNumber" label="完成单据号"  align="center" width="150"/>
        </el-table>
        <div class="title-btn">
          <div class="title">质量通知缺陷</div>
          <el-button type="primary" plain  @click="handleAdd('defect',item)">添加缺陷</el-button>
        </div>
        <el-table :data="item.defectList" style="width: 100%" border>
          <el-table-column label="" width="60" align="center">
            <template #default="scope">
              <Icon icon="ep:remove" @click="det(scope.$index,item.defectList)" size='24' style="cursor: pointer;"/>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="qualityNoticeNumber" label="质量通知单号" align="center" width="150"/> -->
          <el-table-column prop="sequenceCode" label="顺序号" align="center" width="150" type="number"/>
          <el-table-column prop="defectLocationCodeGroup" label="缺陷位置代码组"  align="center" width="150"/>
          <el-table-column prop="defectLocationCode" label="缺陷位置代码"  align="center" width="150"/>
          <el-table-column prop="defectTypeCodeGroup" label="缺陷类型代码组"  align="center" width="150"/>
          <el-table-column prop="defectTypeCode" label="缺陷类型代码"  align="center" width="150"/>
          <el-table-column prop="defectDesc" label="缺陷描述"  align="center" width="150"/>
          <el-table-column prop="defectSonItemCode" label="缺陷子物料代码"  align="center" width="150"/>
          <el-table-column prop="defectCount" label="缺陷数量"  align="center" width="150"/>
          <el-table-column prop="defectLevel" label="缺陷级别"  align="center" width="150"/>
          <el-table-column prop="sampleNumber" label="样本编号"  align="center" width="150"/>
          <el-table-column prop="inspectionRecordNumber" label="检验记录编号"  align="center" width="150"/>
          <el-table-column prop="reasonCodeGroup" label="原因代码组"  align="center" width="150"/>
          <el-table-column prop="reasonCode" label="原因代码"  align="center" width="150"/>
          <el-table-column prop="reasonDesc" label="原因描述"  align="center" width="150"/>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <Dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <div style="padding: 0px 20px">
        <!-- 包装弹窗 -->
        <el-form ref="packageFormRef" label-width="100px" :model="packageForm" :rules="packageRules" v-if="source == 'package'">
          <el-row :gutter="20">
            <!-- <el-col :span="12">
              <el-form-item prop="qualityNoticeNumber" label="质量通知单号" >
                <el-input v-model="packageForm.qualityNoticeNumber"  placeholder="请输入包装编码" />
              </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item prop="packageCode" label="包装编码" >
                <el-input v-model="packageForm.packageCode"  placeholder="请输入包装编码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="sequenceCode" label="顺序号" >
                <el-input v-model="packageForm.sequenceCode"  placeholder="请输入顺序号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="amount" label="数量" >
                <el-input v-model="packageForm.amount"  placeholder="请输入数量" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="uom" label="计量单位" >
                <el-input v-model="packageForm.uom"  placeholder="请输入计量单位" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="packUnit" label="包装规格" >
                <el-input v-model="packageForm.packUnit"  placeholder="请输入包装规格" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 任务弹窗 -->
        <el-form ref="taskFormRef" label-width="120px" :model="taskForm" :rules="taskRules" v-else-if="source == 'task'">
          <el-row :gutter="20">
            <!-- <el-col :span="12">
              <el-form-item prop="qualityNoticeNumber" label="质量通知单号" >
                <el-input v-model="taskFormRef.qualityNoticeNumber"  placeholder="请输入质量通知单号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="code" label="包装编码" >
                <el-input v-model="taskFormRef.code"  placeholder="请输入包装编码" />
              </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item prop="sequenceCode" label="顺序号" >
                <el-input v-model="taskForm.sequenceCode"  placeholder="请输入顺序号"  type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="status" label="状态" >
                <!-- <el-input v-model="taskForm.status"  placeholder="请输入状态" /> -->
                <el-select v-model="taskForm.status" placeholder="请选择状态">
              <el-option v-for="item in getIntDictOptions(DICT_TYPE.QUALITY_TASK_STATUS)" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="type" label="类型" >
                <el-input v-model="taskForm.type"  placeholder="请输入类型" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="taskGroupCode" label="任务代码组" >
                <el-input v-model="taskForm.taskGroupCode"  placeholder="请输入任务代码组" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="taskCode" label="任务代码" >
                <el-input v-model="taskForm.taskCode"  placeholder="请输入任务代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="taskDesc" label="任务描述" >
                <el-input v-model="taskForm.taskDesc"  placeholder="请输入任务描述" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="taskDetail" label="任务详情" >
                <el-input v-model="taskForm.taskDetail"  placeholder="请输入任务详情" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="leaderType" label="负责人类型" >
                <el-input v-model="taskForm.leaderType"  placeholder="请输入负责人类型" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="leader" label="负责人" >
                <el-input v-model="taskForm.leader"  placeholder="请输入负责人" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="planStartTime" label="计划开始时间" >
                <el-date-picker v-model="taskForm.planStartTime" type="datetime" placeholder="请选择计划开始时间" style="width: 100%;" value-format="x"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="planEndTime" label="计划结束时间" >
                <el-date-picker v-model="taskForm.planEndTime" type="datetime" placeholder="请选择计划结束时间" style="width: 100%;" value-format="x"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="finishTime" label="完成时间" >
                <el-date-picker v-model="taskForm.finishTime" type="datetime" placeholder="请输入完成时间" style="width: 100%;" value-format="x"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="finishNumber" label="完成单据号" >
                <el-input v-model="taskForm.finishNumber"  placeholder="请输入完成单据号" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
         <!-- 缺陷弹窗 -->
         <el-form ref="defectFormRef" label-width="140px" :model="defectForm" :rules="defectRules" v-else-if="source == 'defect'">
          <el-row :gutter="20">
            <!-- <el-col :span="12">
              <el-form-item prop="qualityNoticeNumber" label="质量通知单号" >
                <el-input v-model="defectForm.qualityNoticeNumber"  placeholder="请输入包装编码" />
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item prop="sequenceCode" label="顺序号" >
                <el-input v-model="defectForm.sequenceCode"  placeholder="请输入顺序号"  type="number"/>
              </el-form-item>
            </el-col>
       
            <el-col :span="12">
              <el-form-item prop="defectLocationCodeGroup" label="缺陷位置代码组" >
                <el-input v-model="defectForm.defectLocationCodeGroup"  placeholder="请输入缺陷位置代码组" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="defectLocationCode" label="缺陷位置代码" >
                <el-input v-model="defectForm.defectLocationCode"  placeholder="请输入缺陷位置代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="defectTypeCodeGroup" label="缺陷类型代码组" >
                <el-input v-model="defectForm.defectTypeCodeGroup"  placeholder="请输入缺陷类型代码组" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="defectTypeCode" label="缺陷类型代码" >
                <el-input v-model="defectForm.defectTypeCode"  placeholder="请输入缺陷类型代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="defectDesc" label="缺陷描述" >
                <el-input v-model="defectForm.defectDesc"  placeholder="请输入缺陷描述" />
              </el-form-item>
            </el-col>
 
            <el-col :span="12">
              <el-form-item prop="defectSonItemCode" label="缺陷子物料代码" >
                <el-input v-model="defectForm.defectSonItemCode"  placeholder="请输入缺陷子物料代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="defectCount" label="缺陷数量" >
                <el-input v-model="defectForm.defectCount"  placeholder="请输入缺陷数量" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="defectLevel" label="缺陷级别" >
                <el-input v-model="defectForm.defectLevel"  placeholder="请输入缺陷级别" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="sampleNumber" label="样本编号" >
                <el-input v-model="defectForm.sampleNumber"  placeholder="请输入样本编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="inspectionRecordNumber" label="检验记录编号" >
                <el-input v-model="defectForm.inspectionRecordNumber"  placeholder="请输入检验记录编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="reasonCodeGroup" label="原因代码组" >
                <el-input v-model="defectForm.reasonCodeGroup"  placeholder="请输入原因代码组" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="reasonCode" label="原因代码" >
                <el-input v-model="defectForm.reasonCode"  placeholder="请输入原因代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="reasonDesc" label="原因描述" >
                <el-input v-model="defectForm.reasonDesc"  placeholder="请输入原因描述" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form ref="nameRef" :model="nameForm" v-else>
          <el-form-item :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"  prop="name">
            <el-input v-model="nameForm.name" style="width: 240px" placeholder="请输入名称" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick1" />
      </template>
    </Dialog>
    
  </div>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import { validateInteger,validateTwoNum } from '@/utils/validator'
const message = useMessage() // 消息弹窗
const props = defineProps({
   // 数据
   subListData: {
    type: Array,
    default: null
  }
})
const editableTabsValue = ref('1')
const dialogVisible = ref(false)//弹窗
const dialogTitle = ref('')//弹窗名称

const nameRef = ref(false)
//质量物料表单
const qualityBatchFormRef = ref(null)
const qualityBatchRules = ref({
  sequenceCode: [
    required,
    { validator:validateInteger, message: '请输入正确的整数', trigger: 'blur'}
  ],
  itemCode: [required],
  batch: [required],
  totalAmount: [
    required,
   { validator:validateTwoNum, message: '小数点后最多2位', trigger: 'blur'}
  ],
  uom: [required],
})
const nameForm = ref({
  name: ''
})//物料批次名字
const subList = ref([])
// 编辑赋值
nextTick(()=>{
  subList.value =props.subListData
  subList.value.forEach((item,index)=>{
    editableTabsValue.value = index + 1
    item.name = index + 1
  })  
})

//质量包装表单
const packageFormRef = ref()
const packageRules = ref({
  sequenceCode: [
    required,
    { validator:validateInteger, message: '请输入正确的整数', trigger: 'blur'}
  ],
  packageCode: [required],
  amount: [
    required,
   { validator:validateTwoNum, message: '小数点后最多2位', trigger: 'blur'}
  ],
  uom: [required],
})
const packageForm = ref({})
//质量任务表单
const taskFormRef = ref()
const taskRules = ref({
  sequenceCode: [
    required,
    { validator:validateInteger, message: '请输入正确的整数', trigger: 'blur'}
  ],
  status: [required],
  type: [required],
  taskGroupCode: [required],
  taskCode: [required],
  leaderType: [required],
  leader: [required],
  planStartTime: [required],
  planEndTime: [required],
})
const taskForm = ref({})
//质量缺陷表单
const defectFormRef = ref()
const defectRules = ref({
  sequenceCode: [
    required,
    { validator:validateInteger, message: '请输入正确的整数', trigger: 'blur'}
  ],
  defectLocationCodeGroup: [required],
  defectLocationCode: [required],
  defectTypeCodeGroup: [required],
  defectTypeCode: [required],
  defectCount: [
    required,
    { validator:validateTwoNum, message: '小数点后最多2位', trigger: 'blur'}
  ],
  defectLevel: [required],
  reasonCodeGroup: [required],
  reasonCode: [required],
})
const defectForm = ref({})

const source = ref('')//点击新增来源
const sourceItem = ref('')//点击新增来源
const tableData = ref([])

// 数据格式
const itemBatch = ref({
  itemCode:'',
  batch:'',
  inspectionBatch:'',
  itemDesc:'',
  totalAmount:'',
  uom:'',
  packageList:[],
  taskList:[],
  defectList:[],
  
})

/** 弹窗按钮 */
let Butttondata: any = []
Butttondata = [
  defaultButtons.formSaveBtn(null), // 保存
  defaultButtons.formCloseBtn(null) // 关闭
]
  // 添加移除物料批次
const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add') => {
  if (action === 'add') {
    nameForm.value.name = ''
    source.value = ''
    dialogVisible.value = true
    dialogTitle.value = '添加物料批次名称'
  } else if (action === 'remove') {
    const tabs =subList.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    editableTabsValue.value = activeName
    subList.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
// 添加包装任务缺陷按钮
const handleAdd=(sourceArg,item)=>{
  source.value = sourceArg
  sourceItem.value = item
  if(sourceArg == 'package'){
    dialogTitle.value = '添加包装'
    packageForm.value = {}
  }else if(sourceArg == 'task'){
    dialogTitle.value = '添加任务'
    taskForm.value = {}
  }else if(sourceArg == 'defect'){
    dialogTitle.value = '添加缺陷'
    defectForm.value = {}
  }
  dialogVisible.value = true
}
/** 修改名称时间 */
let tabIndex = 1
const buttonBaseClick1 = (val) => {
  // 保存
  if (val == 'save') {
    // 包装弹窗点击保存
    if(source.value == 'package'){
      packageFormRef.value.validate((valid, fields) => {
        if (valid) {
          for(let i =0;i<subList.value.length;i++){
            if(subList.value[i].sequenceCode == sourceItem.value.sequenceCode){
                const isRepeat = subList.value[i].packageList.some(cur=>cur.sequenceCode==packageForm.value.sequenceCode)
                if(isRepeat){
                  message.error('列表中已存在该顺序号')
                  return;
                }
                subList.value[i].packageList.push(packageForm.value)
            }
          }
          dialogVisible.value = false
        } else {
          console.log('error submit!')
          return false
        }
      })
    }else if(source.value == 'task'){
      taskFormRef.value.validate((valid, fields) => {
        if (valid) {
          if (taskForm.value.planStartTime > taskForm.value.planEndTime) {
              message.error('计划开始时间应小于计划结束时间')
              return;
            }
          for(let i =0;i<subList.value.length;i++){
            if(subList.value[i].sequenceCode == sourceItem.value.sequenceCode){
              // if(data.value.subList[i].packageList)
                const isRepeat = subList.value[i].taskList.some(cur=>cur.sequenceCode==taskForm.value.sequenceCode)
                if(isRepeat){
                  message.error('列表中已存在该顺序号')
                  return;
                }
                subList.value[i].taskList.push(taskForm.value)
            }
          }
          dialogVisible.value = false
        } else {
          console.log('error submit!')
          return false
        }
      })
    }else if(source.value == 'defect'){
      defectFormRef.value.validate((valid, fields) => {
        if (valid) {
          for(let i =0;i<subList.value.length;i++){
            if(subList.value[i].sequenceCode == sourceItem.value.sequenceCode){
              // if(data.value.subList[i].packageList)
                const isRepeat = subList.value[i].defectList.some(cur=>cur.sequenceCode==defectForm.value.sequenceCode)
                if(isRepeat){
                  message.error('列表中已存在该顺序号')
                  return;
                }
                subList.value[i].defectList.push(defectForm.value)
            }
          }
          dialogVisible.value = false
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
    if (!nameRef.value) return
    nameRef.value.validate((valid, fields) => {
      if (valid) {
        console.log(subList.value)
        console.log(nameForm.value.name)
        const isRepeat = subList.value.some(item=>item.sequenceCode ==  nameForm.value.name)
        if(isRepeat){
          message.error('列表中已存在该顺序号')
          return;
        }
        const newTabName = `${++tabIndex}`
        subList.value.push({
          sequenceCode: nameForm.value.name,
          name: newTabName,
          ...itemBatch.value
        })
       
        editableTabsValue.value = newTabName
        dialogVisible.value = false
      } else {
        console.log('error submit!')
        return false
      }
    })
  }
  // 关闭
  else if (val == 'close') {
    dialogVisible.value = false
  }
}
// 删除包装任务和缺陷
const det = (index,array)=>{
  array.splice(index,1)
}
defineExpose({qualityBatchFormRef, subList})
</script>
<style scoped lang="scss">
.content {
  padding: 20px;
  .type {
    padding: 0px 20px 20px;
  }
}
.title-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 10px;
}
.title{
  font-weight: bold;
  font-size: 16px;
  position: relative;
  padding-left: 12px;
  line-height: 16px;
  &::after{
    content:'';
    position: absolute;
    left: 0px;
    width: 4px;
    height: 16px;
    top: 50%;
   transform: translateY(-50%);
    background: #409eff;
  }
}

</style>