<template>
  <div :class="[multiPage === true ? 'multi-page':'single-page', 'not-menu-page', 'main-page']">
    <a-row :gutter="8" class="head-meta">
      <a-card class="head-meta-card">
        <a-col :span="12">
          <div class="head-meta-avatar" v-if="avatar">
            <img alt="头像" :src="avatar" v-if="avatar">
          </div>
          <div class="head-meta-particulars">
            <div class="head-meta-welcome">
              {{welcomeMessage}}
            </div>
            <div class="head-meta-desc">
              <p>{{user.userName ? user.userName : ''}} | {{user.roleName ? user.roleName : '暂无角色'}}</p>
            </div>
            <div class="head-meta-time">上次登录时间：{{user.lastLoginTime ? user.lastLoginTime : '第一次访问系统'}}</div>
          </div>
        </a-col>
      </a-card>
    </a-row>
    <div class="main-chart-view">
      <div class="chart-view">
        <VisitCountChart></VisitCountChart>
      </div>
      <div class="chart-view">
        <UserRoleChart></UserRoleChart>
      </div>
    </div>
    <div class="main-chart-view" v-if="false">
      <div class="chart-view">
        <VisitCountLineChart></VisitCountLineChart>
      </div>
    </div>
    <a-divider style="height: 2px; background-color: #7cb305" >技术栈</a-divider>
    <div class="text-item-view">
      <div class="item-view" v-for="(item,index) in itemTableList" :key="index">
        <div class="item-title">
          {{item.itemName}}
        </div>
        <div class="item-description">
          {{item.description}}
        </div>
      </div>
    </div>
    <a-row :gutter="8" class="main-item-view">
      <a-col :span="24" class="item-title-view">
        <div class="item-view">
          <a-divider>我们的优势</a-divider>
          <p class="item-content">
            歌者快速开发平台是安全、稳定、持续更新的基础平台与解决方案，避免重复造轮子，专注于业务逻辑
          </p>
        </div>
      </a-col>
      <a-col :span="12" class="item-content-view">
        <a-card hoverable class="item-view" style="width: 240px">
          <img
              slot="cover"
              alt="example"
              :src="this.aliCodngGuideUrl"
          />
          <a-card-meta title="高质量代码">
            <template slot="description">
              产品附带有完善的二次开发文档，文档不断更新。
              整体代码简洁易懂，符合《阿里巴巴JAVA开发手册》规范要求。
              是作为二次开发，毕业设计，快速开发的利器。
            </template>
          </a-card-meta>
        </a-card>
        <a-card hoverable class="item-view" style="width: 240px">
          <img
              slot="cover"
              alt="example"
              :src="this.weChatQRCodeUrl"
          />
          <a-card-meta title="联系我们">
            <template slot="description">
              如需获取源码，共同交流，请微信扫码联系我们。
              只要共同交流，才会有所进步。
              只要阅读源码，才能了解项目。
            </template>
          </a-card-meta>
        </a-card>
        <a-card hoverable class="item-view" style="width: 240px">
          <img
              slot="cover"
              alt="example"
              :src="this.weChatDonateQRCodeUrl"
          />
          <a-card-meta title="微信捐赠">
            <template slot="description">
              如果您想捐赠此项目，帮我们以更多动力优化此项目，请扫码微信捐赠
            </template>
          </a-card-meta>
        </a-card>
        <a-card hoverable class="item-view" style="width: 240px">
          <img
              slot="cover"
              alt="example"
              :src="this.aliPayDonateQRCodeUrl"
          />
          <a-card-meta title="支付宝捐赠">
            <template slot="description">
              如果您想捐赠此项目，帮我们以更多动力优化此项目，请使用支付宝扫码捐赠
            </template>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import VisitCountChart from './VisitCountChart'
import VisitCountLineChart from './VisitCountLineChart'
import UserRoleChart from './UserRoleChart'
import {mapState} from 'vuex'
import moment from 'moment'
moment.locale('zh-cn')

export default {
  name: 'MainPage',
  components: {
    VisitCountChart:VisitCountChart,
    UserRoleChart:UserRoleChart,
    VisitCountLineChart:VisitCountLineChart
  },
  data () {
    return {
      series: [],
      chartOptions: {
        chart: {
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '35%'
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: []
        },
        fill: {
          opacity: 1

        }
      },
      itemTableList: [
        {
          itemName: 'SpringBoot',
          description: 'SpringBoot 2.x。',
        },
        {
          itemName: 'Shiro',
          description: '轻量级权限框架。',
        },
        {
          itemName: 'MySQL',
          description: 'MySQL为高性能数据库。',
        },
        {
          itemName: 'Redis',
          description: '高速缓存数据库。',
        },
        {
          itemName: 'Ant-Design',
          description: '基于VUE的Web组件。',
        }
      ],
      todayIp: '',
      todayVisitCount: '',
      totalVisitCount: '',
      userRole: '',
      userDept: '',
      lastLoginTime: '',
      welcomeMessage: ''
    }
  },
  computed: {
    ...mapState({
      multiPage: state => state.setting.multiPage,
      user: state => state.account.user
    }),
    avatar () {
      return `static/avatar/${this.user.avatar}`
    }
  },
  methods: {
    welcome () {
      const date = new Date()
      const hour = date.getHours()
      let time = hour < 6 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour <= 18 ? '下午好' : '晚上好')))
      let welcomeArr = [
        '欢迎访问系统',
        /*'今天在群里吹水了吗',
        '今天吃了什么好吃的呢',
        '今天您微笑了吗😊',
        '今天帮助别人解决问题了吗',
        '准备吃些什么呢',
        '周末要不要去看电影？'*/
      ]
      let index = Math.floor((Math.random() * welcomeArr.length))
      return `${time}，${this.user.userName}，${welcomeArr[index]}`
    }
  },
  mounted () {
    this.welcomeMessage = this.welcome()
    //主页 拿到主页的的访问统计等等
    let statisticsVisitCountUrl = `api/v1/platformStatistics/statisticsVisitCount/${this.user.userName}`
    this.$get(statisticsVisitCountUrl).then((r) => {
      let data = r.data.data
      this.todayIp = data.todayIp
      this.todayVisitCount = data.todayVisitCount
      this.totalVisitCount = data.totalVisitCount
    }).catch((r) => {
      console.error(r)
      this.$message.error('拿到首页信息失败')
    })
  }
}
</script>
<style lang="less">
  .main-page {
    .head-meta {
      margin-bottom: .5rem;
      .head-meta-card {
        padding: .5rem;
        border-color: #f1f1f1;
        .head-meta-avatar {
          display: inline-block;
          float: left;
          margin-right: 1rem;
          img {
            width: 5rem;
            border-radius: 2px;
          }
        }
        .head-meta-particulars {
          display: inline-block;
          float: left;
          .head-meta-welcome {
            font-size: 1.05rem;
            margin-bottom: .1rem;
          }
          .head-meta-desc {
            color: rgba(0, 0, 0, 0.45);
            font-size: .8rem;
            padding: .2rem 0;
            p {
              margin-bottom: 0;
            }
          }
          .head-meta-time {
            color: rgba(0, 0, 0, 0.45);
            font-size: .8rem;
            padding: .2rem 0;
          }
        }
      }
    }
    .main-item-view{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      width: 100%;
      .item-title-view{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        //border: 1px solid #dc2828;
        .item-view{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          //border: 1px solid #dc2828;
          .item-content{
            width: 100%;
            font-weight: bold;
            font-size: 20px;
            color: rgb(42,132,255);
          }
        }
      }
      .item-content-view{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-end;
        width: 100%;
        .item-view{
          margin: 10px 20px;

        }
      }
    }
    .main-chart-view{
      width:100%;
      //flex-wrap:wrap;
      //border: 2px solid #dc2828;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .chart-view{
        //border: 2px solid #dc2828;
        width:50%;
      }
    }
    .text-item-view{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-end;
      width: 100%;
      flex-wrap:wrap;
      .item-view{
        margin: 10px 10px;
        color: rgb(42,132,255);
        font-size: 20px;
        font-weight: bold;
        //border: 2px solid rgb(63, 255, 42);
        box-shadow: 0px 5px 5px rgb(143, 147, 143);
        .item-title{

        }
        .item-description{

        }
      }
    }
  }
</style>
