<!--
 * @Author: your name
 * @Date: 2021-09-28 11:28:08
 * @LastEditTime: 2021-12-03 13:34:04
 * @LastEditors: Please set LastEditors
 * @Description: 工作看板的预警信息等统计
 * @FilePath: \hyyfClient\src\views\PdcData\analysis\WorkInfos.vue
-->
<template>
  <div class="work-info">
    <el-row>
      <template v-for="item in dataList">
        <el-col :span="12" :key="item.id">
          <div class="item" @click="handleClick(item)">
            <span class="label">{{ item.label }}</span>
            <span class="right"
              >(<span class="number">{{ item.number }}</span
              >)</span
            >
          </div>
        </el-col>
      </template>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleClick(item) {
      this.$emit("workInfoClick", item);
    },
  },
};
</script>
<style scoped>
.work-info {
  padding: 20px;
}

.item {
  padding: 15px 15px 7px;
  border-bottom: 1px solid rgba(235, 238, 245, 1);
  font-size: 13px;
  margin: 0px 10px;
  cursor: pointer;
}
.item:hover {
  background-color: #eee;
}
.item > .label {
  color: #bcbcbc;
}
.item > .right {
  float: right;
}
.item > .right > .number {
  color: #f04844;
}
</style>
