<template>
  <div class="knowledge">
    <div class="knowledge-list">
      <div
        v-for="(item, index) in knowledgeList"
        :key="index"
        class="knowledge-list-detail"
      >
        <div class="knowledge-list-detail-img">
          <!-- <img  src="@/assets/BLT.png" alt="" />
          <img v-else="item.file == false" src="@/assets/essence.png" alt="" /> -->
          <i v-if="item.filetype == 1" class="el-icon-folder-opened" />
          <i v-if="item.filetype != 1" class="el-icon-document" />
        </div>
        <div class="knowledge-list-detail-content">
          <div
            class="knowledge-list-detail-content-title"
            @click="knowledgeDetail(item.fileid, item.fatherid)"
          >
            {{ item.title }}
          </div>
          <div class="knowledge-list-detail-content-text">
            <div>创建人:{{ item.name }}</div>
            <div>{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "@/plugins/axios.js";
import config from '@/config.js';
export default {
  data() {
    return {
      userId: this.$store.getters["session/get"]("userId"), // 获取当前登陆用户的ID
      userInfo: "",
      qywxUserid: "",
      knowledgeList: [],
    };
  },
  computed: {},
  mounted() {
    const params = {
      include: "groups,wechat",
    };
    this.$store
      .dispatch("jv/get", [`users/${this.userId}`, { params }])
      .then((res) => {
        this.userInfo = JSON.parse(res.wechat_info);
        this.qywxUserid = this.userInfo.userid;
        if (!this.qywxUserid) {
          this.$message.warning(`请先登录`);
          return false;
        }
        // 调用后台获取文件列表
        axios
          .get(
             config.WEI_PAN_URL+`/weipan/getfirstfilelist?userId=${this.qywxUserid}`
          )
          .then((res) => {
            if (res.data.result.file_list != null) {
              const filelist = res.data.result.file_list.item;
              this.knowledgeList = [];
              filelist.forEach((element) => {
                if (element.file_status == "1") {
                  const knowledge = {
                    title: element.file_name,
                    name: element.create_user_name,
                    time: element.ctime,
                    fileid: element.fileid,
                    fatherid: element.fatherid,
                    filetype: element.file_type,
                  };
                  this.knowledgeList.push(knowledge);
                }
              });
            } else {
              this.$message.warning(`当前微盘无文件`);
            }
          });
      });
  },
  methods: {
    knowledgeDetail(fileid, fatherid) {
      this.$router.push({
        path: "/knowledge/knowledgeDetail",
        query: {
          id: fileid,
          fatherid: fatherid,
          useid: this.qywxUserid,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.knowledge {
  width: 1009px;
  &-list {
    &-detail {
      float: left;
      width: 263px;
      // height: 105px;
      display: flex;
      background: #fff;
      margin-bottom: 15px;
      padding: 32px 20px;
      margin-left: 10px;
      &-img {
        width: 30px;
        height: 30px;
        i {
          width: 30px;
          height: 30px;
          font-size: 30px;
        }
        .el-icon-folder-opened {
          color: #00a1ff;
        }
        .el-icon-document {
          color: #ffbc00;
        }
      }
      &-content {
        margin-left: 10px;
        float: left;
        &-title {
          margin-bottom: 5px;
          &:hover {
            cursor: pointer;
          }
        }
        &-text {
          width: 200px;
          // display: flex;
          // justify-content: space-between;
          div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
