<template>
  <!-- <div :class="classList" style="min-height: 100vh;"> -->
  <div class="homepage">
    <!-- 核心数据 -->
    <div class="card">
      <div class="cardtitle">核心数据</div>
      <div class="header">
        <div class="hc-itme">
          <div class="i-title">企业总量（家）</div>
          <div class="i-num">5</div>
        </div>

        <div class="hc-itme">
          <div class="i-title">产品数量（个）</div>
          <div class="i-num">35</div>
        </div>

        <div class="hc-itme">
          <div class="i-title">员工数量（人）</div>
          <div class="i-num">48</div>
        </div>

        <div class="hc-itme">
          <div class="i-title">新闻数量（篇）</div>
          <div class="i-num">89</div>
        </div>

        <div class="hc-itme">
          <div class="i-title">反馈数量（次）</div>
          <div class="i-num">65</div>
        </div>
        <div class="hc-itme">
          <div class="i-title">用户数量（次）</div>
          <div class="i-num">156</div>
        </div>
      </div>
    </div>
    <!-- 饼状图 -->
    <div class="hang pies">
      <div class="card pie">
        <div class="cardtitle">产品分布</div>
        <div class="piecard">
          <Pie class="echarts" :info="cpfbDayValue" ref="ageChild" style="width:100%;height:100%" />
        </div>
      </div>
      <div class="card pie">
        <div class="cardtitle">名片分布</div>
        <div class="piecard">
          <Pie class="echarts" :info="mpfbDayValue" ref="ageChild" style="width:100%;height:100%" />
        </div>
      </div>
      <div class="card pie">
        <div class="cardtitle">新闻分布</div>
        <div class="piecard">
          <Pie class="echarts" :info="xwfbDayValue" ref="ageChild" style="width:100%;height:100%" />
        </div>
      </div>
    </div>
    <!-- 折线图柱状图 -->
    <div class="hang">
      <div class="card linebar">
        <div class="cardtitle">小程序近30日访问次数</div>
        <div class="linebarcar">
          <CLine class="echarts" :info="lineDayValue" />
        </div>
      </div>
      <div class="card linebar">
        <div class="cardtitle">员工累计发送名片次数</div>
        <div class="linebarcar">
          <CBar class="echarts" :info="barDayValue" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pie from "./home/pie.vue";
import CLine from "./home/line.vue";
import CBar from "./home/bar.vue";
export default {
  computed: {
    userData() {
      return this.$store.state.userData.currUserName;
    }
  },
  components: {
    Pie,
    CLine,
    CBar
  },
  data() {
    return {
      classList: "page page-home",
      // barDayValue: [{ nums: 1, age_area: "31-40岁" }],
      lineDayValue: [
        {
          datetime: "08:00:00-09:00:00",
          count: 0
        },
        {
          datetime: "09:00:00-10:00:00",
          count: 0
        },
        {
          datetime: "10:00:00-11:00:00",
          count: 0
        },
        {
          datetime: "11:00:00-12:00:00",
          count: 0
        },
        {
          datetime: "12:00:00-13:00:00",
          count: 0
        },
        {
          datetime: "13:00:00-14:00:00",
          count: 0
        },
        {
          datetime: "14:00:00-15:00:00",
          count: 4
        },
        {
          datetime: "15:00:00-16:00:00",
          count: 1
        },
        {
          datetime: "16:00:00-17:00:00",
          count: 0
        },
        {
          datetime: "17:00:00-18:00:00",
          count: 0
        },
        {
          datetime: "18:00:00-19:00:00",
          count: 0
        }
      ],
      cpfbDayValue: [
        {
          value: 5,
          name: "四川思迈尔网络科技有限公司"
        },
        {
          value: 10,
          name: "四川恒生信达科技有限公司"
        },
        {
          value: 10,
          name: "四川信宏翔科技有限公司"
        },
        {
          value: 6,
          name: "武汉力龙信息科技股份有限公司"
        },
        {
          value: 32,
          name: "四川力龙恒生科技股份有限公司"
        }
      ],
      mpfbDayValue: [
        {
          value: 5,
          name: "四川思迈尔网络科技有限公司"
        },
        {
          value: 10,
          name: "四川恒生信达科技有限公司"
        },
        {
          value: 10,
          name: "四川信宏翔科技有限公司"
        },
        {
          value: 6,
          name: "武汉力龙信息科技股份有限公司"
        },
        {
          value: 32,
          name: "四川力龙恒生科技股份有限公司"
        }
      ],
      xwfbDayValue: [
        {
          value: 33,
          name: "集团频道"
        },
        {
          value: 56,
          name: "产品频道"
        },
        {
          value: 89,
          name: "机器人频道"
        }
      ]
    };
  },
  created() {}
};
</script>
<style scoped lang="less">
@import "./home/home.less";
.page-home {
  margin-top: 20px !important;
  border-radius: 8px;
  padding-top: 10px !important;
}
</style>
