<template>
  <div class="detail">
    <div class="detail-content">
      <div class="detail-content-left">
        <div class="detail-content-left-text">
          文件列表
          <el-tree
            v-loading="loading"
            :data="data"
            highlight-current
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }">
              <i :class="data.icon" />
              <span class="detail-content-left-text-custom">{{
                data.label
              }}</span>
            </span>
          </el-tree>
        </div>
      </div>

      <div class="detail-content-right">
        <div v-if="isShowView">
          <el-button size="small" style="ma" @click="openNewForm">
            全屏查看
          </el-button>
          <div v-if="isfile == true">
            <iframe
              id="map"
              :src="fileSrc"
              scrolling="no"
              frameborder="0"
              class="detail-content-right-text"
            />
          </div>
          <div v-if="isfile == false">
            <img :src="fileSrc" class="detail-content-right-text" />
          </div>
        </div>
        <el-input
          v-model="title"
          placeholder="请输入标题"
          style="width: 300px;margin-top:10px;"
        />
        <Vditor
          v-if="isPost"
          :inputTitle="title"
          :publishType="publishType"
          :fileMd5="fileMd5"
          :inputContent="inputContent"
        />
      </div>
    </div>
  </div>
</template>
<script>
import axios from "@/plugins/axios.js";
import handleError from "@/mixin/handleError";
import config from '@/config.js';
export default {
  data() {
    return {
      loading: false,
      isShowView: false,
      isfile: true,
      fileSrc: "",
      isPost: true,
      qywxUserid: "",
      publishType: "knowledge",
      fileMd5: "",
      title: "",
      inputContent: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      list: [],
    };
  },
  computed: {},
  created() {
    this.fileSrc = "";
    this.isShowView = false;
    this.inputContent = "";
    this.title = "";
    this.qywxUserid = "";
    this.data = [];
    this.loading = true;
    // 获取知识库带过来的id
    const fildId = this.$route.query.id;
    const qywxUserid = this.$route.query.useid;
    this.qywxUserid = this.$route.query.useid;
    const fatherid = this.$route.query.fatherid;

    // 获取树状数据
    axios
      .get(
        config.WEI_PAN_URL+`/weipan/getfilelisttree?userId=${qywxUserid}&fildId=${fildId}&fatherid=${fatherid}`
      )
      .then((res) => {
        this.data = res.data.result;
        this.loading = false;
        if (this.data.length == 1) {
          if (this.data[0].file) {
            //触发点击事件
            this.handleNodeClick(this.data[0]);
          }
        }
        console.log(this.data, 222);
      });

    // 监听滚动事件
    // window.addEventListener("scroll", this.onScroll, false);
  },
  methods: {
    openNewForm() {
      window.open(this.fileSrc, "_blank");
    },
    handleNodeClick(data) {
      if (data.file) {
        axios
          .get(
            config.WEI_PAN_URL+`/weipan/getviewfile?userId=${this.qywxUserid}&fileId=${data.id}&md5=${data.md5}&fileName=${data.label}`
          )
          .then((res) => {
            if (!!res.data) {
              let filePath = res.data.result;
              if (!!filePath) {
                this.isShowView = true;
                if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) {
                  this.isfile = false;
                  this.fileSrc = filePath;
                }
                if (
                  /\.(xlsx|xls|csv|doc|docx|docx|rtf|ppt|pptx|pdf|zip|rar|7z|wps|txt|js|json|css|xml|sql|cs)$/.test(
                    filePath
                  )
                ) {
                  this.isfile = true;
                  this.fileSrc = "http://ow365.cn/?i=23468&furl=" + filePath;
                }
              }
            }
            this.fileMd5 = data.md5;
          });
      }
    },
    changTree(index) {
      console.log(index);
    },
  },
  textChange() {
    alert(332);
  },

  // },
  // destroy() {
  //   // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
  //   window.removeEventListener("scroll", this.onScroll);
  // }
};
</script>
<style>
.detail-content-left-text .el-tree-node__expand-icon  {
  display: none;
}

/* .detail-content-left-text
  .el-tree-node__content
  .detail-content-left-text-custom {
  width: 200px;
  overflow: hidden;
} */
</style>
<style lang="scss" scoped>
.iframe-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.iframe-absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.detail {
  width: 1009px;
  &-content {
    display: flex;
    justify-content: space-between;
    &-left {
      background: #fff;
      position: relative;
      width: 220px;
      padding: 10px 0 0 20px;
      overflow: hidden;
      &-text {
        width: 200px;
        position: fixed;
        background: #fff;
        overflow: hidden;
        &-custom {
          overflow: hidden;
        }
      }
    }
    &-right {
      width: 780px;
      background: #fff;
      margin-left: 9px;
      padding: 20px;
      position: relative;
      &-text {
        width: 100%;
        height: 700px;
      }
    }
  }
}
.vditor-tooltipped__ne{
display: none;
}
</style>
