<template>
  <div class="l_box">
    <div class="l_type_box" v-loading="isLoading">
      <div class="header" @click="checkType('0')">
        <img style="width: 35px;margin-right: 10px;" src="../../../assets/knowledge.png" alt="">
        <span class="title">{{ lang.myKnowledgeBase }}</span>
      </div>

      <div class="nav">

        <div class="nav_b" v-for="(item, index) in typeArray" :key="index">
          <div class="nav_box" style="display: flex;justify-content: space-between;"
           :class="{ open: item.open, active2: pid.split('/')[0] == item.id }"
            @click="checkType(item.id)">
            <el-tooltip :content="item.name" placement="top" effect="dark">
              <span class="name" style="color: #667085 !important;">{{ item.name }}</span>
            </el-tooltip>
            <span class="icon"  :class="{ haveL: item.child.length }" @click.stop="typeOpen(index)"></span>

          </div>
          <div class="nav_child_box" v-if="item.open && item.child.length">
            <div class="nav_box" :class="{ active: pid == item.id + '/' + item2.id }" v-for="(item2, index2) in item.child"
              :key="index + '-' + index2" @click="checkType(item.id + '/' + item2.id, item2.folderid)">
              <!-- <span class="icon"></span> -->
              <img style="width: 20px;margin-right: 5px;" src="../../../assets/listfolder2.svg" alt="">
              <el-tooltip :content="item2.name" placement="top" effect="dark">
                <span class="name">{{ item2.name }}</span>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="l_file_box">
      <!-- <div class="bread_box">
        <span class="bread" :class="{is: getPid(item.name) == pid}" v-for="(item, index) in getBread()" :key="index" @click="checkType2(getPid(item.name) == pid, getPid(item.name))">{{ item.name }}</span>
        </div> -->
      <!-- <div v-if="pid.split('/').length == 1 && moFolderid" style="height: .5px;background-color: #e7e7e7;width: 100%;margin-bottom: 20px;margin-top: 20px;"></div> -->

      <div class="BarCss" v-if="pid.split('/').length == 1">
        <div class="BarBlock1" :class="barNam == 0 ? 'BarSpan':'' ">
          <div class="BarBlock" @click="cutPage(0)" >{{lang.allFolders}}</div>
        </div>

        <div class="BarBlock1" :class="barNam == 1 ? 'BarSpan':'' ">
          <div class="BarBlock" @click="cutPage(1)" >{{lang.allFiles}}</div>
        </div>
        <div class="BarBlock1" :class="barNam == 2 ? 'BarSpan':'' ">
          <div class="BarBlock" @click="cutPage(2)" >{{lang.sharedSpaces}}</div>
        </div>
      </div>


      <folder :userid="userid" :typeArray="typeArray" :pid="pid" @checkType="checkType" v-show="pid.split('/').length == 1 && (barNam ==0 || barNam == 2)" :showBool="pid.split('/').length == 1 && (barNam ==0 || barNam == 2)" ref="folder"></folder>


      <fileBox :userid="userid" :typeArray="typeArray" :pid="pid" :type='type' ref="fileBox" v-show="pid.split('/').length == 1 && moFolderid && barNam ==1" :moFolderid="moFolderid" :myFolderArray="myFolderArray">
      </fileBox>


      <folderDetail :userid="userid" :pid="pid" :typeArray="typeArray"  v-if="pid.split('/').length > 1 && folderid && moFolderid" :folderid="folderid" :moFolderid="moFolderid" @checkType="checkType"></folderDetail>

    </div>
  </div>
</template>

<script>
import fileBox from './fileBox.vue';
import folder from './folder.vue';
import folderDetail from './folderDetail.vue';

export default {
  components: {
    fileBox,
    folder,
    folderDetail
  },
  props: {
    type: {
      type: String,
      default: '1'
    },
  },
  data() {
    return {
      navigationBarList:[
          {tit:'所有文件夹'},
          {tit:'所有文件'},
      ],
      barNam:0,
      userid: this.$route.query.userid,
      pid: '0',
      addInput: '',
      addVisbile: false,
      addVisbile2: '',
      isLoading: false,
      typeArray: [
        { name: this.lang.myFolders,child: [], id: '0', open:true },
        // { name: '共享文件夹',child: [], id: '1' }
      ],
      actionType: '',
      renameType: '',
      renameInput: '',
      pidArray: [],
      folderid: "",
      moFolderid: "",
      myFolderArray: [],
    }
  },
  computed: {
    getBread(){
      return function () {
        const _pid = this.pid.split('/');
        let array = [];
        let index = this.typeArray.findIndex(item => item.id === _pid[0]);

        if (index !== -1) {
            array.push({ name: this.typeArray[index].name, id: this.typeArray[index].id });
        }

        for (let i = 1; i < _pid.length; i++) {
            const childIndex = this.typeArray[index].child.findIndex(child => child.id === _pid[i]);
            if (childIndex !== -1) {
                array.push({ name: this.typeArray[index].child[childIndex].name, id: this.typeArray[index].child[childIndex].id });
            }
        }
        console.log(array);

        return array;
      };
    },
    getPid(){
      return function (item) {
        let array = this.getBread()
        let pid = []
        for(var i = 0; i < array.length; i++){
          if(array[i].name == item){
            pid.push(array[i].id)
            break;
          }else{
            pid.push(array[i].id)
          }
        }
        return pid.join('/');
      };
    }
  },
  methods: {
    cutPage(val){
      if (this.barNam === val) {
        return;
      }
      this.barNam = val;
      if (val === 2) {
        this.checkType('1');
      }else {
        this.checkType('0');
      }
    },
    getData() {
      this.isLoading = true;
      let params = {
        uid: this.userid,
      };
      this.ajax
        .post(this.$store.state.api + "getFolder", [params])
        .then((res) => {
          this.isLoading = false;
          let data = res.data[0]
          let data2 = res.data[1]
          let data3 = res.data[2]
          this.typeArray[0].child = data
          this.moFolderid = res.data[1][0].folderid;
          if(this.pid.split('/')[0] == '0'){
            this.myFolderArray = data
          }else {
            this.myFolderArray = data3
          }
          // this.$refs['fileBox'].getData()
          // console.log(this.$refs['fileBox']);
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    typeOpen(index) {
      if (this.typeArray[index].child.length > 0) {
        this.typeArray[index].open = !this.typeArray[index].open
        this.$forceUpdate();
      }
    },
    checkType(pid, folderid) {
      if (this.pid == pid) {
        return
      }
      const [id] = pid.split('/');
      if(id[0] == '0' && this.barNam == 2){
        this.barNam = '0'
      }
      const index = this.typeArray.findIndex(item => item.id === id);
      if (index !== -1) {
        this.typeArray[index].open = true;
      }
      this.pid = pid;
      this.folderid = folderid;
      this.getData()
      this.$forceUpdate()
    },
    checkType2(is, pid) {
      if(!is){
        this.folderid = ""
        this.checkType(pid)
      }
    }
  },
  beforeDestroy() {
  },
  mounted() {
    this.getData();
  },
}
</script>

<style scoped>
.l_box {
  width: 100%;
  height: 100%;
  background: #F4F4F7;
  box-sizing: border-box;
  display: flex;
  /* padding:10px 8px; */
}

.l_type_box {
  width: 200px;
  min-width: 200px;
  height: 100%;
  /* background: #fff; */
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  border-right: .5px #E2E8F0 solid;
  /* border: 1px #ddd2d2 solid; */
}

.l_type_box>.header {
  width: 100%;
  padding: 10px 15px 10px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #E7E7E7;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  cursor: pointer;
}

.l_type_box>.header>.title {
  font-size: 20px;
  font-weight: bold;
}

.l_type_box>.header>.add {
  display: flex;
  cursor: pointer;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  background: rgb(0, 97, 255);
  color: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 14px;
  align-items: center;
}

.l_type_box>.header>.add::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background-image: url('../../../assets/icon/sourceFile/icon_add.png');
  background-size: 100% 100%;
}

.l_type_box>.nav {
  width: 100%;
  height: calc(100% - 62px);
  box-sizing: border-box;
  padding: 12px 6px;
  overflow: auto;
}

.l_type_box>.nav>.nav_b + .nav_b {
  margin-top: 10px;
}

.l_type_box>.nav>.nav_b>.nav_box {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  font-family: PingFang SC;
  border-radius: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.l_type_box>.nav>.nav_b>.nav_box>.name {
  font-size: 16px;
  color: #000000e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l_type_box .active2 {
  background: #fff;
}

.l_type_box .active2 .name {
  color: #3681FC !important;
}

.l_type_box .active {
  background-color: #e9f2fc;
  /* background: #3681fc; */
  /* box-shadow: #b7b1b1 0px 3px 5px 0px !important; */
}

.l_type_box .active1 {
  background: #3681fc !important;
}

.l_type_box .active .name,
.l_type_box .active1 .name {
  color: #0354d7 !important;

  /* color: #fff !important; */
}


.l_type_box>.nav>.nav_b>.nav_box:hover {
  /* background: #e0eafb; */
  background-color: #e9f2fc;
}

.l_type_box>.nav>.nav_b>.nav_box:hover .more {
  display: block;
}

.l_type_box>.nav>.nav_b>.nav_box>.icon {
  /* min-width: 16px; */
  height: 13.6px;
  width: 14px;
  background-size: 100% 100%;
  /* margin-right: 10px; */

  /* background: #000; */
  transition: all 0.3s;
}

.l_type_box>.nav>.nav_b>.nav_box>.no {
  background-image: url('../../../assets/icon/sourceFile/icon_no.png');
}


.l_type_box>.nav>.nav_b>.nav_box.active1>.no {
  background-image: url('../../../assets/icon/sourceFile/icon_no_active.png');
}

.l_type_box>.nav>.nav_b>.nav_box>.more {
  cursor: pointer;
  margin: 0 0 0 auto;
  display: none;
  background-image: url('../../../assets/icon/sourceFile/icon_select.png');
}

.l_type_box>.nav>.nav_b>.nav_box>.haveL {
  transform: rotate(-90deg);
  background-image: url('../../../assets/icon/sourceFile/icon_arrow.png');
}

.l_type_box>.nav>.nav_b>.nav_box.active2>.haveL {
  transform: rotate(90deg) ;
  background-image: url('../../../assets/xjt.svg');
}


.l_type_box>.nav>.nav_b>.nav_box.open>.haveL {
  transform: rotate(0deg);
}

.l_type_box>.nav>.nav_b>.nav_child_box {
  margin-top: 10px;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box+.nav_box {
  margin-top: 10px;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box {
  height: 35px;
  font-family: PingFang SC;
  color: #2c3e50;
  width: 100%;
  display: flex;
  align-items: center;
  margin: 8px 0;
  border-radius: 5px;
  padding: 0 0 0 10px;
  box-sizing: border-box;
  cursor: pointer;
}


.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.name {
  font-size: 14px;
  /* color: #000000e6; */
  white-space: nowrap;
  color: #2c3e50;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover {
  background: #e0eafb;
}

/* .l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active:hover {
  background: #5E9AFC;
} */


.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover .more {
  display: block;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.icon {
  min-width: 16px;
  height: 16px;
  background-size: 100% 100%;
  margin-right: 10px;
  transition: all 0.3s;
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.more {
  margin: 0 0 0 auto;
  display: none;
  background-image: url('../../../assets/icon/sourceFile/icon_select.png');
}

.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active>.more {
  background-image: url('../../../assets/icon/sourceFile/icon_select_active.png');
}



.add_box {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 0 3px 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  background: #E1EDFD;
  margin-top: 10px;
}

.add_box>input {
  width: calc(100% - 16px);
  height: calc(100% - 6px);
  box-sizing: border-box;
  border: none;
  margin-left: 16px;
  border-radius: 5px;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
}

.renameInput {
  width: calc(100% - 16px);
  height: calc(100% - 6px);
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
}

.action-div {
  position: absolute;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  /* overflow: hidden; */
  padding: 5px 0;
  box-shadow: 0 0 2px 0px #00000021;
}

.action-div>div {
  width: 115px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  position: relative;
  z-index: 999;
}

.action-div>div:hover {
  background: #e0eafb;
}

.action-div>.move::after {
  content: '';
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  background-image: url('../../../assets/icon/sourceFile/icon_arrow.png');
}

.action-div>.move:hover .pid_box {
  display: flex;
}

.pid_box {
  position: absolute;
  right: 0;
  transform: translateX(100%);
  background: #ffffff;
  flex-direction: column;
  border-radius: 5px;
  /* overflow: hidden; */
  padding: 5px 0;
  box-shadow: 0 0 2px 0px #00000021;
  top: 0;
  display: none;
}

.pid_box>div {
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pid_box>div:hover {
  background: #e0eafb;
}


.l_file_box {
  /* width: calc(100% - 320px); */
  flex: 1;

  /* margin-left: 20px; */
  background: #F4F4F7;
  height: 100%;
  border-radius: 5px;
  overflow: auto;
  padding: 15px 12px 0px 20px;
  box-sizing: border-box;
}

.l_none {
  color: #00000069;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bread_box{
  padding: 15px 10px 0px;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.bread_box > .bread{
  font-size: 18px;
  cursor: pointer;
  color: #a1a1a1;
}

.bread_box > .bread.is{
  color: #000;
  cursor: default;
}

.bread_box > .bread + .bread::before{
  content: '>';
  font-size: 14px;
  margin: 0 8px;
}
.BarCss{
  color: rgba(8, 13, 30, .9);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  padding: 4px ;
  /* margin-top: 25px; */
  display: flex;
  gap:20px;
}
.BarCss .BarBlock1{
  display: flex;
  /* align-items: center; */
  padding: 4px 2px;
  box-sizing: border-box !important;
}
.BarCss .BarBlock{
  cursor: pointer;
  height: 24px;
  line-height: 24px;
}
.BarSpan{
  color: #3370FE;
  border-bottom: 2px #3370FF solid;
}
</style>