<template>
  <div v-loading="loading" 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/file.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 class="knowledge-list-detail-content-text-time">
              {{ 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: "",
      loading: false,
      knowledgeList: [],
    };
  },
  computed: {},
  mounted() {
    const params = {
      include: "groups,wechat",
    };
    if (!this.userId) {
      this.getCode();
    }
    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.getCode();
        }
        this.loading = true;
        // 调用后台获取文件列表
        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") {
                  var date =
                    element.ctime.split(" ")[0].split("/")[2] +
                    "/" +
                    element.ctime.split(" ")[0].split("/")[1] +
                    "/" +
                    element.ctime.split(" ")[0].split("/")[0] +
                    " " +
                    element.ctime.split(" ")[1];

                  const knowledge = {
                    title: element.file_name,
                    name: element.create_user_name,
                    time: date,
                    fileid: element.fileid,
                    fatherid: element.fatherid,
                    filetype: element.file_type,
                  };
                  this.knowledgeList.push(knowledge);
                }
                this.loading = false;
              });
            } else {
              this.$message.warning(`当前微盘无文件`);
              this.loading = false;
            }
          });
      });
  },
  methods: {
    getCode() {
      if (!this.userInfo) {
        let ua = window.navigator.userAgent.toLowerCase();
        if (
          ua.match(/MicroMessenger/i) == "micromessenger" &&
          ua.match(/wxwork/i) == "wxwork"
        ) {
          // 静默授权
          //const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
          const local = "http://wiki.bailuntec.com/user/login";
          const APPID = "ww833808f6b8dc0745"; // 企业微信
          window.location.href =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            APPID +
            "&redirect_uri=" +
            encodeURIComponent(local) +
            "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
        } else {
          this.$message.warning(`请先登录`);
        }
      }
    },
    knowledgeDetail(fileid, fatherid) {
      this.$router.push({
        path: "/knowledge/knowledgeDetail",
        query: {
          id: fileid,
          fatherid: fatherid,
          useid: this.qywxUserid,
        },
      });
    },
  },
  head() {
    return {
      title: "知识库",
    };
  },
};
</script>
<style lang="scss" scoped>
.knowledge {
  width: 1009px;
  &-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    &-detail {
      width: 298px;
      height: 119px;
      // height: 105px;
      display: flex;
      background: #fff;
      margin-bottom: 15px;
      margin-left: 16px;
      padding: 33px 39px 41px 21px;
      &-img {
        width: 27px;
        height: 33px;
        img {
          width: 27px;
          height: 33px;
          margin: 5px;
        }
        // i {
        //   width: 30px;
        //   height: 30px;
        //   font-size: 30px;
        // }
        // .el-icon-folder-opened {
        //   color: #00a1ff;
        // }
        // .el-icon-document {
        //   color: #ffbc00;
        // }
      }
      &-content {
        margin-left: 14px;
        &-title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 20px;
          font-size: 14px;
          margin-bottom: 5px;
          color: #666;
          &:hover {
            cursor: pointer;
          }
        }
        &-text {
          display: flex;
          justify-content: space-between;
          color: #999999;
          line-height: 17px;
          font-size: 12px;
          div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &-time {
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style>
