<template>
  <div class="overview">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="item-box todo">
          <div class="item-title">任务待办</div>
          <div class="item-body">
            <template>
              <el-table :data="todoTableData" style="width: 100%" stripe>
                <el-table-column type="index" width="50"> </el-table-column>
                <el-table-column
                  prop="teskName"
                  label="任务名称"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="teskCode"
                  label="任务编号"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="teskStatus"
                  label="状态"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="teskUser"
                  label="分配者"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="teskTime"
                  label="任务期限"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column label="操作">
                  <template>
                    <el-button type="primary" size="small">处理</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <div class="item-box earmarked">
          <div class="item-title">专项行动</div>
          <div class="item-body">
            <el-row :gutter="6" class="item-one-list">
              <el-col
                :span="6"
                v-for="(item, index) in aimList"
                :key="index"
                style="margin-bottom: 6px"
              >
                <div class="item-one-box">
                  <div class="one-title">关于xxxxxx的专项行动</div>
                  <template v-if="item.type == 1">
                    <div class="one-info">
                      <div>区县：8（已填7）</div>
                      <div>外协：无</div>
                    </div>
                    <div class="one-info">行动时间：2024-07-01至2024-07-31</div>
                    <el-button type="text" class="el-button-qu">管理</el-button>
                    <el-button type="text" class="el-button-qu">查看</el-button>
                  </template>
                  <template v-else>
                    <div class="one-info">行动时间：2024-07-01至2024-07-31</div>
                    <div class="btn-box">
                      <el-button type="success" size="small">填报</el-button>
                      <div class="err">即将超时</div>
                    </div>
                  </template>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-box tip">
          <div class="item-title">工作提示</div>
          <div class="item-body">
            <template>
              <el-table :data="todoTableData" style="width: 100%" stripe>
                <el-table-column
                  prop="teskName"
                  label="内容"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="teskCode"
                  label="事件"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <div class="item-box msg">
          <div class="item-title">通知公告</div>
          <div class="item-body">
            <template>
              <el-table :data="todoTableData" style="width: 100%" stripe>
                <el-table-column
                  prop="teskName"
                  label="内容"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="teskCode"
                  label="事件"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  todoObj,
  tipObj,
  areaObj,
  chObj,
} from "@/assets/mockdata/demodata.json";
export default {
  name: "Overview",
  data() {
    return {
        todoTableData: [],
      tipTableData: [],
      aimList: [],
    }
  },
  created() {
    this.getTodoList();
    this.getTipList();
    this.getAimList();
  },
  methods: {
    getTodoList() {
      for (let index = 0; index < 10; index++) {
        this.todoTableData.push(todoObj);
      }
    },
    getTipList() {
      for (let index = 0; index < 10; index++) {
        this.tipTableData.push(tipObj);
      }
    },
    getAimList() {
      for (let index = 0; index < 12; index++) {
        if (Math.random() > 0.5) {
          this.aimList.push(areaObj);
        } else {
          this.aimList.push(chObj);
        }
      }
    },
  },

};
</script>
<style scoped lang="scss">
.overview {
  .item-box {
    width: 100%;
    border-radius: 10px;
    background-color: rgba(244, 244, 245, 0.38);
    margin-bottom: 15px;
    &.todo {
      height: calc(50vh - 115px);
    }
    &.earmarked {
      height: calc(50vh - 115px);
      margin-bottom: 0;
    }
    &.tip {
      height: calc(50vh - 60px);
    }
    &.msg {
      height: calc(50vh - 175px);
      margin-bottom: 0;
    }
    .item-title {
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
      line-height: 23px;
      padding: 10px;
    }
    .item-body {
      height: calc(100% - 68px);
      margin: 0 13px;
      padding-bottom: 28px;
      .el-table {
        border-radius: 10px;
        height: 100%;
        :deep(.el-table__body-wrapper.is-scrolling-none) {
          height: calc(100% - 47px);
          overflow-y: scroll;
        }
      }
    }
  }
  .earmarked {
    .item-title {
      margin-bottom: 0;
    }
    .item-one-list {
      max-height: 100%;
      overflow-y: scroll;
      margin-bottom: -6px;
      .item-one-box {
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 5px;
        padding: 3px;
        height: 90px;
        .one-title {
          color: rgba(0, 122, 255, 1);
          font-size: 14px;
          line-height: 20px;
        }
        .one-info {
          display: flex;
          font-size: 12px;
          line-height: 20px;
        }
        .el-button-qu {
          padding: 5px 0;
        }
        .btn-box {
          margin-top: 10px;
          display: flex;
          align-items: flex-end;
          .err {
            margin-left: 10px;
            color: rgba(236, 47, 47, 1);
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
    }
  }
}
</style>
