<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="team" /></div>
          <!-- <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">
          <div class="icon" style="background-color:#7262fd;"><a-icon type="home" /></div>
          <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">
          <div class="icon" style="background-color:#ffaa00;"><a-icon type="bank" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">楼栋总数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.buildingNum}}</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="pay-circle" /></div>
          <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' }">
        <div class="to-do t-box">
          <h3 class="box-title">待办事项</h3>
          <div class="todo-list">
            <div class="item">
              <p>入驻业主待审核</p>
              <p>{{pageForm.waitAuditOwnerNum}} 家</p><a-button type="primary" size="small" @click="toOperation(1)"
                :disabled="pageForm.waitAuditOwnerNum == 0">去处理</a-button>
            </div>
            <div class="item">
              <p>租户物业费催缴</p>
              <p>{{pageForm.waitCallPropertyFee}} 家</p><a-button type="primary" size="small" @click="toOperation(2)"
                :disabled="pageForm.waitCallPropertyFee == 0">去处理</a-button>
            </div>
            <div class="item">
              <p>业主投诉待处理</p>
              <p>{{pageForm.waitHandle}} 家</p><a-button type="primary" size="small" @click="toOperation(3)"
                :disabled="pageForm.waitHandle == 0">去处理</a-button>
            </div>
            <div class="item">
              <p>业主报修待处理</p>
              <p>{{pageForm.waitDispatch}} 家</p><a-button type="primary" size="small" @click="toOperation(4)"
                :disabled="pageForm.waitDispatch == 0">去处理</a-button>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <div class="announcement t-box">
          <div class="title">
            <h3 class="box-title">最新公告</h3><a-button size="small" @click="toMore()">查看更多</a-button> <a-button
              size="small" @click="toMore()">发布公告</a-button>
          </div>
          <ul>
            <li v-for="(item, index) in noticeList" :key="index"><a @click="toDetails(item)">{{ item.noticeTitle}}</a>
              <p>{{ item.createTime.slice(0,10)}}</p>
            </li>
          </ul>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
        <div class="quick t-box">
          <h3 class="box-title">快速新建</h3>
          <div class="todo-list">
            <div class="item" @click="toQuick(1)"><a-icon type="bank" />
              <p>新建楼宇</p>
            </div>
            <div class="item" @click="toQuick(2)"><a-icon type="user-add" />
              <p>新建业主</p>
            </div>
            <div class="item" @click="toQuick(3)"><a-icon type="home" />
              <p>新建房屋</p>
            </div>
            <div class="item" @click="toQuick(4)"><a-icon type="user" />
              <p>雇员管理</p>
            </div>
            <div class="item" @click="toQuick(5)"><a-icon type="pay-circle" />
              <p>物业费查询</p>
            </div>
            <div class="item" @click="toQuick(6)"><a-icon type="money-collect" />
              <p>生活费查询</p>
            </div>
            <div class="item" @click="toQuick(7)"><a-icon type="tool" />
              <p>报修处理</p>
            </div>
            <div class="item" @click="toQuick(8)"><a-icon type="question-circle" />
              <p>投诉处理</p>
            </div>
            <div class="item" @click="toQuick(9)"><a-icon type="form" />
              <p>发布公告</p>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="12" :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="SFLX00001">物业费</a-radio-button>
              <a-radio-button value="SFLX00002">水费</a-radio-button>
              <a-radio-button value="SFLX00003">电费</a-radio-button>
              <a-radio-button value="SFLX00004">燃气费</a-radio-button>
              <a-radio-button value="SFLX00005">暖气费</a-radio-button>
            </a-radio-group>
          </div>
          <div>
            <bar :dataSource="barData" style="padding: 0;" />
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <div class="pay-cost t-box">
          <h3 class="box-title">缴费率</h3>
          <pie :dataSource="payData" style="margin-top: 40px;" />
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <div class="pay-cost t-box">
          <h3 class="box-title">报修统计</h3>
          <pie :dataSource="repairData" />
          <div class="number">
            <p>全部报修 {{pageForm.repairTotal}}</p>
            <p v-for="(item, index) in repairData" :key="index">{{ item.item }} {{ item.count }}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <div class="pay-cost t-box">
          <h3 class="box-title">投诉统计</h3>
          <pie :dataSource="complaintsData" />
          <div class="number">
            <p>全部投诉 {{pageForm.complaintTotal}}</p>
            <p v-for="(item, index) in complaintsData" :key="index">{{ item.item }} {{ item.count }}</p>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-modal :title="noticeTitle" :visible="visible" @cancel="handleCancel" :footer="null" width="40%">
      <p v-html="noticeContent "></p>
    </a-modal>
  </div>
</template>

<script>
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import { homeDataStatistics, 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,
      payData: [],
      noticeList: [],
      typeCode: 'SFLX00001',
      repairData: [],
      complaintsData: [],
      barData: [],
      noticeTitle: '',
      noticeContent: '',
      visible: false,
    }
  },
  created() {
    this.onDetail()
    this.companyNotice()
  },
  methods: {
    async onDetail(typeCode) {
      let { result } = await homeDataStatistics({ typeCode: typeCode })
      this.pageForm = { ...result }
      this.payData = [
        { item: '物业费', count: result.propertyFeeRate || 0 },
        { item: '水费', count: result.waterRate || 0 },
        { item: '电费', count: result.electricRate || 0 },
        { item: '燃气费', count: result.gasFeeRate || 0 },
        { item: '暖气费', count: result.heatFeeRate || 0 },
      ]
      this.barData = result.monthlyStatistics.map((item) => {
        return {
          x: item.monthNum + '月',
          y: item.totalMoney,
        }
      })
      this.repairData = [
        // { item: '全部报修', count: result.repairTotal || 0 },
        // { item: '待派单', count: result.waitDispatch || 0 },
        { item: '未完成', count: result.repairTotal - result.repairOver || 0 },
        { item: '已完成', count: result.repairOver || 0 },
      ]
      this.complaintsData = [
        // { item: '全部投诉', count: result.complaintTotal || 0 },
        { item: '待处理', count: result.waitHandle || 0 },
        { item: '已完成', count: result.complaintOver || 0 },
      ]
      this.loading = !this.loading
    },
    async companyNotice() {
      let { result } = await companyNoticeList({ pageNo: 1, pageSize: 5, order: 'desc', column: 'createTime' })
      this.noticeList = result.records
    },
    toOperation(type) {
      if (type == 1) {
        this.$router.push({
          path: '/information/owner',
        })
      } else if (type == 2) {
        this.$router.push({
          path: '/property/living',
        })
      } else if (type == 3) {
        this.$router.push({
          path: '/property/complaint',
        })
      } else if (type == 4) {
        this.$router.push({
          path: '/property/maintenance',
        })
      }
    },
    toQuick(type) {
      if (type == 1) {
        this.$router.push({
          path: '/information/building',
        })
      } else if (type == 2) {
        this.$router.push({
          path: '/information/owner',
        })
      } else if (type == 3) {
        this.$router.push({
          path: '/information/house',
        })
      } else if (type == 4) {
        this.$router.push({
          path: '/information/worker',
        })
      } else if (type == 5) {
        this.$router.push({
          path: '/property/living',
        })
      } else if (type == 6) {
        this.$router.push({
          path: '/property/living',
        })
      } else if (type == 7) {
        this.$router.push({
          path: '/property/maintenance',
        })
      } else if (type == 8) {
        this.$router.push({
          path: '/property/complaint',
        })
      } else if (type == 9) {
        this.$router.push({
          path: '/property/advertisement',
        })
      }
    },
    toMore() {
      this.$router.push({
        path: '/property/advertisement',
      })
    },
    toDetails(item) {
      this.noticeTitle = item.noticeTitle
      this.noticeContent = item.noticeContent
      this.visible = true
    },
    handleCancel(e) {
      this.visible = false
    },
    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: 60px;
      height: 60px;
      border-radius: 60px;
      margin-right: 12px;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      .anticon {
        font-size: 32px;
        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: 380px;
}
.announcement {
  height: 220px;
  .title {
    .ant-btn {
      float: right;
      margin-left: 10px;
    }
  }
  ul {
    padding-left: 5px;
    li {
      list-style-type: none;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      a {
        color: #666;
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.salesCard {
  height: 380px;
}
.extra-type {
  a {
    margin-right: 20px;
  }
}
.number {
  width: 80%;
  margin: 0 10%;
  display: flex;
  justify-content: space-evenly;
  p {
    font-size: 14px;
    margin: 0;
  }
}
.to-do {
  height: 220px;
  .todo-list {
    padding: 0 10px;
    margin-top: 15px;
    .item {
      display: flex;
      justify-content: space-between;
    }
  }
}
.quick {
  height: 165px;
  .todo-list {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
    .item {
      margin: 0 10px;
      display: flex;
      flex-direction: column;
      text-align: center;
      cursor: pointer;
      .anticon {
        font-size: 40px;
        color: #007dff;
      }
      p {
        margin-top: 8px;
      }
    }
  }
}
</style>