<template>
  <div class="hone-content-box">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <div class="icon" style="background-color:#1890ff;"><a-icon type="area-chart" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">已缴水费</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.waterFeePaidTotal}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <div class="icon" style="background-color:#7262fd;"><a-icon type="pie-chart" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">已缴电费</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.electricFeePaidTotal}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <div class="icon" style="background-color:#ffaa00;"><a-icon type="bar-chart" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">已缴燃气费</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.gasFeePaidTotal}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <div class="statistics">
          <div class="icon" style="background-color:#52c41a;"><a-icon type="dot-chart" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">已缴暖气费</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.heatFeePaidTotal}}</p>
          </div>
        </div>
      </a-col>

    </a-row>
    <a-row :gutter="24">
      <div class="pay-cost t-box">
        <div class="pay-cost-tit">水费统计</div>
        <a-col :sm="24" :md="12" :xl="12">
          <pie :dataSource="dataSource1" />
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <pie :dataSource="dataSource2" />
        </a-col>
      </div>
    </a-row>
    <a-row :gutter="24">
      <div class="pay-cost t-box">
        <div class="pay-cost-tit">电费统计</div>
        <a-col :sm="24" :md="12" :xl="12">
          <pie :dataSource="dataSource3" />
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <pie :dataSource="dataSource4" />
        </a-col>
      </div>
    </a-row>
    <a-row :gutter="24">
      <div class="pay-cost t-box">
        <div class="pay-cost-tit">燃气费统计</div>
        <a-col :sm="24" :md="12" :xl="12">
          <pie :dataSource="dataSource5" />
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <pie :dataSource="dataSource6" />
        </a-col>
      </div>
    </a-row>
    <a-row :gutter="24">
      <div class="pay-cost t-box">
        <div class="pay-cost-tit">暖气费统计</div>
        <a-col :sm="24" :md="12" :xl="12">
          <pie :dataSource="dataSource7" />
        </a-col>
        <a-col :sm="24" :md="12" :xl="12">
          <pie :dataSource="dataSource8" />
        </a-col>
      </div>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
        <div class="salesCard t-box">
          <!-- <h3 class="box-title">缴费统计</h3> -->
          <div class="extra-type">
            <a-radio-group @change="handleSizeChange" :value="typeCode">
              <a-radio-button value="1">水费</a-radio-button>
              <a-radio-button value="2">电费</a-radio-button>
              <a-radio-button value="3">燃气费</a-radio-button>
              <a-radio-button value="4">暖气费</a-radio-button>
              <a-radio-button value="5">已缴金额</a-radio-button>
            </a-radio-group>
          </div>
          <div>
            <bar :dataSource="barData" style="padding: 0;" />
          </div>
        </div>
      </a-col>
    </a-row>

  </div>
</template>

<script>
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import { paymentStatistics, companyNoticeList } from '@/api/api'

// const barData = []
// for (let i = 0; i < 12; i += 1) {
//   barData.push({
//     x: `${i + 1}月`,
//     y: 1000,
//   })
// }
export default {
  name: 'Analysis',
  components: {
    Bar,
    Pie,
  },
  data() {
    return {
      pageForm: {},
      loading: true,
      dataSource1:[],
      dataSource2:[],
      dataSource3:[],
      dataSource4:[],
      dataSource5:[],
      dataSource6:[],
      dataSource7:[],
      dataSource8:[],
      typeCode: '1',
      repairData: [],
      complaintsData: [],
      barData: [],
      visible: false,
    }
  },
  created() {
    this.onDetail('1')
  },
  methods: {
    async onDetail(typeCode) {
      let { result } = await paymentStatistics({ beginDate: '', endDate: '' })
      this.pageForm = { ...result }
      this.barData = result.monthlyStatistics.map((item) => {
        var num = '';
        if(typeCode == '1'){
          num =  item.waterFeePaidTotal
        }else if(typeCode == '2'){
          num =  item.electricFeePaidTotal
        }else if(typeCode == '3'){
          num =  item.gasFeePaidTotal
        }else if(typeCode == '4'){
          num =  item.heatFeePaidTotal
        }else if(typeCode == '5'){
          num =  item.totalAmount
        }
        return {
          x: item.monthNum + '月',
          y: num
        }
      })
      this.dataSource1 = [
        { item: '未缴总金额', count: result.waterFeeUnPaidTotal || 0 },
        { item: '已缴总金额', count: result.waterFeePaidTotal || 0 },
      ]
      this.dataSource2 = [
        { item: '未缴纳业主', count: result.waterFeeUnPaidOwnerNum || 0 },
        { item: '已缴纳业主', count: result.waterFeePaidOwnerNum || 0 },
      ]
      this.dataSource3 = [
        { item: '未缴总金额', count: result.electricFeeUnPaidTotal || 0 },
        { item: '已缴总金额', count: result.electricFeePaidTotal || 0 },
      ]
      this.dataSource4 = [
        { item: '未缴纳业主', count: result.electricFeeUnPaidOwnerNum || 0 },
        { item: '已缴纳业主', count: result.electricFeePaidOwnerNum || 0 },
      ]
      this.dataSource5 = [
        { item: '未缴总金额', count: result.gasFeeUnPaidTotal || 0 },
        { item: '已缴总金额', count: result.gasFeePaidTotal || 0 },
      ]
      this.dataSource6 = [
        { item: '未缴纳业主', count: result.gasFeeUnPaidOwnerNum || 0 },
        { item: '已缴纳业主', count: result.gasFeePaidOwnerNum || 0 },
      ]
      this.dataSource7 = [
        { item: '未缴总金额', count: result.heatFeeUnPaidTotal || 0 },
        { item: '已缴总金额', count: result.heatFeePaidTotal || 0 },
      ]
      this.dataSource8 = [
        { item: '未缴纳业主', count: result.heatFeeUnPaidOwnerNum || 0 },
        { item: '已缴纳业主', count: result.heatFeePaidOwnerNum || 0 },
      ]
      this.loading = !this.loading
    },
    handleSizeChange(e) {
      let that = this
      this.typeCode = e.target.value
      that.onDetail(this.typeCode)
    },
  },
}
</script>
<style lang="less" scoped>
.hone-content-box {
  padding: 10px;
  .statistics {
    // flex: none;
    background: #fff;
    width: 100%;
    height: 90px;
    box-sizing: border-box;
    border: 1px solid #e0dfdf;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .icon {
      width: 50px;
      height: 50px;
      border-radius: 50px;
      margin-right: 12px;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      .anticon {
        font-size: 26px;
        color: #ffffff;
      }
    }
  }

  .pay-box {
    display: flex;
    .left-box {
      flex: none;
      width: 50%;
    }
  }
}
.t-box {
  background: #fff;
  padding: 15px;
  border: 1px solid #e0dfdf;
}
.box-title {
  font-weight: bold;
  margin-bottom: 15px;
  display: inline-block;
  padding-left: 10px;
  border-left: 3px solid #1890ff;
  height: 20px;
  line-height: 20px;
}
.pay-cost {
  height: 280px;
  padding: 50px 0 0;
  margin: 0 12px;
  position: relative;
  .pay-cost-tit {
    writing-mode: vertical-rl;
    position: absolute;
    padding: 0 12px;
    text-align: center;
    background: #dcedff;
    height: 278px;
    top: 0;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 12px;
  }
}

.salesCard {
  height: 380px;
}
.extra-type {
  text-align: center;
  a {
    margin-right: 20px;
  }
}
.number {
  width: 80%;
  margin: 0 10%;
  display: flex;
  justify-content: space-evenly;
  p {
    font-size: 14px;
    margin: 0;
  }
}
</style>