<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">{{enterpriseNums}}</div>
        </div>

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

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

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

        <div class="hc-itme">
          <div class="i-title">反馈数量（次）</div>
          <div class="i-num">{{feedbackNums}}</div>
        </div>
        <div class="hc-itme">
          <div class="i-title">用户数量（次）</div>
          <div class="i-num">{{customerNums}}</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: [],
      lineDayValue: [],
      cpfbDayValue: [],
      mpfbDayValue: [],
      xwfbDayValue: [],
      enterpriseNums: "--",
      productNums: "--",
      staffNums: "--",
      newsNums: "--",
      feedbackNums: "--",
      customerNums: "--"
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$post("/company/stat").then(res => {
        const { data, code } = res;
        if (code == 1) {
          this.enterpriseNums = data.enterpriseNums;
          this.productNums = data.productNums;
          this.staffNums = data.staffNums;
          this.newsNums = data.newsNums;
          this.feedbackNums = data.feedbackNums;
          this.customerNums = data.customerNums;

          this.lineDayValue = data.accessStatList ? data.accessStatList : [];
          this.barDayValue = data.businessCardDistributionList
            ? data.businessCardDistributionList
            : [];
          if (data.newsDistributionList.length > 0) {
            let arr = [];
            data.newsDistributionList.forEach(item => {
              arr.push({
                name: item.name,
                value: item.newsNums
              });
            });
            this.xwfbDayValue = arr
          } else {
            this.xwfbDayValue = [];
          }
          
          if (data.productDistributionList.length > 0) {
            let arr = [];
            data.productDistributionList.forEach(item => {
              arr.push({
                name: item.companyName,
                value: item.productNums
              });
            });
            this.cpfbDayValue = arr
          } else {
            this.cpfbDayValue = [];
          }

          
          if (data.businessCardDistributionList.length > 0) {
            let arr = [];
            data.businessCardDistributionList.forEach(item => {
              arr.push({
                name: item.companyName,
                value: item.businessCardNums
              });
            });
            this.mpfbDayValue = arr
          } else {
            this.mpfbDayValue = [];
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
@import "./home/home.less";
.page-home {
  margin-top: 20px !important;
  border-radius: 8px;
  padding-top: 10px !important;
}
</style>
