<template>
  <div :class="isFull ? 'dashboard-container full' : 'dashboard-container' ">
    <div class="scoped-num" v-if="configClickTotal.data.length > 0">
      <dv-border-box-8>
        <div class="sn-wrap">
          <div class="sn-item">
            <dv-border-box-13>
              <div class="sn-label">用户数</div>
              <dv-digital-flop :config="config1" style="width:200px;height:50px;" />
            </dv-border-box-13>
          </div>
          <div class="sn-item">
            <dv-border-box-13>
              <div class="sn-label">楼盘数</div>
              <dv-digital-flop :config="config2" style="width:200px;height:50px;" />
            </dv-border-box-13>
          </div>
          <div class="sn-item">
            <dv-border-box-13>
              <div class="sn-label">学校数</div>
              <dv-digital-flop :config="config3" style="width:200px;height:50px;" />
            </dv-border-box-13>
          </div>
          <div class="sn-item">
            <dv-border-box-13>
              <div class="sn-label">文章数</div>
              <dv-digital-flop :config="config4" style="width:200px;height:50px;" />
            </dv-border-box-13>
          </div>
          <div class="sn-item">
            <dv-border-box-13>
              <div class="sn-label">土拍数</div>
              <dv-digital-flop :config="config5" style="width:200px;height:50px;" />
            </dv-border-box-13>
          </div>
        </div>
      </dv-border-box-8>
    </div>
    <div v-if="isAdmin === 1">
      <echart-line :curObj="curData"/>
      <echart-login30 :curObj="curData"/>
      <echart-signin24h :curObj="curData" :isAdmin="isAdmin" />
      <echart-signup24h :curObj="curData"/>
    </div>
    <div v-else>
      <echart-signin24h :curObj="curData" :isAdmin="isAdmin" />
    </div>
    <div :class="configClickTotal.data.length > 0 ? 'scoped-count' : 'scoped-count t2'">
      <dv-border-box-10>
        <div class="sc-row">
          <div class="sc-user">
            <dv-decoration-12 style="width:150px;height:150px;display: block;margin: 0 auto;" @click.native="fullHandle()" />
            <dv-decoration-3 style="width:300px;height:30px;display: inline-block; overflow: hidden;" />
            <div class="t">{{timeTips}}{{sysUser.nickname}}</div>
            <div class="t">{{curTime}}</div>
          </div>
          <div class="sc-col" v-if="configClickTotal.data.length > 0">
            <dv-border-box-11 title="今日搜索榜">
              <div class="sc-wrap">
                <dv-capsule-chart :config="configSearchToday" style="width:390px;height:350px" />
              </div>
            </dv-border-box-11>
          </div>
          <div class="sc-col" v-if="configClickTotal.data.length > 0">
            <dv-border-box-11 title="昨日搜索榜">
              <div class="sc-wrap">
                <dv-capsule-chart :config="configSearchYesterday" style="width:390px;height:350px" />
              </div>
            </dv-border-box-11>
          </div>
          <div class="sc-col" v-if="configClickTotal.data.length > 0">
            <dv-border-box-11 title="搜索总榜">
              <div class="sc-wrap">
                <dv-capsule-chart :config="configSearchTotal" style="width:390px;height:350px" />
              </div>
            </dv-border-box-11>
          </div>
          <div class="sc-col" v-if="configClickTotal.data.length > 0">
            <dv-border-box-11 title="近七天点击榜">
              <div class="sc-wrap">
                <dv-capsule-chart :config="configClickWeek" style="width:390px;height:350px" />
              </div>
            </dv-border-box-11>
          </div>
          <div class="sc-col" v-if="configClickTotal.data.length > 0">
            <dv-border-box-11 title="今日点击榜">
              <div class="sc-wrap">
                <dv-capsule-chart :config="configClickToday" style="width:390px;height:350px" />
              </div>
            </dv-border-box-11>
          </div>
          <div class="sc-col" v-if="configClickTotal.data.length > 0">
            <dv-border-box-11 title="昨日点击榜">
              <div class="sc-wrap">
                <dv-capsule-chart :config="configClickYesterday" style="width:390px;height:350px" />
              </div>
            </dv-border-box-11>
          </div>
          <div class="sc-col" v-if="configClickTotal.data.length > 0">
            <dv-border-box-11 title="点击总榜">
              <div class="sc-wrap">
                <dv-capsule-chart :config="configClickTotal" style="width:390px;height:350px" />
              </div>
            </dv-border-box-11>
          </div>
          <div class="sc-col" v-if="configClickTotal.data.length > 0">
            <dv-border-box-11 title="近一月点击榜">
              <div class="sc-wrap">
                <dv-capsule-chart :config="configClickMonth" style="width:390px;height:350px" />
              </div>
            </dv-border-box-11>
          </div>
      </div>
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import { comGetTime } from '@/utils'
import { mapGetters } from 'vuex'
import EchartLine from './components/EchartLine'
import EchartLogin30 from './components/EchartLogin30'
import EchartSignin24h from './components/EchartSignin24h'
import EchartSignup24h from './components/EchartSignup24h'
export default {
  name: 'Dashboard',
  components: {
    EchartLine,
    EchartLogin30,
    EchartSignin24h,
    EchartSignup24h,
  },
  data () {
    return {
      config1: {
        number: [0],
        content: '{nt}人',
      },
      config2: {
        number: [0],
        content: '{nt}个',
      },
      config3: {
        number: [0],
        content: '{nt}个',
      },
      config4: {
        number: [0],
        content: '{nt}篇',
      },
      config5: {
        number: [0],
        content: '{nt}个',
      },
      configClickTotal: {
        data: [],
        unit: '次',
        colors: ['#ff3f40', '#fa6544', '#f16b22', '#f1a124', '#f1a124', '#c7f123', '#c7f123', '#22f294', '#24f1b9', '#23f1dc',
        '#35f8fe', '#00a8ff', '#0083ff', '#0060ff', '#003cff', '#0018ff', '#4800fe', '#7800ff', '#a201ff', '#e300ff',
          ],
      },
      configClickWeek: {
        data: [],
        unit: '次',
        colors: ['#ff3f40', '#fa6544', '#f16b22', '#f1a124', '#f1a124', '#c7f123', '#c7f123', '#22f294', '#24f1b9', '#23f1dc',
        '#35f8fe', '#00a8ff', '#0083ff', '#0060ff', '#003cff', '#0018ff', '#4800fe', '#7800ff', '#a201ff', '#e300ff',
          ],
      },
      configClickMonth: {
        data: [],
        unit: '次',
        colors: ['#ff3f40', '#fa6544', '#f16b22', '#f1a124', '#f1a124', '#c7f123', '#c7f123', '#22f294', '#24f1b9', '#23f1dc',
        '#35f8fe', '#00a8ff', '#0083ff', '#0060ff', '#003cff', '#0018ff', '#4800fe', '#7800ff', '#a201ff', '#e300ff',
          ],
      },
      configClickYesterday: {
        data: [],
        unit: '次',
        colors: ['#ff3f40', '#fa6544', '#f16b22', '#f1a124', '#f1a124', '#c7f123', '#c7f123', '#22f294', '#24f1b9', '#23f1dc',
        '#35f8fe', '#00a8ff', '#0083ff', '#0060ff', '#003cff', '#0018ff', '#4800fe', '#7800ff', '#a201ff', '#e300ff',
          ],
      },
      configClickToday: {
        data: [],
        unit: '次',
        colors: ['#ff3f40', '#fa6544', '#f16b22', '#f1a124', '#f1a124', '#c7f123', '#c7f123', '#22f294', '#24f1b9', '#23f1dc',
        '#35f8fe', '#00a8ff', '#0083ff', '#0060ff', '#003cff', '#0018ff', '#4800fe', '#7800ff', '#a201ff', '#e300ff',
          ],
      },
      configSearchTotal: {
        data: [],
        unit: '次',
        // showValue: true,
        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#f1a124', '#ffdb5c', '#ff9f7f', '#fb7293', '#22f294', '#e300ff'],
      },
      configSearchYesterday: {
        data: [],
        unit: '次',
        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#f1a124', '#ffdb5c', '#ff9f7f', '#fb7293', '#22f294', '#e300ff'],
      },
      configSearchToday: {
        data: [],
        unit: '次',
        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#f1a124', '#ffdb5c', '#ff9f7f', '#fb7293', '#22f294', '#e300ff'],
      },
      timeTips: '',
      numObj: {},
      isFull: false,
      timer: null,
      curTime: '',
      curData: {},
      isAdmin: 2,
    }
  },
  created () {
    const fpUser = window.sessionStorage.getItem('fp_user') ? JSON.parse(window.sessionStorage.getItem('fp_user')) : {}
    let isAdmin = 2
    if (fpUser.username === 'admin') isAdmin = 1
    this.isAdmin = isAdmin
    this.getData(isAdmin)
    if (fpUser.username === 'daping') {
      window.setInterval(() => {
        this.getData(isAdmin)
      }, 1000 * 60 * 60)
    }
  },
  computed: {
    ...mapGetters([
      'sysUser',
    ])
  },
  methods: {
    getTime () {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month > 9 ? month : '0' + month
      let day = date.getDate()
      day = day > 9 ? day : '0' + day
      let hour = date.getHours()
      hour = hour > 9 ? hour : '0' + hour
      let min = date.getMinutes()
      min = min > 9 ? min : '0' + min
      let second = date.getSeconds()
      second = second > 9 ? second : '0' + second
      return `${year}-${month}-${day} ${hour}:${min}:${second}`
    },
    getData (isAdmin) {
      this.timer = null
      this.timer = window.setInterval(() => {
        this.curTime = this.getTime()
      }, 1000)
      let now = new Date()
      let hour = now.getHours()
      if(hour < 6){this.timeTips = '凌晨好！'}
      else if (hour < 9){this.timeTips = '早上好！'}
      else if (hour < 12){this.timeTips = '上午好！'}
      else if (hour < 14){this.timeTips = '中午好！'}
      else if (hour < 17){this.timeTips = '下午好！'}
      else if (hour < 19){this.timeTips = '傍晚好！'}
      else if (hour < 22){this.timeTips = '晚上好！'}
      this.$api.other.admindexrank().then(res => {
        this.curData = res || {}
        this.numObj = res.total_data || {}
        this.formatData2(isAdmin === 1 ? this.numObj.wechat_user_num : this.numObj.wechat_user_num + 10000, 'config1')
        this.formatData2(this.numObj.estate_num, 'config2')
        this.formatData2(this.numObj.school_num, 'config3')
        this.formatData2(this.numObj.information_num, 'config4')
        this.formatData2(this.numObj.land_auction_num, 'config5')
        this.formatData(res.estate_click_rank, 'configClickTotal', isAdmin)
        this.formatData(res.estate_week_rank, 'configClickWeek', isAdmin)
        this.formatData(res.estate_month_rank, 'configClickMonth', isAdmin)
        this.formatData(res.estate_yesterday_rank, 'configClickYesterday', isAdmin)
        this.formatData(res.estate_today_rank, 'configClickToday', isAdmin)
        this.formatData(res.estate_search_rank, 'configSearchTotal', isAdmin)
        this.formatData(res.estate_yesterday_search_rank, 'configSearchYesterday', isAdmin)
        this.formatData(res.estate_today_search_rank, 'configSearchToday', isAdmin)
      })
    },
    fullHandle () {
      this.isFull = !this.isFull
    },
    formatData2 (num, str) {
      let config = this[str]
      config.number = [num]
      config.animationFrame = 300
      this[str] = {...config} 
    },
    formatData (list, str, isAdmin) {
      const nList = list.splice(0, 10)
      const newArr = nList.map((item, itemIndex) => {
        return {
          value: isAdmin === 1 ? Number(item.num) : Number(item.num) * 10 + (10 - itemIndex) * 10 + parseInt(Math.random() * 10),
          name: item.estate_name,
        }
      })
      let config = this[str]
      // config.showValue = isAdmin === 1 ? true : false
      config.showValue = true
      config.data = [...newArr]
      this[str] = {...config}
    }
  }
}
</script>

<style lang="scss" scoped>
// .dashboard {
//   &-container {
//     margin: 30px;
//   }
//   &-text {
//     font-size: 30px;
//     line-height: 46px;
//   }
// }
.dashboard-container {
  width: 100%;
  height: calc(100vh - 84px);
  overflow-y: auto;
  // background: url(./bg.jpg) no-repeat center;
  background-color: #1f2d3d;
  &.full {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    min-height: 100%;
  }
}

.scoped-num {
  min-width: 1400px;
  box-sizing: border-box;
  padding: 20px 20px 0;
  .sn-wrap {
    padding:  10px;
    display: flex;
    box-sizing: border-box;
  }
  .sn-item {
    padding: 10px;
    flex: 1;
    text-align: center;
    .sn-label {
      padding-top: 20px;
      color: #8cdacc;
      font-size: 18px;
    }
    .dv-digital-flop {
      display: inline-block;
      margin-bottom: 10px;
    }
  }
}
.scoped-count {
  padding: 20px;
  display: inline-block;
  min-width: 1400px;
  box-sizing: border-box;
  &.t2 {
    display: inline-block;
    vertical-align: middle;
    min-width: 500px;
  }
  .sc-row {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    justify-content: center;
  }
  .sc-col {
    width: 450px;
    padding: 10px;
  }
  .sc-wrap {
    padding: 50px 20px 20px;
  }
  .sc-user {
    width: 450px;
    height: 320px;
    padding-top: 80px;
    text-align: center;
    .t {
      color: #fff;
      font-size: 20px;
      padding-top: 10px;
      font-weight: bold;
    }
  }
}
</style>
