<template>
  <div class="home-cell">
    <CellHeaderVue title="任务统计">
      <span class="el-icon-refresh" title="刷新"></span>
      <span class="el-icon-more" title="操作"></span>
    </CellHeaderVue>
    <div class="cell-content">
      <div class="task-stat-display total">
        <div class="display-wrapper">
          <div
            class="stat-item"
            v-for="(item, idx) in total"
            :key="idx"
            :style="{ width: item.name === '来报待处理' ? '20%' : 'unset' }"
          >
            <div class="stat-name">{{ item.name }}</div>
            <div class="stat-count">{{ item.count }}</div>
          </div>
        </div>
      </div>
      <div class="task-sign mime">
        <span class="el-icon-s-custom"></span>
        我的工作
      </div>
      <div class="task-stat-display mime">
        <div class="display-wrapper">
          <div class="stat-item" v-for="(item, idx) in mime" :key="idx">
            <div class="stat-name">{{ item.name }}</div>
            <div class="stat-count">{{ item.count }}</div>
          </div>
        </div>
      </div>
      <div class="task-sign pty">
        <span class="el-icon-s-platform"></span>
        机构工作
      </div>
      <div class="task-stat-display pty">
        <div class="display-wrapper">
          <div class="stat-item" v-for="(item, idx) in pty" :key="idx">
            <div class="stat-name">{{ item.name }}</div>
            <div class="stat-count">{{ item.count }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CellHeaderVue from "./CellHeader.vue";

export default {
  name: "TaskStatistics",
  components: { CellHeaderVue },
  data() {
    return {
      total: [
        { name: "待经办", count: "5454" },
        { name: "来报待处理", count: "4231" },
        { name: "待复核", count: "652" },
        { name: "待授权", count: "2" },
        { name: "待匹配", count: "5" },
        { name: "待打印", count: "1235" },
      ],
      mime: [
        { name: "待经办", count: "154" },
        { name: "待修改", count: "1254" },
        { name: "待复核", count: "5" },
        { name: "待授权", count: "0" },
        { name: "待回复", count: "0" },
        { name: "待打印", count: "4564" },
        { name: "已完结", count: "3212" },
      ],
      pty: [
        { name: "待经办", count: "1164" },
        { name: "待修改", count: "2341" },
        { name: "待复核", count: "168" },
        { name: "待授权", count: "423" },
        { name: "待打印", count: "6547" },
        { name: "待匹配", count: "23" },
        { name: "已完结", count: "3212" },
      ],
    };
  },
};
</script>

<style scoped>
.cell-content {
  padding: 0px 8px;
}
.task-stat-display {
  height: 25%;
  max-height: 90px;
  display: flex;
  justify-content: space-around;
  color: #f3f3f3;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 8px;
  background-color: #e7eaef;
}
.task-stat-display .display-wrapper {
  width: 100%;
  display: flex;
}
.task-stat-display .display-wrapper .stat-item {
  flex: auto;
}
.task-stat-display.total .display-wrapper {
  border: 1px solid rgb(17 106 153 / 60%);
}
.task-stat-display.mime .display-wrapper {
  border: 1px solid rgb(215 40 40 / 60%);
}
.task-stat-display.pty .display-wrapper {
  border: 1px solid rgb(17 124 74 / 60%);
}
.task-stat-display.total .stat-name {
  background-color: rgb(17 106 153 / 60%);
}
.task-stat-display.mime .stat-name {
  background-color: rgb(215 40 40 / 60%);
}
.task-stat-display.pty .stat-name {
  background-color: rgb(17 124 74 / 60%);
}
.task-stat-display .stat-count {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #606266;
}
.task-stat-display.total .display-wrapper .stat-item .stat-count {
  border-right: 1px solid rgb(17 106 153 / 60%);
}
.task-stat-display.mime .display-wrapper .stat-item .stat-count {
  border-right: 1px solid rgb(215 40 40 / 60%);
}
.task-stat-display.pty .display-wrapper .stat-item .stat-count {
  border-right: 1px solid rgb(17 124 74 / 60%);
}
.task-stat-display .stat-name {
  border-bottom: 1px solid;
  font-size: 14px;
  font-weight: 400;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid;
}
.task-stat-display.total .display-wrapper .stat-item:last-child .stat-count {
  border-right: 0;
}
.task-stat-display.total .display-wrapper .stat-item:last-child .stat-name {
  border-right: 0;
}
.task-stat-display.mime .display-wrapper .stat-item:last-child .stat-count {
  border-right: 0;
}
.task-stat-display.mime .display-wrapper .stat-item:last-child .stat-name {
  border-right: 0;
}
.task-stat-display.pty .display-wrapper .stat-item:last-child .stat-count {
  border-right: 0;
}
.task-stat-display.pty .display-wrapper .stat-item:last-child .stat-name {
  border-right: 0;
}
.task-sign {
  height: 12%;
  display: flex;
  align-items: center;
  padding-left: 15px;
  font-size: 14px;
  font-weight: 400;
}
.task-sign [class^="el-icon-"] {
  font-size: 25px;
  margin-right: 10px;
}
.task-sign.mime [class^="el-icon-"] {
  color: #e56649;
}
.task-sign.pty [class^="el-icon-"] {
  color: #0e63a2;
}
</style>
