<template>
  <div>
    <div class="home-header">
      <container>
        <a-row align="middle" justify="space-between" type="flex">
          <a-col>
            <div class="home-header-row">
              <div class="home-header-avatar">
                <yo-image :id="$root.global.info.avatar" :size="64" icon="user" type="avatar" />
              </div>
              <div class="home-header-content">
                <h2>
                  {{ $moment().format('A') }}好，
                  <span>{{ $root.global.info.nickName || $root.global.info.name }}</span>，欢迎您登录系统！
                </h2>
                <p>上次IP：{{ $root.global.info.lastLoginIp }} 上次登录时间：{{ $root.global.info.lastLoginTime }}</p>
              </div>
            </div>
          </a-col>
          <a-col>
            <a-icon :style="{ fontSize: '20px', color: '#f80000' }" class="mr-xs" type="mail" />您有
            <a href="#">0</a>封未读邮件，请尽快查收！
          </a-col>
        </a-row>
      </container>
    </div>
    <container class="home-container">
      <a-row :gutter="16">
        <a-col :span="24">
          <Statistics />
        </a-col>
        <a-col :lg="12" :md="24" :xl="16">
          <Task />
          <List />
        </a-col>
        <a-col :lg="12" :md="24" :xl="8">
          <Notice />
          <Charts />
        </a-col>
      </a-row>
    </container>
  </div>
</template>
<script>
import './index.less';

import Statistics from './statistics';
import Task from './task';
import Notice from './notice';
import List from './list';
import Charts from './charts';

export default {
  components: {
    Statistics,
    Task,
    Notice,
    List,
    Charts,
  },
};
</script>