<template>
  <div class="LiveOverview">
    <!-- <div class="row">
      <div :class="{ col: true }" v-for="(item, index) in LOlist" :key="index">
        <countTo :startVal="0" :endVal="item.views" :duration="100" />
        <p v-text="item.centerName"></p>
      </div>
    </div> -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
      <el-breadcrumb-item>直播概览</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card v-if="LOlist.length">
      <chart title="部门访问人次" :list="LOlist" dataKey="views" />
    </el-card>
    <br />
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card v-if="LOlist.length">
          <TreemapChart
            title="部门直播场次数"
            dy="场"
            :list="LOlist"
            dataKey="liveNum"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card v-if="LOlist.length">
          <TreemapChart
            title="部门直播营收"
            dy="元"
            :list="LOlist"
            dataKey="money"
          />
        </el-card>
      </el-col>
    </el-row>
    <br />
    <el-card v-if="department.length">
      <chart title="栏目访问人次" :list="department" dataKey="views" />
    </el-card>
    <br />
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card v-if="department.length">
          <TreemapChart
            title="栏目直播场次数"
            dy="场"
            :list="department"
            dataKey="liveNum"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card v-if="department.length">
          <TreemapChart
            title="栏目直播营收"
            dy="元"
            :list="department"
            dataKey="money"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import { getLiveOverview, getLiveByCol } from '@/api/index';
// import countTo from '@/components/counto/vue-countTo.vue';

import chart from '@/components/LiveOverviewChart.vue';
import TreemapChart from '@/components/TreemapChart.vue';

export default {
  name: 'LiveOverview',
  data() {
    return {
      LOlist: [],
      department: [],
    };
  },
  mounted() {
    getLiveOverview({}).then(r => {
      this.LOlist = r || [];
    });
    getLiveByCol({}).then(r => {
      this.department = r || [];
    });
  },
  computed: {},
  methods: {},
  components: {
    // countTo,
    chart,
    TreemapChart,
  },
};
</script>

<style scoped>
.LiveOverview {
  padding: 1em;
}
.row {
  display: flex;
}
.col {
  flex: 1;
  text-align: center;
  border-top: 3px solid #ffffff;
  line-height: 1.5em;
  padding: 1em 0;
  cursor: pointer;
}

.col > span {
  font-size: 20px;
  color: #396fff;
}
</style>
