<template>
  <div id="home" class="layoutPadding">
      <a-row type="flex"  class="align-stretch" style="">
        <a-col :span="24">
          <a-row type="flex" style="height:100%;">
            <a-col :span="6">
              <div class="home-card topBox" style="margin-right:10px;">
                <a-row>
                  <a-col :span='9'>
                    <div class="justify-between topBox" >
                      <div>
                        <p class="top-font" >小区数</p>
                        <span class="top-count" >{{baseData.community}}</span>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span='10'>
                    <a-row style="border-left: 1px solid lightgrey; padding-left: 10px; ">
                      <a-col :span='16'>
                        <span class="top-font" > 本月新增 : </span>
                      </a-col>
                      <a-col :span='8'>
                        <span class="top-count-extra" style="cursor: pointer;" >{{2}}</span>
                      </a-col>
                    </a-row>
                    <a-row style="border-left: 1px solid lightgrey; padding-left: 10px;">
                      <a-col :span='16'>
                        <span class="top-font" > 本月注销 : </span>
                      </a-col>
                      <a-col :span='8'>
                        <span class="top-count-extra" style="cursor: pointer;">{{3}}</span>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span='1' />
                  <a-col :span='4'>
                    <div class="align-center" style="margin-top: 0px">
                        <img src="@/assets/icon/xqs.png" style="width:50px;" alt="">
                      </div>
                  </a-col>
                </a-row>
                <a-row style="border-top:1px solid lightgrey;padding-top: 10px;">
                  <a-col :span='7'>
                      商品 : {{332}}
                  </a-col>
                  <a-col :span='7'>
                      直管 : {{224}}
                  </a-col>
                  <a-col :span='10'>
                      保障及其他 : {{321}}
                  </a-col>
                </a-row>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="home-card topBox" style="margin-right:10px;">
                <a-row>
                  <a-col :span='9'>
                    <div class="justify-between topBox" >
                      <div>
                        <p class="top-font" >门牌幢</p>
                        <span class="top-count" >{{baseData.building}}</span>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span='10'>
                    <a-row style="border-left: 1px solid lightgrey; padding-left: 10px; ">
                      <a-col :span='16'>
                        <span class="top-font" > 本月增加 : </span>
                      </a-col>
                      <a-col :span='8'>
                        <span class="top-count-extra" style="cursor: pointer;" >{{0}}</span>
                      </a-col>
                    </a-row>
                    <a-row style="border-left: 1px solid lightgrey; padding-left: 10px;">
                      <a-col :span='16'>
                        <span class="top-font" > 本月注销 : </span>
                      </a-col>
                      <a-col :span='8'>
                        <span class="top-count-extra" style="cursor: pointer;">{{4}}</span>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span='1' />
                  <a-col :span='4'>
                    <div class="align-center" style="margin-top: 0px">
                        <img src="@/assets/icon/mpzs.png" style="width:50px;" alt="">
                      </div>
                  </a-col>
                </a-row>
                <a-row style="border-top:1px solid lightgrey;padding-top: 10px;">
                  <a-col :span='12'>
                    有电梯 : {{332}}
                  </a-col>
                </a-row>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="home-card topBox" style="margin-right:10px;">
                <a-row>
                  <a-col :span='9'>
                    <div class="justify-between topBox" >
                      <div>
                        <p class="top-font" >物业企业</p>
                        <span class="top-count" >{{baseData.company}}</span>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span='10' />
                  <a-col :span='1' />
                  <a-col :span='4'>
                    <div class="align-center" style="margin-top: 0px">
                        <img src="@/assets/icon/wyqys.png" style="width:50px;" alt="">
                      </div>
                  </a-col>
                </a-row>
                <a-row style="border-top:1px solid lightgrey;padding-top: 10px;">
                  <a-col :span='12'>
                    区属物业 : {{111}}
                  </a-col>
                  <a-col :span='12'>
                    本市注册 : {{222}}
                  </a-col>
                </a-row>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="home-card topBox" style="">
                <a-row>
                  <a-col :span='9'>
                    <div class="justify-between topBox" >
                      <div>
                        <p class="top-font" >业委会</p>
                        <span class="top-count" >{{baseData.ic}}</span>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span='10' />
                  <a-col :span='1' />
                  <a-col :span='4'>
                    <div class="align-center" style="margin-top: 0px">
                        <img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
                      </div>
                  </a-col>
                </a-row>
                <a-row style="border-top:1px solid lightgrey;padding-top: 10px;">
                  <a-col :span='12'>
                    近五个月到期 : {{11}}
                  </a-col>
                  <a-col :span='12'>
                    已过期 : {{5}}
                  </a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row class="align-stretch" style="margin-top:10px;">
        <a-col :span="6">
          <div class="month">
            <div class="home-card monthTitle">
                <span>房办月查</span>
                <span>{{ parseInt(((secRowInfos.HOUSING_OFFICE.count.rectifiedCount/secRowInfos.HOUSING_OFFICE.count.rectifyCount)*100)) }}%</span>
            </div>
            <div class="home-card monthBox">
              <p class="monthBoxTitle">今年完成情况</p>
              <div class="monthBoxContent" >
                <div class="hoverTest" v-for="item in FB_month" :key="item.name">
                  <div @click="checkMonth(item)" :class="'monthImg blue '" :style="`background:${item.backgroundColor}; color:${item.color}`">
                    {{item.name}}
                    <div class="monthHover" @click="hoverMonthToFB(item)">
                      <div>
                        <span>明细</span>
                      </div>
                    </div>
                  </div> 
                </div>
              </div>
            </div>
            <div class="home-card monthBottom">
               <span>整改执行</span>
              <span style="fontSize:13px"><span class="monthBottomNum">{{secRowInfos.HOUSING_OFFICE.count.rectifiedCount}}/</span>{{secRowInfos.HOUSING_OFFICE.count.rectifyCount}}</span>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="month">
            <div class="home-card monthTitle">
                <span>物企双周查</span>
                <span>{{ parseInt(((secRowInfos.PROPERTY_BIWEEKLY.count.rectifiedCount/secRowInfos.PROPERTY_BIWEEKLY.count.rectifyCount)*100))  }}%</span>
            </div>
            <div class="home-card monthBox">
              <p class="monthBoxTitle">今年完成情况</p>
              <div class="monthBoxContent" >
                <div class="hoverTest" v-for="item in WQ_month" :key="item.name">
                  <div @click="checkMonth(item)" :class="'monthImg blue '" :style="`background:${item.backgroundColor}; color:${item.color}`">
                    {{item.name}}
                    <div class="monthHover" @click="hoverMonthToWY(item)">
                      <div>
                        <span>明细</span>
                      </div>
                    </div>
                  </div> 
                </div>
              </div>
            </div>

            <div class="home-card monthBottom">
               <span>整改执行</span>
              <span style="fontSize:13px"><span class="monthBottomNum">{{secRowInfos.PROPERTY_BIWEEKLY.count.rectifiedCount}}/</span>{{secRowInfos.PROPERTY_BIWEEKLY.count.rectifyCount}}</span>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="month" style="height:100%">
            <div class="home-card monthTitle">
                <span>物业经理自查</span>
            </div>
            <div class="home-card monthBox">
              <p class="monthBoxTitle" > {{!showMonthOrYear? '本月':'今年'}}完成情况 <span @click="showMonthOrYear=!showMonthOrYear" style="float:right;fontSize:12px;cursor:pointer;color:rgb(80,150,250)">切换今年</span></p>
              <div class="monthBoxContent" v-show="showMonthOrYear">
                <div class="hoverTest" v-for="item in manager_month" :key="item.name">
                  <div @click="checkMonth(item)" :class="'monthImg blue'" :style="`background:${item.backgroundColor}; color:${item.color}`">
                    {{item.name}}
                    <div class="monthHover" @click="hoverMonthToManager(item)">
                      <div>
                        <span>明细</span>
                      </div>
                    </div>
                  </div> 
                </div>
              </div>
              <div v-show="!showMonthOrYear" class="calendar">
                <!-- <a-calendar id="calendar" :validRange="validRange" :fullscreen="false" /> -->
               <table border=0 style="width:100%;height:100%;text-align:center;marginTop:10px">
                <thead>
                  <tr> 
                    <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th>
                  </tr>
                </thead>
                <tbody  ref='calendar'>
                </tbody>
               </table>
              </div>
            </div>
            <div class="home-card monthBottom">
               <span>整改执行</span>
              <span style="fontSize:13px"><span class="monthBottomNum">{{secRowInfos.COMMUNITY_MANAGER_YEAR.count.rectifiedCount}}/</span>{{secRowInfos.COMMUNITY_MANAGER_YEAR.count.rectifyCount}}</span>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="sec-right">
            <div style="">
              <a-row>
                <a-col :span="24" >
                  <div class="home-card middle-right" @click="$router.push({path: '/houseData/basicInfo'})">
                    <img src="@/assets/icon/xqda.png" style="width:40px;margin:0 10%" alt="">
                    <p style="color:rgb(80,150,250)"> 小区档案</p>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24" >
                  <div class="home-card middle-right" @click="$router.push({path: '/houseData/propertyInfo'})">
                    <img src="@/assets/icon/wyqyda.png" style="width:40px;margin:0 10%" alt="">
                    <p style="color:rgb(80,150,250)"> 物业企业档案</p>
                  </div>
                </a-col>
              </a-row>
            </div>

            <div style="flex:1;marginTop:10px; display:flex;flex-direction:column" class="home-card">
              <div class="home-card" style="border-bottom:1px solid #ccc;font-weight:550;"> 
                <span>专项检查</span> 
              </div >
              <div style="flex:1;display:flex;flex-direction:column;justify-content:space-around;paddingLeft:10%;font-weight:600;fontSize:15px">
                <div style="">
                  <span ><img src="@/assets/icon/yyzt.png" alt="" style="width:20px;margin-right:3px;"> 已有主题</span>
                  <span style="float:right;paddingRight:50px;color:rgb(80,150,250)">{{theme}}</span>
                </div>
                <div>
                  <span ><img src="@/assets/icon/ywcjcxq.png" alt="" style="width:20px;margin-right:3px;"> 已完成小区</span>
                  <span style="float:right;paddingRight:50px;color:rgb(80,150,250)">{{sect}}</span>
                </div>
                <div>
                  <span ><img src="@/assets/icon/zt.png" alt="" style="width:20px;margin-right:3px;"> 已开整改单</span>
                  <span style="float:right;paddingRight:50px;color:rgb(80,150,250)">{{receipts}}</span>
                </div>
                <div>
                  <span ><img src="@/assets/icon/zt.png" alt="" style="width:20px;margin-right:3px;"> 已完成整改</span>
                  <span style="float:right;paddingRight:50px;color:rgb(80,150,250)">0</span>
                </div>

              </div>
            </div>

          </div>
        </a-col>
      </a-row>
      <a-row class="align-stretch" style="margin-top:10px;height:100%">
        <a-col :span="12" style="paddingRight:10px;">
          <div class="home-card" style="margin-top:10px;height:96%">
            <ComplaintsTrain moduletitle="投诉问题" />
          </div>
        </a-col>
        <a-col :span="12">
          <div class="home-card" style="margin-top:10px;height:96%">
            <ComplaintsTrain moduletitle="报修" />
          </div>
        </a-col>
      </a-row>
  </div>
</template>

<script>
import ComplaintsTrain from '@/views/home/ComplaintsTrain' 
import qs from 'qs'
import axios from 'axios'

export default {
  name: 'HomePage',
  components: {
    ComplaintsTrain
  },
  data() {
    return{
      sect: 0, //已完成小区
      theme: 0, //已有主题
      receipts: 0, //已开整改单

      baseData: {},
      showMonthOrYear: false,
      date: new Date(),
      titleData: {},
      openConfig: false,
      disposal: {},
      nowMonth: '本月',
      checkStreet: 0,
      totStreet: 0,
      FB_month: [
        {name: '1月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '2月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '3月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '4月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '5月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '6月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '7月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '8月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '9月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '10月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' }, 
        {name: '11月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' }, 
        {name: '12月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' }, 
      ],
      WQ_month: [
        {name: '1月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '2月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '3月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '4月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '5月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '6月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '7月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '8月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '9月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '10月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' }, 
        {name: '11月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' }, 
        {name: '12月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' }, 
      ],
      manager_month: [
        {name: '1月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '2月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '3月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '4月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '5月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '6月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '7月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '8月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '9月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);'}, 
        {name: '10月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' }, 
        {name: '11月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' }, 
        {name: '12月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', backgroundColor: 'rgb(226,235,245);' }, 
      ],
      expired: 0,
      secRowInfos: {
        HOUSING_OFFICE: {
          data: [],
          count: {
            rectifyCount: 0, 
            rectifiedCount: 0
          }
        },
        PROPERTY_BIWEEKLY: {
          data: [],
          count: {
            rectifyCount: 0, 
            rectifiedCount: 0
          }
        },
        COMMUNITY_MANAGER_YEAR: {
          data: [],
          count: {
            rectifyCount: 0, 
            rectifiedCount: 0
          }
        },
        COMMUNITY_MANAGER_MATH: {
          data: [],
          count: {
            rectifyCount: 0, 
            rectifiedCount: 0
          }
        },
      },
    }
  },
  mounted(){
    this.getFBCheck()
    this.getCheckData()
    this.getSectNum()
    this.getbaseInfo()
    this.getReceiptsNum()

  },
  updated(){
    this.$nextTick(() => {
      this.myCanlendar()
    })
   
  },
  computed: {
    validRange(){ //限制日历只展示当前月的日期
      let year = this.$moment(new Date()).format('YYYY')
      let month = +this.$moment(new Date()).format('MM')

      let last = ''
      let start = year+'-'+month+'-01'
      let arr1 = [1, 3, 5, 7, 8, 10, 12]
      let arr2 = [4, 6, 9, 11]

      if (arr1.indexOf(month)!=-1) {
        last = year+'-'+month+'-31'
      }else if (arr2.indexOf(month)!=-1){
        last = year+'-'+month+'-30'
      }else if(String((year/4)).indexOf('.')!=-1 ){
        last = year+'-'+month+'-28'
      }else{
        last = year+'-'+month+'-29'
      }
      return [this.$moment(start), this.$moment(last)]
    }
  },
  methods: {
    //日历组件
 	  myCanlendar(){
  
      let dateArr = [...this.$moment(new Date()).format('YYYY-MM-DD').split('-')]
      // console.log('获取当前日期:'dateArr)
 
      // 获取当前月对应的最大天数
      let maxDayObj = new Date(dateArr[0], dateArr[1], 0)
      let maxDay = maxDayObj.getDate()
      // console.log('当前月对应的最大天数:'+maxDay)
       
	   // 获取当前日期第一天对应周几
      let firstDayObj = new Date(dateArr[0], dateArr[1]-1, 1)
      let firstDay = firstDayObj.getDay()
	    firstDay = firstDay == 0 ? 7 : firstDay
      // console.log('获取当前日期第一天对应周几:'+firstDay)
		
      // 打印表格
      let spaceOnce = true
      let tab='<tr>'
	    for(let i=1;i<=maxDay;i++){
		   // 打印最前面的空格子,确保只打印一次
        if(firstDay>0 && spaceOnce){
          for(let j=1;j<firstDay;j++){
            tab+= '<td>&nbsp</td>'
          }
          spaceOnce = false
        }

        let info = this.secRowInfos.COMMUNITY_MANAGER_MATH.data[i] 
        let color= 'rgb(226,235,245)'
        if (info) {
          if (info.rectifiedCount / info.rectifyCount <0.9 ) {
            color= '#CC4D4D'
          } else if(info.rectifiedCount / info.rectifyCount == 1 || info.rectifyCount == 0) {
            color= '#6EB629'
          } else {
            color= '#FFD400'
          }
          
        }

		   tab+= '<td style="border-radius:20%;text-align:center;border:4px solid #fff;background:'+color+'">'+i+'</td>'
		   
		   if((i-(8-firstDay))%7==0){
		   	tab+='</tr><tr>'
		   }
		   /*
		   如果某月的第一天是周日，那么格子总数会有42个，反之35个就够了，这里按42个打印
		   // 打印最后几个空格子， tbody总共应有42个格子,-天数 -前面的空格子
		   */
		   let lastSpace = 42-maxDay-(firstDay-1)
		  //  console.log('最后总共有空格:'+lastSpace+',倒数第二行空格:'+(lastSpace-7))
		   if(i==maxDay && lastSpace > 0){
			   for(let k = 0;k<lastSpace;k++){
				   tab+= '<td>&nbsp</td>'
				   // 减7是计算倒数第二行最后有几个空格,然后换下一行.
				   if((lastSpace-7)>0 && k+1 == (lastSpace-7))tab+='</tr><tr>'
			   }
		   }
	   }
	    tab += '</tr>'
      this.$refs.calendar.innerHTML = tab
    },
    /**
     * 获取dashboard数据
     */
    getbaseInfo(){
      this.$ajax.get({
        url: this.$api.GET_RESOURE_LIST,
      }).then(res => {
        if (res.code === '200') {
          this.baseData = this.$com.confirm(res, 'data.content', []) 
        }
      })

      this.$ajax.get({
        url: this.$api.GET_ALREADY_OR_EXPIRE,
      }).then(res => {
        if (res.code === '200') {
          let inner = res.data.content
          this.expired = inner.alreadyExpireCount
          this.expireInFiveMonth = inner.willExpireCount
        }
      })
    },
    /**
     * 获房办月查完成情况
     */
    getFBCheck(){
      this.$ajax.get({
        url: this.$api.GET_FB_WY_MANAGE_CHECK,
      }).then(res => {
        if (res.code === '200') {
          this.secRowInfos = this.$com.confirm(res, 'data.content', {})
          // 处理房办的月份颜色
          this.secRowInfos.HOUSING_OFFICE.data.forEach((ele, i) => {
            if (ele.rectifiedCount/ele.rectifyCount == 1 ) { // 完成率100 绿色
              this.FB_month[i].backgroundColor = '#6EB629'
              this.FB_month[i].color = '#fff'
            }else if(ele.rectifiedCount/ele.rectifyCount <.9){ // 完成率90以下 红色
              this.FB_month[i].backgroundColor = '#CC4D4D'
              this.FB_month[i].color = '#fff'
            } else if(ele.rectifiedCount/ele.rectifyCount>0.9){ // 完成率90到100之间 黄色
              this.FB_month[i].backgroundColor = '#FFD400'
              this.FB_month[i].color = '#fff'
            }else{ // 无数据状态
              this.FB_month[i].backgroundColor = 'rgb(226,235,245)'
              this.FB_month[i].color = '#2B87FE'
            }
          })

          // 处理物企双周查月份颜色
          this.secRowInfos.PROPERTY_BIWEEKLY.data.forEach((ele, i) => {
            if (ele.rectifiedCount/ele.rectifyCount == 1 || ele.rectifyCount == 0) { // 完成率100 绿色
              this.WQ_month[i].backgroundColor = '#6EB629'
              this.WQ_month[i].color = '#fff'
            }else if(ele.rectifiedCount/ele.rectifyCount <.9){ // 完成率90以下 红色
              this.WQ_month[i].backgroundColor = '#CC4D4D'
              this.WQ_month[i].color = '#fff'
            } else if(ele.rectifiedCount/ele.rectifyCount>0.9){ // 完成率90到100之间 黄色
              this.WQ_month[i].backgroundColor = '#FFD400'
              this.WQ_month[i].color = '#fff'
            }else{ // 无数据状态
              this.WQ_month[i].backgroundColor = 'rgb(226,235,245)'
              this.WQ_month[i].color = '#2B87FE'
            }
          })

          // 处理小区经理自查月份颜色
          this.secRowInfos.COMMUNITY_MANAGER_YEAR.data.forEach((ele, i) => {
            if (ele.rectifiedCount/ele.rectifyCount == 1 ) { // 完成率100 绿色
              this.manager_month[i].backgroundColor = '#6EB629'
              this.manager_month[i].color = '#fff'
            }else if(ele.rectifiedCount/ele.rectifyCount <.9){ // 完成率90以下 红色
              this.manager_month[i].backgroundColor = '#CC4D4D'
              this.manager_month[i].color = '#fff'
            } else if(ele.rectifiedCount/ele.rectifyCount>0.9){ // 完成率90到100之间 黄色
              this.manager_month[i].backgroundColor = '#FFD400'
              this.manager_month[i].color = '#fff'
            }else{ // 无数据状态
              this.manager_month[i].backgroundColor = 'rgb(226,235,245)'
              this.manager_month[i].color = '#2B87FE'
            }
          })
          
        }
      })
    },
    /**
     * 获取专项检查数据
     */
    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)
        })
    },
    /**
     * 获取已完成检查小区
     */
    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)
        }) 
    },
    /**
     * 点击月份
     */
    checkMonth(item){
      this.nowMonth = item.name
      this.checkStreet = item.checkStreet 
      for(let i=0;i<this.FB_month.length;i++){
        if(this.FB_month[i].name == item.name){
          this.FB_month[i].class='hadCheckMonth'
        }else{
          this.FB_month[i].class=''
        }
      }
    },
    hoverMonthToFB(item){
      let time = new Date().getFullYear()
      // console.log(time+'-'+parseInt(item.name))
      this.$router.push({
        path: '/documents/fiveSearch/monthList',
        query: {
          month: time+'-'+parseInt(item.name)
        }
      })
    },
    hoverMonthToWY(item){
      let time = new Date().getFullYear()
      // console.log(time+'-'+parseInt(item.name))
      this.$router.push({
        'path': '/documents/fiveSearch/doubleWeekCheckList',
        query: {
          month: time+'-'+parseInt(item.name)
        }
      })
    },
    hoverMonthToManager(item){
      let time = new Date().getFullYear()
      // console.log(time+'-'+parseInt(item.name))
      this.$router.push({
        'path': '/documents/fiveSearch/managerSelfCheckList', 
        query: {
          month: time+'-'+parseInt(item.name)
        }
      })
    },
    /**
     * 获取房办月查统计
     */
    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.FB_month[cont[i].month-1].check=true
              this.FB_month[cont[i].month-1].checkStreet=cont[i].checkStreet
              this.FB_month[cont[i].month-1].totStreet=cont[i].totStreet
            }
          } 
          let num = Number(this.$moment(this.date).format('MM'))
          this.FB_month[num-1].class='hadCheckMonth'
          this.nowMonth = this.FB_month[num-1].name
          this.checkStreet = this.FB_month[num-1].checkStreet
        }
      })
    },
    /**
     * 获取处置单统计
     */
    getDisposal(){
      this.$ajax.get({
        url: this.$api.GET_HOME_DISPOSAL,
      }).then(res => {
        if (res.code === '200') {
          this.disposal = this.$com.confirm(res, 'data.content', [])
        }
      })
    },
  },
}
</script>

<style scoped>

#home {
  width: 100%;
  height:100%;
  display: flex;
  flex-direction: column;
}

.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;
}

.top-count-extra{
  color:#000;
  font-size:24px;
  font-weight:600;
  line-height:24px;
}

.sec-right{
  height: 100%;
  display:flex;
  flex-direction: column;
}

.middle-right{
  text-align:center;
  height: calc(50% - 10px);
  display:flex;
  align-items: center;
  cursor: pointer;
}
.middle-right p{
  font-size:14px;
  margin:5px ;
}

.month{
  height:100%;
  background:#fff;
  margin-right:10px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.monthTitle,.monthBottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.monthTitle>span{
  font-weight:600;
  font-size:16px;
}
.monthBottom>span{
  font-weight:500;
  font-size:14px;
}
.monthBottom .monthBottomNum{
  color: rgb(0,103,251);
  font-size: 20px;
}
.monthBox{
  display:flex;
  flex-direction:column;
  flex:1;
  justify-content: space-between;
  border-bottom: 1px dashed #ccc;
  /* margin: 0 10px; */
}

.monthBoxTitle{
  font-weight: 500;
  font-size:14px;
  margin-bottom:10px;
}

.monthBoxContent,
.calendar{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  flex:1;
  margin: 15px 0;
}
.monthBoxContent .hoverTest{
  width: 21%;
}

.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{
  display: block;
}
#home .ant-progress-inner{
  border: none;
}
#home .ant-tabs-tab-active.ant-tabs-tab{
  line-height: 31px;
}

#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;
}

</style>

<style>
#calendar{
  width:100%;
}

#calendar>.ant-fullcalendar-header{
  display: none; 
}
#calendar .ant-fullcalendar{
  border-top:0px;
  width: 100%;

}
#calendar .ant-fullcalendar-table{
  width: 100%;
  /* margin-top: -20px; */
}

#calendar table{
  height:auto;
}

#calendar .ant-fullcalendar-disabled-cell{
  display: none;
}
</style>