<template>
  <div class="dashboard">
    <div class="header_area">
      <div class="container">
        <div class="img_nav">
          <span class="img-avatar">
            <img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png">
          </span>
        </div>
        <div class="content_nav">
          <div class="content_title">
            你好，祝你开心每一天！
          </div>
          <div class="content_description">
            有勇气，有信心，艰苦奋斗不放松。
          </div>
        </div>
      </div>
      <div class="container_content">
        <div class="extraContent">
          <div class="statItem">
            <a-statistic title="已上传文件" :value="fileSize" />
          </div>
          <div class="statItem">
            <a-statistic title="访问人次" :value="loginCount" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'dashboardAdmin',
  components: {},
  data () {
    return {
      fileSize: 0,
      loginCount: 0
    };
  },
  created () {
    this.getDirectorySize()
    this.getLoginCount()
  },
  methods: {
    getDirectorySize () {
      this.$api.statistical.getDirectorySize().then(({ data = {} }) => {
        if (data) {
          this.fileSize = data
        }
      }).catch(() => { })
    },
    getLoginCount () {
      this.$api.statistical.getLoginCount().then(({ data = {} }) => {
        if (data) {
          this.loginCount = data.count1
        }
      }).catch(() => { })
    },
  },
};
</script>
<style scoped lang="less">
.dashboard {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  .header_area {
    height: 120px;
    width: 100%;
    display: flex;
    background: #fff;
    .container {
      width: calc(100% - 260px);
      height: 100%;
      display: flex;
      .img_nav {
        height: 120px;
        width: 120px;
        position: relative;
      }
      .img_nav .img-avatar {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 72px;
        height: 72px;
        border-radius: 72px;
        img {
          height: 72px;
          width: 72px;
        }
      }
      .content_nav {
        height: 120px;
        width: calc(100% - 120px);
        .content_title {
          margin: 30px 0px 8px 0px;
          color: rgba(0, 0, 0, 0.85);
          font-weight: 500;
          font-size: 20px;
          line-height: 28px;
        }
        .content_description {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
    .container_content {
      width: 260px;
      height: 100%;
      position: relative;
      .extraContent {
        margin: 36px 0px 0px 0px;
        float: right;
        margin-right: 30px;
      }
      .statItem {
        display: inline-block;
        .ant-statistic {
          padding: 0 12px;
        }
        ::v-deep.ant-statistic .ant-statistic-title {
          text-align: center;
        }
        ::v-deep.ant-statistic .ant-statistic-content {
          text-align: center;
        }
      }
    }
  }
}
</style>