<template>
  <div>
    <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
      <div id="index" ref="appRef" :key="componentKey">
        <div class="bg">
          <dv-loading v-if="loading">Loading...</dv-loading>
          <div v-else class="host-body">
            <div class="d-flex jc-center">
              <dv-decoration-10 class="dv-dec-10" />
              <div class="d-flex jc-center">
                <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
                <div class="title" @click="handleWelcome" style="cursor: pointer;">
                  <span class="title-text" style="display: inline-block;width: 100%;line-height: 2;">
                    下堡坪乡农村福利院长者管理系统
                  </span>
                  <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
                </div>
                <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
              </div>
              <dv-decoration-10 class="dv-dec-10-s" />
            </div>

            <!-- 第二行 -->
            <div class="d-flex jc-between px-2">
              <div class="d-flex aside-width">
                <div class="react-left ml-3 fw-b" style="background-color: #1a5cd7;">
                  <span class="text">数据统计</span>
                </div>
                <div class="react-left ml-3 sx">
                  <span class="text" @click="jumpPage(1)">数据查询</span>
                </div>
                <div class="react-left ml-3 sx">
                  <span class="text" @click="jumpPage(2)">荣誉展示</span>
                </div>
              </div>
              <div class="d-flex aside-width">
                <div class="react-right mr-3 react-l-s sx" style="width: 250px;">
                  <span class="text " @click="jumpPage(3)">实时监控</span>
                </div>
                <div class="react-right mr-3 react-l-s sx" style="width: 250px;">
                  <span class="text " @click="jumpPage(4)">健康预警</span>
                </div>
                <div class="react-right mr-4 react-l-s" style="width: 380px;">
                  <span class="react-after"></span>
                  <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
                </div>
              </div>
            </div>

            <div class="body-box">
              <!-- 第三行数据 -->
              <div class="content-box">
                <div>
                  <dv-border-box-12>
                    <xb :sexData="mapData.sexList" />
                  </dv-border-box-12>
                </div>
                <div>
                  <dv-border-box-12>
                    <nltj :ageList="mapData.ageList" />
                  </dv-border-box-12>
                </div>
                <!-- 中间 -->
                <div>
                  <center :centerData="mapData.centerData" />
                </div>
                <!-- 中间 -->
                <div>
                  <dv-border-box-12>
                    <hldj :nursingLevelList="mapData.nursingLevelList" />
                  </dv-border-box-12>
                </div>
                <div>
                  <dv-border-box-12>
                    <jzfp :ifHelpPoorList="mapData.ifHelpPoorList" />
                  </dv-border-box-12>
                </div>
              </div>

              <!-- 第四行数据 -->
              <div class="bottom-box">
                <dv-border-box-13>
                  <bottomRight :rzData="mapData.rzData" />
                </dv-border-box-13>
                <dv-border-box-12>
                  <bottomLeft :villageCountList="mapData.villageCountList"/>
                </dv-border-box-12>
              </div>
            </div>
          </div>
        </div>
      </div>
    </scale-box>
  </div>
</template>

<script>
  import drawMixin from '../../utils/drawMixin'
  import useDraw from '@/utils/useDraw'
  import {
    formatTime
  } from '../../utils/index.js'
  import hldj from './hldj'
  import xb from './xb'
  import jzfp from './jzfp'
  import nltj from './nltj'
  import center from './center'
  import bottomLeft from './bottomLeft'
  import bottomRight from './bottomRight'
  import ScaleBox from 'vue2-scale-box'

  import {
    dataStatistics
  } from '@/api/data/data'

  export default {
    mixins: [drawMixin],
    data () {
      return {
        timing: null,
        loading: true,
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        decorationColor: ['#568aea', '#000000'],
        componentKey: 0,
        mapData: {
          sexList: [],
          ageList: [],
          nursingLevelList: [],
          ifHelpPoorList: [],
          centerData: {
            countList: [],
            jzgyRate: null,
            fsgyRate: null,
            villageRankList: []
          },
          rzData: {
            roomTypeList: [],
            roomCountList: []
          },
          villageCountList: []
        }
      }
    },
    components: {
      ScaleBox,
      hldj,
      xb,
      jzfp,
      nltj,
      center,
      bottomLeft,
      bottomRight
    },
    mounted () {
      this.timeFn()
      this.cancelLoading()

      const {
        calcRate,
        windowDraw,
        unWindowDraw
      } = useDraw(this.$refs.appRef)

      // 调用 useDraw 返回的方法 屏幕适应
      windowDraw()
      calcRate()
      this.componentKey += 1
    },
    beforeDestroy () {
      clearInterval(this.timing)

      const {
        unWindowDraw
      } = useDraw()
      unWindowDraw()
    },
    // 生命周期 - 创建完成
    created () {
      this.getDataAll()
    },
    methods: {
      getDataAll () {
        dataStatistics().then((res) => {
          if (res.code == 200) {
            console.log(res.data)
            this.mapData = res.data

            this.addCenterData()
            this.mapData.centerData.countList.push(this.mapData.ljrzCount)
            this.mapData.centerData.countList.push(this.mapData.jnrzCount)
            this.mapData.centerData.countList.push(this.mapData.byxzCount)
            this.mapData.centerData.countList.push(this.mapData.mqzyCount)
            this.mapData.centerData.countList.push(this.mapData.wcjyCount)
            this.mapData.centerData.countList.push(this.mapData.jnjyCount)

            this.mapData.centerData.jzgyRate = this.mapData.jzgyRate
            this.mapData.centerData.fsgyRate = this.mapData.fsgyRate
            this.mapData.centerData.villageRankList = this.mapData.villageRankList

            this.mapData.rzData.roomTypeList = this.mapData.roomTypeList
            this.mapData.rzData.roomCountList = this.mapData.roomCountList
          } else {
            this.$message.error('数据加载失败')
          }
        })
      },
      addCenterData () {
        const centerData = {
          countList: [],
          jzgyRate: null,
          fsgyRate: null,
          villageRankList: []
        }
        const rzData = {
          roomTypeList: [],
          roomCountList: []
        }
        this.$set(this.mapData, 'centerData', centerData)
        this.$set(this.mapData, 'rzData', rzData)
      },
      timeFn () {
        this.timing = setInterval(() => {
          this.dateDay = formatTime(new Date(), 'HH: mm: ss')
          this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
          this.dateWeek = this.weekday[new Date().getDay()]
        }, 1000)
      },
      cancelLoading () {
        setTimeout(() => {
          this.loading = false
        }, 500)
      },
      handleWelcome () {
        this.$router.push({
          path: '/welcome'
        })
      },
      jumpPage (type) {
        if (type == 1) {
          this.$router.push({
            path: '/welcome'
          })
        } else if (type == 2) {
          this.$router.push({
            path: '/honor/show'
          })
        } else if (type == 3) {
          this.$router.push({
            path: '/aqld_bjcl'
          })
        } else if (type == 4) {
          this.$router.push({
            path: '/aqld_jkjc'
          })
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/scss/index.scss';

  body {
    margin: 0;
    padding: 0;
  }

  .sx :hover {
    cursor: pointer;
  }
</style>
