<template>
  <span id="notice">
    <el-popover placement="bottom" title="" width="400" trigger="hover" ref="notice">
      <el-row class="popover-content">
        <el-col :span="24" style="text-align:center">您共有{{ total }}项待办事项</el-col>
      </el-row>
      <el-row class="popover-content" v-for="(item, index) in list" :key="index">
        <el-col :span="20">{{ item.name }} {{ item.content }}</el-col>
        <el-col :span="4">
          <el-link type="primary" @click="handleDelete(item.id)">[不再提示]</el-link>
        </el-col>
      </el-row>
    </el-popover>
    <el-badge :value="total" style="margin-right:1rem;" v-popover:notice>
      <span class="el-icon-message info_icon" style="zoom:1.3"></span>
    </el-badge>
  </span>
</template>

<script>
export default {
  name: 'notice',
  props: {
    list: null,
    total: { type: Number, default: 0 },
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {
    handleDelete(id) {
      this.$emit('delete', id);
    },
  },
};
</script>

<style lang="less" scoped>
.popover-content {
  margin: 0;
  padding: 0;
  .el-col {
    border-bottom: 1px dashed #cccccc;
    font-size: 0.8rem;
    height: 1.25rem;
  }
}
/deep/.el-popper {
  border: 1px solid #ccc;
  border-radius: 0px;
  height: 100px;
  padding: 0;
}
/deep/.popoverCon {
  width: 400px;
  height: 70px;
  text-align: center;
  padding: 0;
  margin: 0;
}
</style>
