<template>
  <div class="hone-content-box">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <img class="icon" src="~@/assets/guaz.png" alt="">
          <div>
            <p style="color:#666;margin-bottom:5px;">小区总数</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.communityNum}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <img class="icon" src="~@/assets/guaz.png" alt="">
          <div>
            <p style="color:#666;margin-bottom:5px;">房屋总数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.roomNum}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <img class="icon" src="~@/assets/guaz.png" alt="">
          <div>
            <p style="color:#666;margin-bottom:5px;">住户总数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.ownerNum}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <img class="icon" src="~@/assets/guaz.png" alt="">
          <div>
            <p style="color:#666;margin-bottom:5px;">年度累计已缴物业费</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.propertyYearFee}}</p>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <pie title="缴费率" :dataSource="pieData" />
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <div>
          <h5>园区公告</h5>
          <ul>
            <li>清明节放假通知，213231312313</li>
            <li>5月1日停电通知，因1233233 园区公告 清明节放假通知，21323131231323233</li>
          </ul>
        </div>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <div class="extra-type">
          <a>物业</a>
          <a>水费</a>
          <a>电费</a>
          <a>燃气费</a>
        </div>
        <div>
          <bar :dataSource="barData"/>
        </div>
      </div>
    </a-card>

    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <pie title="报修统计" :dataSource="pieData" />
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <pie title="投诉统计" :dataSource="pieData" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import Bar from '@/components/chart/Bar'
  import Pie from '@/components/chart/Pie'
  import { homeDataStatistics } from "@/api/api"

  const barData = []
  for (let i = 0; i < 12; i += 1) {
    barData.push({
      x: `${i + 1}月`,
      y: Math.floor(Math.random() * 1000) + 200
    })
  }
  export default {
    name: "Analysis",
    components: {
      Bar,
      Pie
    },
    data() {
      return {
        pageForm: {},
        loading: true,
        barData,
        pieData: [
          { item: '物业费', count: 40 },
          { item: '水费', count: 21 },
          { item: '电费', count: 17 },
          { item: '燃气费', count: 13 },
          { item: '停车费', count: 9 }
        ]
      }
    },
    created() {
      this.onDetail()
    },
    methods: {
      async onDetail() {
        let {result} = await homeDataStatistics()
        this.pageForm = {...result}
        this.loading = !this.loading

        // //当前物业公司小区数量
        // private Integer communityNum;
        // //当前物业公司房屋数量
        // private Integer roomNum;
        // //当前物业公司业主数量
        // private Integer ownerNum;
        // //当前物业公司累积缴纳物业费
        // private BigDecimal propertyYearFee;
        // //物业费占比
        // private BigDecimal propertyFeeRate;
        // //水费占比
        // private BigDecimal waterRate;
        // //电费占比
        // private BigDecimal electricRate;
        // //暖气费占比
        // private BigDecimal gasFeeRate;
        // //按月统计费用
        // private List<MonthlyStatisticsVo> monthlyStatistics;
        // //报修总数
        // private Integer repairTotal;
        // //报修待派单数量
        // private Integer waitDispatch;
        // //报修维修中数量
        // private Integer inRepair;
        // //报修完成数量
        // private Integer repairOver;
        // //全部投诉数量
        // private Integer complaintTotal;
        // //投诉待处理数量
        // private Integer waitHandle;
        // //投诉已处理数量
        // private Integer complaintOver;
      }
    }
  }
</script>
<style lang="less" scoped>
.hone-content-box {
  background-color: #fff;
  padding: 16px;
  .statistics {
      // flex: none;
      width: 100%;
      height: 90px;
      box-sizing: border-box;
      border: 1px solid #e0dfdf;
      display: flex;
      align-items: center;
      padding-left: 20px;
      .icon {
        width: 64px;
        height: 64px;
        margin-right: 12px;
      }
    }
  
  .pay-box {
    display: flex;
    .left-box {
      flex: none;
      width: 50%;
    }
  }
}
</style>