<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" :type="'staff'" />
        </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) {
          data.enterpriseNums
            ? (this.enterpriseNums = data.enterpriseNums)
            : "--";
          data.productNums ? (this.productNums = data.productNums) : "--";
          data.staffNums ? (this.staffNums = data.staffNums) : "--";
          data.newsNums ? (this.newsNums = data.newsNums) : "--";
          data.feedbackNums ? (this.feedbackNums = data.feedbackNums) : "--";
          data.customerNums ? (this.customerNums = data.customerNums) : "--";

          this.lineDayValue = data.accessStatList ? data.accessStatList : [];
          this.barDayValue = data.sendCardStaffList
            ? data.sendCardStaffList
            : [];
          if (
            data.newsDistributionList &&
            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 &&
            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 &&
            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>
