<template>
  <el-popover width="500">
    <template #reference>
      <el-badge :value="props.data.count">
        <el-button>错误信息</el-button>
      </el-badge>
    </template>
    <div class="content">
      <div v-for="(value,key) in props.data.data">
        <div class="main">
          <div class="index">
            {{ key }}
          </div>
          <div v-for="(item,index) in value" class="errorMsg">
            {{ index + 1 }} 、 {{ item }}
          </div>
        </div>
      </div>
    </div>
  </el-popover>
</template>

<script setup name='CaoYaoCuoWuXinXin'>
const props = defineProps({
  data: {
    type: Object
  }
})

</script>

<style scoped lang="scss">

.content {
  width: max-content;
  max-height: 400px;
  overflow-y: auto;
}

.main {
  border: 1px solid;
  width: max-content;
  margin-bottom: 5px;


  .index {
    border: 1px solid;
    border-radius: 5px;
    background-color: #0a84fd;
    color: white;
    text-align: center;
  }

  .errorMsg {
    border: 1px solid;
    border-radius: 5px;
    background-color: rgba(245, 65, 65, 0.85);
    color: white;
    width: 240px;
    padding: 2px;
  }
}
</style>
