<template>
  <div class="main">
    <div class="left">
      <chart1 :data="data1" />
      <chart2 :data="data2" />
      <chart3 :hardwaremap="hardwaremap"/>
    </div>
    <div class="middle">
      <line-chart id="chat4" :data="data4" title="收费组总缴费统计" axis-x="日期" axis-y="金额(元)" />
      <line-chart id="chat5" :data="data5" title="月租车总缴费统计" axis-x="日期" axis-y="金额(元)" />
      <line-chart id="chat6" :data="data6" title="临时车总缴费统计" axis-x="日期" axis-y="金额(元)" />
    </div>
    <div class="right">
      <bar-chart id="chat7" :data="data7" title="注册用户总数" axis-x="" axis-y="数量(个)" />
      <line-chart id="chat8" :data="data8" title="日活跃用户" axis-x="日期" axis-y="数量(个)" />
      <bar-chart id="chat9" :data="data9" title="已发布内容统计" axis-x="" axis-y="数量(个)" />
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { mapState, mapActions } from "vuex";
import chart1 from "@/components/chart/chart1.vue";
import LineChart from "@/components/chart/lineChart.vue";
import chart2 from "@/components/chart/chart2.vue";
import chart3 from "@/components/chart/chart3.vue";
import BarChart from "@/components/chart/barChart.vue";
import chart9 from "@/components/chart/chart9.vue";

export default {
  data() {
    return {
      hardwaremap: {}, //chart3
      invoicelist: [], //chart4
      usercountlist: [], //chart5
      temporarylist: [] //chart6
    };
  },
  components: {
    chart1,
    chart2,
    chart3,
    LineChart,
    BarChart,
    chart9
  },
  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'background:#16191c')
  },
  beforeDestroy () {
    document.querySelector('body').setAttribute('style', '')
  },
  computed: {
    ...mapState("trunkIndex", {
      IndexInfo: item => item.trunkIndex.IndexInfo
    }),
    data1 () {
      // 总单, 没有使用返回值
      const { solvedTicket = 0, unsolvedTicket = 0 } = (this.IndexInfo || {}).historyMap || {}
      const total = solvedTicket + unsolvedTicket

      if (!total) return [ { item: '无数据', count: 1, percent: 1 } ]

      const solvedPercent = Number(solvedTicket / total).toFixed(2) - 0

      return [
        {
          item: '已解决',
          count: solvedTicket,
          percent: solvedPercent
        },
        {
          item: '未解决',
          count: unsolvedTicket,
          percent: Number(1 - solvedPercent).toFixed(2) - 0
        },
      ]
    },
    data2 () {
      // 总单, 没有使用返回值
      let { todayComplaintTicket = 0, todayRepairTicket = 0, todayContactTicket = 0 } = (this.IndexInfo || {}).todayMap || {}
      
      if (process.env.NODE_ENV == 'development') {
        todayComplaintTicket = 10
        todayRepairTicket = 20
        todayContactTicket = 30
      }

      const total = todayComplaintTicket + todayRepairTicket + todayContactTicket

      if (!total) return [ { item: '无数据', count: 1, percent: 1 } ]

      const p1 = Number(todayComplaintTicket / total).toFixed(2) - 0
      const p2 = Number(todayRepairTicket / total).toFixed(2) - 0
      const p3 = Number(1 - p1 - p2).toFixed(2) - 0

      return [
        {
          item: '投诉',
          count: todayComplaintTicket,
          percent: p1
        },
        {
          item: '报修',
          count: todayRepairTicket,
          percent: p2
        },
        {
          item: '联系',
          count: todayContactTicket,
          percent: p3
        },
      ]
    },
    data4 () {
      let billList = (this.IndexInfo || {}).billInvoiceCountList || []

      return billList.map(({ createDate, priceTotal }) => {
        return ({
          item: dayjs(createDate).format('M.D'),
          value: priceTotal,
        })
      })
    },
    data5 () {
      let billList = (this.IndexInfo || {}).taUserLicenseCountList || []

      return billList.map(({ createDate, priceTotal }) => {
        return ({
          item: dayjs(createDate).format('M.D'),
          value: priceTotal,
        })
      })
    },
    data6 () {
      let billList = (this.IndexInfo || {}).taTemporaryLicenseCountList || []

      return billList.map(({ createDate, priceTotal }) => {
        return ({
          item: dayjs(createDate).format('M.D'),
          value: priceTotal,
        })
      })
    },
    data7 () {
      let { houseOwnerCount = 0, houseRelationCount = 0, houseTenantCount = 0 } = (this.IndexInfo || {}).registerUserMap || {}

      return [
        {
          item: '户主',
          value: houseOwnerCount,
        },
        {
          item: '家属',
          value: houseRelationCount,
        },
        {
          item: '租客',
          value: houseTenantCount,
        },
      ]
    },
    data8 () {
      let usrList = (this.IndexInfo || {}).taBriskUserList || []

      return usrList.map(({ createDate, briskCount }) => {
        return ({
          item: dayjs(createDate).format('M.D'),
          value: briskCount,
        })
      })
    },
    data9 () {
      let { activityCount = 0, announcementCount = 0, topicCount = 0 } = (this.IndexInfo || {}).publishContentMap || {}

      return [
        {
          item: '活动',
          value: activityCount,
        },
        {
          item: '公告',
          value: announcementCount,
        },
        {
          item: '话题',
          value: topicCount,
        },
      ]
    },
  },
  methods: {
    ...mapActions("trunkIndex", ["getIndexCount"])
  },
  created() {
    this.getIndexCount().then(() => {
      console.log(this.IndexInfo);

      this.hardwaremap = this.IndexInfo.hardwareMap; //chart3
    });
  }
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  height: 920px;
  background: #16191c;
  padding: 8px;
  .left,
  .middle,
  .right {
    flex: 2;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    div {
      flex: 1;
      margin: 8px;
      background: #2c343a;
      border-radius: 5px;
      overflow: hidden;
    }
  }
  .middle {
    flex: 2;
    height: 905px;
  }
}
</style>
