<template>
  <div class="home">
    <div class="home-top" v-if="false">
      <div class="title">待办事项</div>
      <div class="list">
        <div class="item">
          <div class="name">待审核-积分包</div>
          <div class="number">10</div>
        </div>
        <div class="item">
          <div class="name">待结算-积分包</div>
          <div class="number">12</div>
        </div>
        <div class="item">
          <div class="name">待开票-积分包</div>
          <div class="number">49</div>
        </div>
      </div>
      ""
    </div>
    <div class="card">
      <div class="card-list">
        <div class="tit">发包情况</div>
        <div class="select" v-if="false">
          <el-form ref="form" :model="form" label-width="50px">
            <el-form-item label="周期">
              <el-select v-model="form.region" placeholder="请选择周期">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="card-number">
          <div class="card-number-list">
            <div class="name">发放执行包</div>
            <div class="num">{{ (pkgInfo.doing && pkgInfo.doing.count) || 0 }} 个</div>
            <div class="num">
              {{ (pkgInfo.doing && pkgInfo.doing.sum) || 0 }}
            </div>
          </div>
          <div class="card-number-list">
            <div class="name">完成执行包</div>
            <div class="num">{{ (pkgInfo.finish && pkgInfo.finish.count) || 0 }} 个</div>
            <div class="num">
              {{ (pkgInfo.finish && pkgInfo.finish.sum) || 0 }}
            </div>
          </div>
          <div class="card-number-list">
            <div class="name">全部执行包</div>
            <div class="num">{{ (pkgInfo.total && pkgInfo.total.count) || 0 }} 个</div>
            <div class="num">
              {{ (pkgInfo.total && pkgInfo.total.sum) || 0 }}
            </div>
          </div>
        </div>
      </div>
      <div class="card-list card-r">
        <div class="card-left">
          <div class="tit">任务概况</div>
          <div class="select" v-if="false">
            <el-form ref="form" :model="form" label-width="50px">
              <el-form-item label="周期">
                <el-select v-model="form.region" placeholder="请选择周期">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="card-table">
            <div class="total">
              总积分值 <span>{{ total }}</span>
            </div>
            <div class="table">
              <el-descriptions :column="1" border>
                <el-descriptions-item content-class-name="home-descriptions-content" :label="item.taskTypeName" v-for="(item, index) in taskDetail" :key="index">{{
                  item.sum || 0
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
        <div class="card-right"></div>
      </div>
    </div>
    <statistics />
  </div>
</template>

<script>
import {getStatPkgApi, getStatTaskApi} from '@/api/home/index.js';
import statistics from './statistics.vue';

export default {
  components: {statistics},
  data() {
    return {
      pkgInfo: {},
      taskDetail: {},
      total: '',
      form: {
        region: ''
      }
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const resA = await getStatPkgApi();
      const resB = await getStatTaskApi();
      this.pkgInfo = resA.data.data;
      this.taskDetail = resB.data.data.details;
      this.total = resB.data.data.total;
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  padding: 10px 20px;

  .home-top {
    background-color: #fff;
    width: 100%;
    height: 150px;
    border-radius: 10px;
    padding: 15px 10px;
    .title {
      font-size: 16px;
      color: #000;
      font-weight: 600;
    }
    .list {
      margin: 20px 10px;
      display: flex;
      .item {
        display: flex;
        margin-right: 45px;
        align-items: center;
        flex-direction: column;
        .name {
          font-size: 12px;
          color: #999;
        }
        .number {
          margin-top: 10px;
          color: #000;
          font-weight: 600;
          font-size: 32px;
        }
      }
    }
  }
  .card {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .card-list {
      padding: 15px 10px;
      height: 300px;
      width: 49%;
      background-color: #fff;
      border-radius: 10px;

      .tit {
        color: #000;
        font-weight: 600;
        font-size: 16px;
      }
      .select {
        margin: 10px 0;
      }

      .card-number {
        margin-top: 30px;
        display: flex;

        .card-number-list {
          cursor: pointer;
          margin-right: 60px;
          display: flex;
          flex-direction: column;
          min-width: 150px;
          border-radius: 3px;
          padding: 5px;
          .name {
            font-size: 12px;
            color: #999;
          }
          .num {
            color: #000;
            margin-top: 10px;
          }

          &:hover {
            background-color: #f5f5f5;
            .num {
              color: #7bb562;
            }
          }
        }
      }
    }

    .card-r {
      display: flex;
      .card-left {
        .card-table {
          margin-top: 15px;
          .total {
            color: #999;
            font-size: 12px;
            height: 18px;
            line-height: 18px;
            span {
              margin-left: 10px;
              color: #000;
              font-size: 18px;
              font-weight: 600;
            }
          }
        }
        .table {
          margin-top: 10px;
        }
      }
    }
    .table {
      height: 170px;
      overflow: auto;
    }
  }
}
</style>

<style scoped>
.home {
  height: calc(100vh - 130px);
  overflow: auto;
}
.home-descriptions-content {
  width: 350px;
}
</style>
