<template>
  <div id="home" class="layoutPadding">
      <a-row type="flex"  class="align-stretch">
        <a-col :span="21">
          <a-row type="flex" style="padding-right:10px;height:100%;">
            <a-col :span="6">
              <div class="home-card topBox" style="margin-right:10px;">
                <div class="justify-between topBox" >
                  <div>
                    <p class="top-font" >小区数</p>
                    <span class="top-count" >{{data.community}}</span>
                  </div>
                  <div class="align-center" >
                    <img src="@/assets/icon/xqs.png" style="width:50px;" alt="">
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="home-card topBox" style="margin:0px 10px;">
                <div class="justify-between topBox" >
                  <div>
                    <p class="top-font" >门牌幢数</p>
                    <span class="top-count" >{{data.building}}</span>
                  </div>
                  <div class="align-center" >
                    <img src="@/assets/icon/mpzs.png" style="width:50px;" alt="">
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="home-card topBox" style="margin:0px 10px;">
                <div class="justify-between topBox" >
                  <div>
                    <p class="top-font" >物业企业数</p>
                    <span class="top-count" >{{data.company}}</span>
                  </div>
                  <div class="align-center" >
                    <img src="@/assets/icon/wyqys.png" style="width:50px;" alt="">
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="home-card topBox" style="margin-left:10px;">
                <div class="justify-between topBox" >
                  <div>
                    <p class="top-font" >业委会数</p>
                    <span class="top-count" >{{data.ic}}</span>
                  </div>
                  <div class="align-center" >
                    <img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
                  </div>
                </div>
              </div>
            </a-col> 
          </a-row>
        </a-col>
        <a-col :span="3">
          <div style="margin-left:10px;">
            <a-row>
              <div class="home-card middle-right" @click="$router.push({path: '/houseData/basicInfo'})">
                <img src="@/assets/icon/xqda.png" style="width:20px;" alt="">
                <p>小区档案</p>
              </div>
            </a-row>
            <a-row>
              <div class="home-card middle-right" @click="$router.push({path: '/houseData/propertyInfo'})" style="margin-top:20px;">
                <img src="@/assets/icon/wyqyda.png" style="width:20px;" alt="">
                <p>物业企业档案1</p>
              </div>
            </a-row>
          </div>
          <!-- <div style="height:100%;margin-left:10px;">
            <div class="home-card middle-right" @click="$router.push({path: '/houseData/basicInfo'})">
              <img src="@/assets/icon/xqda.png" style="width:40px;" alt="">
              <p>小区档案</p>
            </div>
            <div class="home-card middle-right" @click="$router.push({path: '/houseData/propertyInfo'})" style="margin-top:20px;">
              <img src="@/assets/icon/wyqyda.png" style="width:40px;" alt="">
              <p>物业企业档案</p>
            </div>
          </div> -->
        </a-col>
        <!-- <a-col :span="3">
          <div style=" margin-left:10px;"> 
            <div class="home-card middle-right" @click="toFangXunFangTai">
              <img src="@/assets/icon/fxft.png" style="width:40px;" alt="">
              <p>防汛防台</p>
            </div>
          </div>
        </a-col> -->
      </a-row>
  </div>
</template>

<script>
import ok from '@/assets/icon/ok.png'
import nm from '@/assets/icon/nm.png' 
import qs from 'qs'
import axios from 'axios'

export default {
  name: 'HomePage',
  data() {
    return{
      ok,
      nm,
      date: new Date(),
      data: {},
      openConfig: false,
      disposal: {},
      nowMonth: '本月',
      checkStreet: 0,
      totStreet: 0,
      mounth: [
        {name: '1月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '2月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '3月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '4月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '5月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '6月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '7月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '8月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '9月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '10月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '11月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '12月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
      ],
      theme: 0,
      sect: 0,
      receipts: 0,
      people: [],
      tousuQuestionList: {
        M: [],
        Y: [],
        S: [],
      },
      tousuDensityList: {
        M: [],
        Y: [],
        S: [],
      },
      repair: {
        yjwhtotal: 0, //应急维护总数
        yjwhcomplete: 0, //应急维护已完成数
        yjwhreceiveratio: 0, //应急维护接单率
        yjwhhandleratio: 0, //应急维护处置率
        wybxtotal: 0, //物业保修总数
        wybxcomplete: 0, //物业报修已完成率
        wybxreceiveratio: 0, //物业保修接单率
        wybxhandleratio: 0, //物业报修处置率
      },
      activeKey: '1',
      activeKey2: '1',
    }
  },
  created(){},
  mounted(){
    this.getList()
    this.getConfig()
    this.getDisposal()
    this.getHouthMonth()
    this.getCheckData()
    this.getCheckPeople()
    this.getSectNum()
    this.getReceiptsNum()
    this.getRepair()
    this.getTousuQuestion('M')
    this.getTousuQuestion('Y')
    this.getTousuQuestion('S')
    this.getTousuDensity('M')
    this.getTousuDensity('Y')
    this.getTousuDensity('S')
  },
  methods: {
    /**
     * 点击月份
     */
    checkMonth(item){
      this.nowMonth = item.name
      this.checkStreet = item.checkStreet 
      for(let i=0;i<this.mounth.length;i++){
        if(this.mounth[i].name == item.name){
          this.mounth[i].class='hadCheckMonth'
        }else{
          this.mounth[i].class=''
        }
      }
    },
    hoverMonth(item){
      this.$router.push({
        name: 'month',
        query: {
          month: parseInt(item.name)
        }
      })
    },
    /**
     * 获取dashboard数据
     */
    getList(){
      this.$ajax.get({
        url: this.$api.GET_RESOURE_LIST,
      }).then(res => {
        if (res.code === '200') {
          this.data = this.$com.confirm(res, 'data.content', []) 
        }
      })
    },
    /**
     * 获取房办月查统计
     */
    getHouthMonth(){
      this.$ajax.get({
        url: this.$api.GET_HOUSE_MONTH,
      }).then(res => {
        if (res.code === '200') {
          let cont = this.$com.confirm(res, 'data.content', []) 
          this.totStreet = cont[0].totStreet
          for(let i=0;i<cont.length;i++){
            if(cont[i] && cont[i].month && cont[i].month>0){
              this.mounth[cont[i].month-1].check=true
              this.mounth[cont[i].month-1].checkStreet=cont[i].checkStreet
              this.mounth[cont[i].month-1].totStreet=cont[i].totStreet
            }
          } 
          let num = Number(this.$moment(this.date).format('MM'))
          this.mounth[num-1].class='hadCheckMonth'
          this.nowMonth = this.mounth[num-1].name
          this.checkStreet = this.mounth[num-1].checkStreet
        }
      })
    },
    /**
     * 获取以及报修统计
     */
    getRepair(){
      this.$ajax.get({
        url: this.$api.GET_REPAIR_STATISTICS,
      }).then(res => {
        if (res.code === '200') {
          this.repair = this.$com.confirm(res, 'data.content', [])
        }else{
          this.$message.error(res.msg, 10)
        }
      })
    },
    /**
     * 获取专项检查数据
     */
    getCheckData(){ 
      const Axios = axios.create({
        baseURL: this.$api.BASE_URL,
        timeout: 15000,
      })
      let config = {
        method: 'post',
        url: this.$api.GET_CHWECK_DATA,
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      }
      let params= {
        pageNo: 1,
        pageSize: 10000,
        flag: '0',
        someday: this.$moment(this.date).format('YYYY')+this.$moment(this.date).format('MM')+this.$moment(this.date).format('DD'),
        hpb_id: '310104000000'
      }
      config = Object.assign(config, { data: qs.stringify(params) })

      Axios(config)
        .then(res => { 
          if (res.data.code === '200') {
            let data = this.$com.confirm(res, 'data.data.content', []) 
            this.theme=0
            for(let i=0;i<data.length;i++){
              if(data[i].THEMETYPE == '专项'){
                this.theme+=1
              }
            } 
          }
        }).catch(err => {
          this.$message.error(err.data.msg)
        })
    },
    /**
     * 获取检查人员数据
     */
    getCheckPeople(){ 
      let date= new Date()
      let startDate=this.$moment(date).format('YYYY-MM-DD')+' 00:00:00'
      let endDate=this.$moment(date).format('YYYY-MM-DD')+' 24:00:00'
      const Axios = axios.create({
        baseURL: this.$api.BASE_URL,
        timeout: 15000,
      })
      let config = {
        method: 'post',
        url: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/getInspectors',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      }
      let params= {
        pageNo: 1,
        pageSize: 10000,
        startDate: startDate,
        endDate: endDate,
        hpb_id: '310104000000'
      }
      config = Object.assign(config, { data: qs.stringify(params) })

      Axios(config)
        .then(res => {  
          if (res.data.code === '200') {
            let data = this.$com.confirm(res, 'data.data.content', [])  
            if(data.lenght>8){
              this.people=data.slice(0, 7)
            }else{
              this.people=data
            }
          }
        }).catch(err => {
          this.$message.error(err.data.msg)
        })
    },
    /**
     * 获取已完成检查小区
     */
    getSectNum(){
      const Axios = axios.create({
        baseURL: this.$api.BASE_URL,
        timeout: 15000,
      })
      let config = {
        method: 'post',
        url: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/sectListForOneDay',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      }
      let params= {
        pageNo: 1,
        pageSize: 10000,
        someday: this.$moment(this.date).format('YYYY')+this.$moment(this.date).format('MM')+this.$moment(this.date).format('DD'),
        hpb_id: '310104000000'
      }
      config = Object.assign(config, { data: qs.stringify(params) })

      Axios(config)
        .then(res => {  
          this.sect =res.data.data.totalRows 
        }).catch(err => {
          this.$message.error(err.data.msg)
        }) 
    },
    /**
     * 获取已开整改单
     */
    getReceiptsNum(){ 
      const Axios = axios.create({
        baseURL: this.$api.BASE_URL,
        timeout: 15000,
      })
      let config = {
        method: 'post',
        url: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/sectListForOneDay',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      }
      let params= {
        pageNo: 1,
        pageSize: 10000,
        isPublish: '1',
        someday: this.$moment(this.date).format('YYYY')+this.$moment(this.date).format('MM')+this.$moment(this.date).format('DD'),
        hpb_id: '310104000000'
      }
      config = Object.assign(config, { data: qs.stringify(params) })

      Axios(config)
        .then(res => {
          this.receipts =res.data.data.totalRows 
        }).catch(err => {
          this.$message.error(err.data.msg)
        }) 
    },
    /**
     * 获取处置单统计
     */
    getDisposal(){
      this.$ajax.get({
        url: this.$api.GET_HOME_DISPOSAL,
      }).then(res => {
        if (res.code === '200') {
          this.disposal = this.$com.confirm(res, 'data.content', [])
        }
      })
    },
    /**
     * 判断是否开启自定义字段
     */
    getConfig(){
      this.$ajax.get({
        url: this.$api.GET_CONFIG,
      }).then(res => {
        if (res.code === '200') {
          this.openConfig = this.$com.confirm(res, 'data.content', []).customKeyEnable
          // 是否开启自定义字段存入cookie
          this.$cookie.set('customKeyEnable', this.openConfig)
        }
      })
    },
    //调接口跳转专项检查页面
    toFangXunFangTai(){
      this.$ajax.get({
        url: this.$api.GET_JIANCHADIZHI,
      }).then(res => { 
        window.open(res)
      })
    },
    openOutUrl1(){
      window.open('http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/web/dataV/riskmanagement/#/') 
    },
    openOutUrl2(){
      this.$ajax.get({
        url: this.$api.GET_WYGENERATE,
      }).then(res => {  
        window.open(res)
      })
    },
    /**
     * 去应急报修
     * @params {bxmaintainType} string
     */
    toRepair(bxmaintainType, signStatus){
      this.$router.push({
        name: 'repairList',
        query: {
          bxmaintainType: bxmaintainType,
          signStatus: signStatus
        }
      })
    },
    /**
     * 改变投诉的tab的key
     */
    changeTabKey(key, num){ 
      if(num == 1){
        this.activeKey = key
      }else if(num == 2){
        this.activeKey2 = key
      } 
    },
    /**
     * 获取投诉问题排行
     */
    getTousuQuestion(type){
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()+1 
      const params = {}
      if(type == 'M'){
        params.type = 'A' 
        params.tsMonthly = year + '' + (String(month).length==1?'-0'+month:'-'+month)
      }else if(type == 'Y'){
        params.type = 'Y' 
        params.dateTime = year + ''
      }else if(type == 'S'){
        params.type = 'S' 
      }  
      params.tsNum_desc = 'desc'
      params.pageNo = 1
      params.pageSize = 8
      this.$ajax.get({
        url: this.$api.GET_TOUSUQUESTION_LIST,
        params: params
      }).then(res => {   
        if (res.code === '200') {
          this.tousuQuestionList[type] = this.$com.confirm(res, 'data.content.content', [])
        }
      })
    },
    /**
     * 获取投诉密度排行
     */
    getTousuDensity(type){
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()+1 
      const params = {}
      if(type == 'M'){
        params.type = 'A' 
        params.dateTime = year + '' + (String(month).length==1?'-0'+month:'-'+month)
      }else if(type == 'Y'){ 
        params.type = 'Y' 
        params.dateTime = year + ''
      }else if(type == 'S'){ 
        params.type = 'S' 
        params.dateTime = '20'
      } 
      params.pageNo = 1
      params.pageSize = 8
      this.$ajax.get({
        url: this.$api.GET_TOUSUDENSITY_LIST,
        params: params
      }).then(res => {  
        if (res.code === '200') {
          this.tousuDensityList[type] = this.$com.confirm(res, 'data.content.content', [])
        }
      })
    },
    /**
     * 去投诉 
     */
    toTousu(){ 
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()+1 
      const query = {}
      if(this.activeKey == '1'){
        if(this.activeKey2=='1'){
          query.type = 'M'
          query.tsMonthly = year + '' + (String(month).length==1?'-0'+month:'-'+month)
        }else if(this.activeKey2=='2'){
          query.type = 'Y'
          query.dateTime = year + '' 
        }else if(this.activeKey2=='3'){
          query.type = 'S' 
        }
        this.$router.push({
          name: 'tousuQuestion',
          query: query
        })
      }else if(this.activeKey == '2'){
        if(this.activeKey2=='1'){
          query.type = 'M'
          query.tsMonthly = year + '' + (String(month).length==1?'-0'+month:'-'+month)
        }else if(this.activeKey2=='2'){
          query.type = 'Y'
          query.dateTime = year + '' 
        }else if(this.activeKey2=='3'){
          query.type = 'S' 
        }
        this.$router.push({
          name: 'tousuDensity',
          query: query
        })
      }
    },
  },
}
</script>

<style>

#home {
  width: 100%;
}
.home-card{
  background: #fff;
  padding: 15px;
}
.topBox{
  height: 100%;
}
.top-font{
  color:#818283;
  font-size:14px;
  margin-bottom:3px;
}
.top-count{
  color:#000;
  font-size:28px;
  font-weight:600;
  line-height:34px;
}
.middle-right{
  text-align:center;
  height: calc(50% - 10px);
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  cursor: pointer;
}
.middle-right p{
  font-size:14px;
  margin:5px 0px 0px 0px;
  font-weight:600;
}

.month{
  height:100%;
  background:#fff;
  margin-right:10px;
}
.monthTitle>span:first-child{
  font-weight:600;
  font-size:16px;
}
.monthTitleNum{
  font-size:16px;
  color:#0E7CFF;
  font-weight:600;
  vertical-align: baseline;
}
.monthBox{
  height:calc(100% - 55px);
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items: stretch;
}
.monthImg{
  margin:10%;
  padding-top: calc(40% - 11px);
  padding-bottom: calc(40% - 11px);
  text-align:center;
  cursor: pointer;
  border:1px solid transparent;
  border-radius: 14%;
  position: relative;
}
.monthHover{
  z-index:999;
  position:absolute;
  bottom:0px;
  left:0;
  height:50%;
  background: rgba(0,0,0,0.5);
  width: 100%;
  color: #fff;
  border-radius: 0 0 14% 14%;
  display:none;
  line-height:100%; 
}
.monthHover div{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.monthImg:hover .monthHover{
  /* height: 50%;
  color:#000; */
  display: block;
}
.zxjc .ant-progress-inner{
  background: #F4F5F6;
}
#home .ant-progress-inner{
  border: none;

}
#home .ant-tabs-tab-active.ant-tabs-tab{
  line-height: 31px;
}
/* #home .ant-tabs-bar.ant-tabs-top-bar{
  margin: 0px;
} */
/* #home .ant-tabs-content.ant-tabs-content-animated.ant-tabs-top-content{
  height: calc(100% - 55px);
} */
#home .ant-tabs-tabpane{
  padding: 0px 15px 10px 15px;
}
.justify-between{
  display:flex;
  justify-content:space-between;
}
.align-center{
  display:flex;
  align-items:center;
}
.align-stretch{
  display:flex;
  align-items:stretch;
}
.row-number{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    text-align: center;
}
.green{
  color: #579D1F;
}
.blue{
  color: #2B87FE;
}
.hadCheckMonth.green {
  border-color: #579D1F;
}
.hadCheckMonth.blue {
  border-color: #2B87FE;
}

.jiancha{
  height:100%;
  background:#fff;
  margin:0px 10px;
}
.jianchaTitle>span{
  font-weight:600;
  font-size:16px;
}
.jianchaBox{
  padding:15px 0px ;
  height:100%;
}
.jianchaTheme{
  border-right:1px dashed #eee;
  padding:0px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  height:100%;
}

.jianchaThemeNum{
  color:#0477FF;
  font-weight:600;
}
.jianchaBoxRight{
  padding:0px 10px 0px 30px;
  height:100%;
}
.jianchaPeopleTitle{
  height:30px;
  display:inline-block;
  vertical-align: sub;
  font-weight:600;
}

.fengxian{
  height:100%;
  background:#fff;
  margin-right:10px;
}

.fengxianTitle>span{
  font-weight:600;
  font-size:16px;
}

.fengxianBox{
  display: flex;
  flex-direction: column;
  justify-content: space-around; 
  height: calc(100% - 55px);
}

.fengxianDisposalNum{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  height:100%;
}
 
.disposalDetailNum{
  color:#000;
  font-size:16px;
  font-weight:700;
  vertical-align:middle;
  color:#11C3C4;
}

.repair-top{
  margin: 0 0.7rem;
  padding-top: 0.7rem;
  padding-bottom: 0.3rem;
  flex:1;
  border-bottom: 1px dashed #eee;
}
.repair-btm{
  margin: 0 0.7rem;
  padding-top: 0.7rem;
  padding-bottom: 0.3rem;
  flex:1;
}
.baoxiu{
  height:100%;
  background:#fff;
  margin:0px 10px;
}

.baoxiuTitle, .fengxianTitle, .monthTitle, .jianchaTitle{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #eee;
}

.baoxiuTitle>span{
  font-weight:600;
  font-size:16px
}

.baoxiuBox{
  height:calc(100% - 55px);
  display:flex;
  flex-direction:column;
  font-size:0.8rem;
}

.baoxiuSecondTitle{
  display:flex;
  justify-content:space-between;
}

.baoxiuSecondTitle>p{
  font-size:0.8rem;
  color:#000;
  margin-bottom:0.3rem;
}

.baoxiuSecondTitle>img{
  height:1.2rem;
  margin-top:-0.3rem;
  cursor:pointer;
}

.baoxiuMiddleBox{
  display:flex;
}

.baoxiuMiddleBox>div:first-child{
  margin-right:0.5rem;
  display:flex;
  align-items:center;
}

.baoxiuMiddleBox>div:last-child{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  height:100%;
}

.baoxiuBottomBox{
  display:flex;
  margin-top:0.3rem;
  justify-content:space-between;
}

.baoxiuBottomBox>div{
  width:45%;
}

.baoxiuBottomBoxTitle{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

#home .tousuQuestion>div {
  margin:0;
}

.tousu{
  height:100%;
  background:#fff;
  margin-left:10px;
  position:relative;
}

.tousuIMG{
  height:1.2rem;
  cursor:pointer;
  position:absolute;
  right:1rem;
  top:1rem;
  z-index: 10;
}
.tousuTabTitle{
  font-weight:600;
  margin-bottom:5px;
} 
.tousuContentRow{
  font-size:12px;
  display:flex;
  align-items:stretch;
  padding:3px 0px;
  text-align:left;
}

.tousuRankNum{
  display:flex;
  align-items:center;
}

.tousuContent{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
