<template>
  <div class="main">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12">
        <div class="app-container" style="height: 120px">
          <div class="user-wrapper">
            <div class="user-header">
              <img alt="avatar" :src="avatar">
            </div>
            <div class="user-info">
              <div class="random-message">
                {{ welcomeMessage }}
              </div>
              <div class="user-dept">
                <span>{{ user.deptName ? user.deptName : $t('common.noDept') }}</span> | <span>{{ user.roleName ? user.roleName : $t('common.noRole') }}</span>
              </div>
              <div class="user-login-info">
                {{ $t('common.lastLoginTime') }}：<span id="last-login-time">{{ user.lastLoginTime ? user.lastLoginTime : $t('common.firstLogin') }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="app-container" style="height: 120px;padding: 0">
          <el-card :body-style="{ padding: '0px' }" shadow="never" style="height: 120px">
            <div class="count-header">
              <img alt="" :src="resolveIcon('count1.svg')">
              <span class="des">{{ $t('common.todayIp') }}</span>
              <countTo class="countTo todayIp" :start-val="0" :end-val="todayIp" :duration="3000" />
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="app-container" style="height: 120px;padding: 0">
          <el-card :body-style="{ padding: '0px' }" shadow="never" style="height: 120px">
            <div class="count-header">
              <img alt="" :src="resolveIcon('count2.svg')">
              <span class="des">{{ $t('common.todayVisit') }}</span>
              <countTo class="countTo todayVisit" :start-val="0" :end-val="todayVisit" :duration="3000" />
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="app-container" style="height: 120px;padding: 0">
          <el-card :body-style="{ padding: '0px' }" shadow="never" style="height: 120px">
            <div class="count-header">
              <img alt="" :src="resolveIcon('count3.svg')">
              <span class="des">{{ $t('common.TotalVisit') }}</span>
              <countTo class="countTo totalVisit" :start-val="0" :end-val="totalVisit" :duration="3000" />
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12">
        <div class="app-container">
          <div id="visit-count-chart" style="width: 100%;height: 370px" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
import { parseTime } from '@/utils'
import countTo from 'vue-count-to'
import resize from '@/components/Charts/mixins/resize'

export default {
  name: 'Dashboard',
  components: { countTo },
  filters: {
    portFilter(v) {
      const map = {
        0: 'danger',
        1: 'success'
      }
      return map[status]
    }
  },
  mixins: [resize],
  data() {
    return {
      welcomeMessage: '',
      todayIp: 0,
      todayVisit: 0,
      totalVisit: 0,
      chart: null
    }
  },
  computed: {
    user() {
      return this.$store.state.account.user
    },
    avatar() {
      return require(`@/assets/avatar/${this.user.avatar}`)
    }
  },
  mounted() {
    this.welcomeMessage = this.welcome()
    this.initIndexData()
  },
  methods: {
    resolveIcon(icon) {
      return require(`@/assets/icons/${icon}`)
    },
    welcome() {
      const date = new Date()
      const hour = date.getHours()
      const time = hour < 6 ? this.$t('common.goodMorning') : (hour <= 11 ? this.$t('common.goodMorning') : (hour <= 13 ? this.$t('common.goodAfternoon') : (hour <= 18 ? this.$t('common.goodAfternoon') : this.$t('common.goodEvening'))))
      const welcomeArr = [
        this.$t('common.randomMessage.a'),
        this.$t('common.randomMessage.b'),
        this.$t('common.randomMessage.c')
        // this.$t('common.randomMessage.d'),
        // this.$t('common.randomMessage.e'),
        // this.$t('common.randomMessage.f'),
        // this.$t('common.randomMessage.g'),
        // this.$t('common.randomMessage.h'),
        // this.$t('common.randomMessage.i')
      ]
      const index = Math.floor((Math.random() * welcomeArr.length))
      return `${time}, ${this.user.realname}`
    },
    initIndexData: function() {
      this.$get('system/user/index').then((r) => {
        const data = r.data.data
        this.todayIp = data.todayIp
        this.totalVisit = data.totalVisitCount
        this.todayVisit = data.todayVisitCount
        const tenVisitCount = []
        const dateArr = []
        for (let i = 10; i >= 0; i--) {
          const time = parseTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * i), '{m}-{d}')
          let contain = false
          for (const o of data.lastTenVisitCount) {
            if (o.days === time) {
              contain = true
              tenVisitCount.push(o.count)
            }
          }
          if (!contain) {
            tenVisitCount.push(0)
          }
          dateArr.push(time)
        }
        const tenUserVisitCount = []
        for (let i = 10; i >= 0; i--) {
          const time = parseTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * i), '{m}-{d}')
          let contain = false
          for (const o of data.lastTenUserVisitCount) {
            if (o.days === time) {
              contain = true
              tenUserVisitCount.push(o.count)
            }
          }
          if (!contain) {
            tenUserVisitCount.push(0)
          }
        }
        this.chart = echarts.init(document.getElementById('visit-count-chart'))
        const option = {
          backgroundColor: '#FFF',
          title: {
            text: this.$t('common.visitTitle') + '\n',
            textStyle: {
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: [this.$t('common.you'), this.$t('common.total')],
            top: '18'
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true,
            show: false
          },
          toolbox: {
            feature: {
              dataView: { show: false, readOnly: false }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            splitLine: {
              show: false
            },
            data: dateArr,
            axisLine: {
              lineStyle: {
                color: '#333'
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: '#DDD'
                }
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#333'
                }
              },
              nameTextStyle: {
                color: '#999'
              },
              splitArea: {
                show: false
              }
            }],
          series: [
            {
              name: this.$t('common.you'),
              smooth: true,
              type: 'line',
              color: 'rgb(0, 143, 251)',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 143, 251, 0.8)'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                  ],
                  globalCoord: false
                }
              },
              lineStyle: {
                normal: {
                  width: 3
                }
              },
              data: tenUserVisitCount
            },
            {
              name: this.$t('common.total'),
              smooth: true,
              type: 'line',
              color: 'rgba(82, 222, 151, 1)',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(82, 222, 151, 0.8)'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                  ],
                  globalCoord: false
                }
              },
              lineStyle: {
                normal: {
                  width: 3
                }
              },
              data: tenVisitCount
            }
          ]
        }
        this.chart.setOption(option)
      })
    }
  }
}
</script>
<style lang="scss">
  .main {
    .el-card {
      border: none;
      border-radius: 2px;
    }
    .el-table.server-table {
      th {
        height: 2.7rem;
        padding: 7px 0;
        border-right: none;
      }
      td {
        padding: 7px 0;
        border-right: none;
      }
    }
    .count-header {
      padding-left: 1rem;
      height: 120px;
      line-height: 120px;
      text-align: left;
      vertical-align: center;
      img {
        width: 3.8rem;
        margin-top: 1.8rem;
        vertical-align: top;
      }
      span {
        font-size: 15px;
        color: #606266;
        font-weight: 600;
        &.des {
          margin-left: 9px;
        }
      }
    }
    .todayIp {
      color: #27c6da !important;
    }
    .todayVisit {
      color: #fc573b !important;
    }
    .totalVisit {
      color: #be63f9 !important;
    }
  }
</style>
<style lang="scss" scoped>
  .main {
    padding: 10px;
    .app-container {
      margin: 0 0 10px 0;
    }
    .user-container {
      padding: 15px;
    }
    .user-wrapper {
      width: 100%;
      display: inline-block;
      .user-header {
        display: inline-block;
        vertical-align: middle;
        img {
          width: 5rem;
          margin: .5rem 1rem;
          border-radius: 50%
        }
      }
      .user-info {
        display: inline-block;
        vertical-align: middle;
        .random-message {
          font-size: 1rem;
          margin-bottom: .5rem;
          color: #333;
        }
        .user-dept, .user-login-info {
          color: rgba(0, 0, 0, 0.45);
          margin-bottom: .5rem;
          font-size: .9rem;
          line-height: 1.1rem;
        }
      }
    }
    .user-visits {
      text-align: center;
      padding-right: 2rem;
      margin-top: 1rem;
      vertical-align: middle;
      .num {
        font-weight: 600;
      }
    }
    .project-wrapper {
      padding: 0;
      .project-header {
        padding: 18px;
        margin-bottom: 16px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        td {
          width: 50%;
          border-top: 1px solid #f1f1f1;
          border-bottom: 1px solid #f1f1f1;
          padding: .7rem;
          .project-avatar-wrapper {
            display:inline-block;
            float:left;
            margin-right:.7rem;
            .project-avatar {
              color: #42b983;
              background-color: #d6f8b8;
            }
          }
          &:nth-child(odd) {
            border-right: 1px solid #f1f1f1;
          }
        }
      }
      .project-detail {
        display:inline-block;
        float:left;
        text-align:left;
        width: 75%;
        .project-name {
          font-size:.9rem;
          margin-top:-2px;
          font-weight:600;
        }
        .project-desc {
          color:rgba(0, 0, 0, 0.45);
          p {
            margin: 5px 0 0 0;
            font-size: .85rem;
            line-height: 1.4rem;
            white-space:normal;
          }
        }
      }
    }
    @media screen and (max-width: 1366px)
    {
      .user-info {
        max-width: 25rem;
      }
    }
    @media screen and (max-width: 1300px)
    {
      .user-info {
        max-width: 19rem;
      }
    }

    @media screen and (max-width: 1120px)
    {
      .user-info {
        max-width: 17rem;
      }
    }
  }
</style>
