<template>
  <section class="homeRTGT">
    <div class="htaTitle">
      <span class="TitleName"><strong>五库</strong></span>
      <!-- <span class="TitleTab"><em v-for='(item,index) in titleArr' :key='index' @click='titleClick(item,index)' :class='inx==index?"active":""'>{{item.name}}</em></span> -->
      <!-- <span class="more" @click='more'>查看更多>></span> -->
    </div>
    <div class="htaBoxWKlist">
      <ul>
        <li @click="applink('__h0fxOYBf2gPKGICatmN', '项目库')">
          <em>{{ tableObj.projectLibraryNumber }}</em><strong>项目库</strong>
        </li>
        <li @click="applink('__pw297UAJJgIBF9xBtmW', '制度库')">
          <em>{{ tableObj.systemLibraryNumber }}</em><strong>制度库</strong>
        </li>
        <li @click="applink('__10oAyTVxwOhXa88v1Bk', '标准库')">
          <em>{{ tableObj.standardLibraryNumber }}</em><strong>标准库</strong>
        </li>
        <li @click="applink('__uJkyRTCtNDbMdPcF0iy', '专家库')">
          <em>{{ tableObj.specialistLibraryNumber }}</em><strong>专家库</strong>
        </li>
        <li @click="applink('__ZVCG1EamEdKwqHCeYPW', '供应商库')">
          <em>{{ tableObj.supplierLibraryNumber }}</em><strong>供应商库</strong>
        </li>
      </ul>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      params: {},
      tableObj: {},
    };
  },
  mounted() {
    this.list();
  },
  methods: {
    list() {
      this.$api.workbenchfiveLibraryApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableObj = response.data;
        },
      });
    },
    applink(appid, names) {
      let appId = appid;
      let name = names;
      let flag = 1;
      this.$store.dispatch("loadMenus", { appId, name, flag });
    },
  },
};
</script>
<style lang="scss" scoped>
.homeRTGT {
  display: flex;
  flex-direction: column;
  background: #fff;
  // box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  margin-bottom: 24px;
  height: 301px;
  .htaTitle {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    padding: 10px;
    padding-left: 16px;
    display: flex;
    align-items: center;
    .TitleName {
      display: flex;
      align-items: center;
      margin-right: 40px;
      i {
        width: 2px;
        height: 18px;
        background: #f5f9ff;
        margin-right: 4px;
      }
      strong {
        color: rgba(0, 0, 0, 0.85);
        font-size: 16px;
      }
    }
    .TitleTab {
      flex: 1;
      em {
        margin-right: 15px;
        font-size: 16px;
        padding-bottom: 16px;
        cursor: pointer;
        &.active {
          border-bottom: 1px solid #0076f6;
          color: #0076f6;
        }
      }
    }
    .more {
      flex-wrap: 150px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .htaBox {
    padding: 16px 0 16px 16px;
    ul {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      li {
        background: #fff;
        width: 140px;
        height: 100px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        padding: 16px;
        margin-right: 16px;
        margin-bottom: 16px;
        align-items: center;
        text-align: center;
        span {
          margin-bottom: 8px;
          img {
            width: 48px;
            height: 48px;
          }
          strong {
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
    }
  }
  .scrollbarClass {
    .el-scrollbar__wrap {
      overflow: scroll !important;
      height: calc(100% + 20px) !important; //多出来的20px是横向滚动条默认的样式
    }
    .el-table--scrollable-x .el-table__body-wrapper {
      overflow-x: hidden !important;
    }
  }

  .htaBoxWKlist {
    ul {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      li {
        display: flex;
        flex-direction: column;
        //    flex:1;
        align-items: center;
        margin: 24px 0 24px 0;
        cursor: pointer;
        width: 33.3%;
        em {
          display: inline-block;
          height: 57px;
          width: 57px;
          text-align: center;
          line-height: 57px;
          //   padding: 14px;
          background: #e7f0ff;
          border-radius: 14px;
          color: #0967ff;
          margin-bottom: 12px;
          font-weight: bolder;
          font-size: 24px;
          &.lscolor {
            color: #15cd64;
            background: #e7faef;
          }
          &.fscolor {
            color: #ff7946;
            background: #fff1ec;
          }
          &.zscolor {
            color: #7d5fff;
            background: #f2efff;
          }
          &.hscolor {
            color: #ffbf00;
            background: #fff8e5;
          }
        }
        strong {
          color: rgba(0, 0, 0, 0.85);
          font-weight: normal;
        }
      }
    }
  }
}
</style>
