<template>
  <div class="reoprtManager">
    <div class="report">
      <div class="imgBox">
        <img
          src="./../../../assets/basic/report.png"
          alt=""
          width="355px"
          height="314px"
        />
      </div>
      <div class="numBox">
        <div>
          <div class="reportNum">
            <div class="num">{{ totalReports }}</div>
            <div class="text">
              <p class="font">全部报表</p>
              <p class="letter">Reports</p>
            </div>
          </div>
          <div class="detail" @click="toDetail()">了解详情</div>
        </div>
      </div>
    </div>
    <div class="reportDesc" v-for="(item, i) in reportList" :key="i">
      <div>
        <div class="reportNum">
          <div class="num">{{ item.quantity }}</div>
          <div class="text">
            <p class="font">{{ item.name }}</p>
            <p class="letter">Reports</p>
          </div>
        </div>
        <div class="detail" @click="toDetail(item.id)">了解详情</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getReportCategorylist } from '@/api/basicConfig'
export default {
  name: 'ReportList',
  data() {
    return {
      totalReports: 0,
      reportList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      getReportCategorylist({}).then((res) => {
        if (res.code === 0 && res.data.length > 0) {
          this.totalReports = 0
          for (let i = 0; i < res.data.length; i++) {
            this.totalReports += res.data[i].quantity
          }
          this.reportList = res.data
        } else {
          this.totalReports = 0
          this.reportList = []
        }
      })
    },
    toDetail(id) {
      this.$router.push({
        // path: '/basicConfig/reportManagement/reportListDetail',
        name: 'reportListDetail',
        params: { categoryId: id ? id : '' }
      })
    }
  }
}
</script>
<style lang="scss">
.reoprtManager {
  padding-left: 16px;
  padding-top: 8px;
  display: flex;
  flex-flow: row wrap;
  height: calc(100vh - 210px);
  align-content: flex-start;
  overflow: auto;
  .report {
    width: 768px;
    height: 456px;
    background: #fff;
    border-radius: 4px;
    margin: 0 16px 16px 0;
    position: relative;
    .imgBox {
      display: inline-block;
      width: 480px;
      height: 100%;
      padding: 80px 0 0 80px;
    }
    .numBox {
      position: absolute;
      display: inline-block;
      height: 100%;
      top: 120px;
    }
  }
  .reportDesc {
    width: 376px;
    height: 456px;
    background: #fff;
    border-radius: 4px;
    text-align: center;
    padding-top: 120px;
    margin: 0 16px 16px 0;
  }
  .reportNum {
    .num {
      display: inline-block;
      font-size: 80px;
      font-weight: 600;
      color: #161616;
      margin-right: 36px;
    }
    .text {
      display: inline-block;
      .font {
        font-size: 18px;
        letter-spacing: 2px;
        margin-bottom: 5px;
      }
      .letter {
        font-size: 32px;
        font-weight: 300;
      }
    }
  }
  .detail {
    width: 200px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    background: #0b58ff;
    border-radius: 4px;
    margin: 139px auto 0;
    cursor: pointer;
  }
}
</style>
