<template>
  <div>
    <main-top>
      <div slot="con"></div>
    </main-top>
    <div class="tablecon">
      <div class="tablebody">
        <div class="ttop">
          <div class="ttl">
            <div>
              <div>
                <span>累计访问量</span>
                <p>{{totalVisit}}</p>
              </div>
              <i class="el-icon-s-data"></i>
            </div>

            <div>
              <div>
                <span>今日访问量</span>
                <p>{{todayVisit}}</p>
              </div>
              <i class="el-icon-view"></i>
            </div>
          </div>
          <div class="ttr">
            <PowerBar class="n-i" :data='visitData' />
          </div>
        </div>
        <div class="tbottom">
          <FocusBang v-if="focus.length>0" :data="focus" />

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainTop from "@/components/main-top";
import { mapGetters } from "vuex";
import { getReportDetail } from "@/configue/api";
import PowerBar from '@/components/power-bar'

import FocusBang from '@/components/focus-bang'


export default {
  data() {
    return {
      focus: [],
      todayVisit: 0,
      totalVisit: 0,
      visitData: { list: [], all: 0 }

    };
  },
  components: {
    MainTop,
    FocusBang,
    PowerBar
  },
  methods: {
    getReport() {
      getReportDetail(data => {
        this.focus = data.data.ranking.map((item, i) => {
          return {
            num: i + 1,
            zan: item.visit,
            name: item.exhibitionName,
            img: item.thumb
          }
        })

        let all = 0

        this.visitData.list = data.data.exhibitionVisit.map((item) => {
          all += item.visit
          return {
            visit: item.visit,
            name: item.exhibitionName,
            img: item.thumb
          }
        })

        this.visitData.all = all
        this.todayVisit = data.data.todayVisit
        this.totalVisit = data.data.totalVisit
      })
    },
  },
  computed: {
    ...mapGetters({
      activeMenu: "activeMenu",
    }),
  },
  watch: {
    subMenu: {
      deep: true,
      immediate: true,
      handler: function () {
        this.getAuth(this.activeMenu);
      },
    },
    activeMenu: {
      deep: true,
      immediate: true,
      handler: function (newVal) {
        this.getAuth(newVal);
      },
    },
  },
  mounted() {
    this.getReport()
  },
};
</script>

<style lang="less" scoped>
.tablebody {
  width: 100%;
  height: calc(100% - 80px);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .ttop {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: space-between;

    .ttl {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: space-between;

      >div {
        height: 100%;
        width: 49%;
        border-radius: 8px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        position: relative;
        display: flex;
        align-items: center;

        >div {
          margin-left: 10%;
          text-align: center;

          >span {
            color: #999;
            font-size: 32px;

          }

          >p {
            font-size: 40px;
            margin-top: 20px;
          }
        }

        >i {
          position: absolute;
          top: 50%;
          right: 10%;
          font-size: 60px;
          color: #B63C25;
        }
      }
    }

    .ttr {
      width: 48%;
      height: 100%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      border-radius: 8px;
    }

  }

  .tbottom {
    width: 100%;
    height: 58%;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }
}
</style>
