<template>
  <div class="container">
    <div v-loading="loading" class="group-container">
      <div v-for="item in list" class="group-item">
        <div class="group-item-top">
          <span class="tag">共享文档</span>
          <span>{{ item.dataSetCode }}</span>
        </div>
        <div class="group-item-bottom">
          <div class="name">{{ item.dataSetName }}</div>
          <div class="count">
            <span>{{ item.count }}</span>
            <i class="el-icon-right icon" @click="toCatalog(item.dataSetCode)"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {statisticsDatasetCount} from "@/api/document/resource";

export default {
  name: "Home",
  data() {
    return {
      list: [],
      loading: false
    }
  },
  methods: {
    toCatalog(dataSetCode){
      this.$router.push({ path: '/catalog', query: { dataSetCode } })
    },
  },
  created() {
    this.loading = true
    statisticsDatasetCount().then(res => {
      if (res.code === 200) {
        this.list = res.data
      }
    }).finally(_ => {
      this.loading = false
    })
  }
}
</script>

<style lang="scss" scoped>

.group-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;

  .group-item {
    width: 200px;
    height: 80px;
    border: 1px #dfe6ec solid;
    margin: 8px;

    .group-item-top {
      height: 25px;
      border-bottom: 1px #dfe6ec solid;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0 4px;

      .tag {
        background-color: #3ebdef;
        height: 21px;
        color: #FFFFFF;
        padding: 0 8px;
      }
    }

    .group-item-bottom {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 55px;

      .name {
        padding-left: 4px;
      }

      .count {
        padding-left: 4px;
        padding-right: 8px;
        display: flex;
        justify-content: space-between;

        .icon {
          font-size: larger;
          border: 2px #eebb95 solid;
          border-radius: 20px;
          color: #eebb95;
          cursor: pointer;
        }
      }
    }
  }

  .group-item:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
}
</style>
