<template>
  <div class="app-container home">
    <header>
      <div class="icon">
        <el-avatar :size="60" :src="avatar" />
      </div>
      <div class="info">
        <h3>{{ warmMessage }}</h3>
        <p>
          <span>{{ userinfo.userName }}</span>
          <el-divider direction="vertical" />
          <span>{{ userinfo.dept.deptName || '未设置部门' }}</span>
          <el-divider direction="vertical" />
          <span>{{ userinfo.postGroup || '未设置岗位' }}</span>
        </p>
      </div>
      <div class="count">
        <el-statistic
          :value="0"
          :value-style="{ fontSize: '32px' }"
          title="我的待办"
        />
        <el-divider direction="vertical" />
        <el-statistic
          :value="0"
          :value-style="{ fontSize: '32px' }"
          title="我的已办"
        />
      </div>
    </header>
    <section />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import messageGenerator from '@/utils/warmMessageGenerator'
export default {
  name: 'Index',
  data() {
    return {
      warmMessage: ''
    }
  },
  computed: {
    ...mapGetters(['userinfo', 'avatar'])
  },
  created() {
    this.warmMessage = messageGenerator(
      this.userinfo.nickName
    ).generateMessage()
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  padding: 0;
  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  p {
    padding: 0;
    margin: 0;
  }
  & > header {
    height: 150px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 0 0 8px 8px;

    .icon {
      margin-right: 20px;
    }

    .info {
      flex-grow: 1;
      width: 0;
      h3 {
        margin: 0;
        margin-bottom: 10px;
        font-size: 20px;
      }
    }

    .count {
      display: flex;
      align-items: center;
      ::v-deep {
        .el-divider {
          margin: 0 25px;
          height: 3em;
        }
        .el-statistic {
          cursor: pointer;
        }
      }
    }
  }

  & > section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 16px;

    .card {
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
    }
  }
}
</style>
