daikins/.svn/pristine/de/de13cc82437bbef7630dab83bcd19c3797a255c3.svn-base

<template>
  <div class="tree-node">
    <div v-for="(it, index) in data" :key="index" class="tree-item expand">
      <div class="sub-title" @click="clickSubTitle(it, index)">
        <span v-if="isCount" class="index-content">{{ index + 1 }})</span>
        {{ it.name }}
        <span class="icon-arrow" @click="toggleHandler(it)" v-if="!isCount">
          更多
        </span>
      </div>
      <!-- BCP历年速报 -->
      <div class="file-container" v-if="it.isShow">
        <div class="file-content" v-if="it.fileList&&it.fileList.length > 0" >
          <!-- <div class="file-title">
                        <span>{{idx + 1}})</span>
                        {{file.title}}
                    </div> -->
                    <!-- lujinli -->
          <!-- <div class="file-icon" @click="clickFileHandler(it.fileList[0])">
            {{ computedFileName(it.fileList[0].filePath) }}
          </div> -->
          <div v-for="(item, index) in it.fileList" >
            <div v-if="index < 2" class="file-icon"  @click="clickFileHandler(it.fileList[0])">
              <p >{{ item.title }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 供方健康诊断 -->
      <div v-for="(item, index) in it.childList" >
            <div  v-for="(ite, inde) in item.fileList">
              <div class="file-icon" v-if="index < 2"  @click="clickFileHandler(item.fileList[0])"  >
                <p >{{ ite.title }}</p>
              </div>
              
            </div>
          </div>
      <!-- <div v-if="it.isShow">
        <s-tree :isCount="true" class="second-tree" v-if="it.childList.length > 0" @clickFile="receiveClickFileHandler"
          @clickMore="receiveClickMoreHandler" :data="it.childList"></s-tree>
      </div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import sTree from "./sTree.vue";
const emit = defineEmits(["clickFile", "clickMore", "changeIsShow"]);
type Props = {
  data?: [];
  isCount?: false;
};
const isShow = ref(false);

defineProps<Props>();
const computedFileName = (name) => {
  let s = name.lastIndexOf("/");
  let e = name.lastIndexOf(".");
  return name.slice(s + 1, e);
};
const toggleHandler = (item) => {
  // ev.target.parentNode.parentNode.classList.toggle("expand");
  emit("clickMore", item);
};
function clickFileHandler(obj) {
  console.log(obj)
  emit("clickFile", obj);
}
function receiveClickFileHandler(obj) {

  emit("clickFile", obj);
}
function receiveClickMoreHandler(item) {
  emit("clickMore", item);
}
const clickSubTitle = (item: any, index: number) => {
  emit("changeIsShow", index);
};
</script>
<script lang="ts">
export default {
  name: "sTree",
};
</script>
<style scoped lang="less">
.file-icon {
  display: flex;
  align-items: center;
  height: 20px;
  background-image: url("./images/biq2.png");
  background-size: 24px 20px;
  background-repeat: no-repeat;
  background-size: left center;
  padding-left: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 24px;
  cursor: pointer;
}

.second-tree {
  margin-left: 28px;
}

.tree-item {
  margin-bottom: 4px;

  .file-content {
    margin-bottom: 2px;
  }
}

.tree-item.expand {
  .icon-arrow {
    // background-image: url("./images/san22.png");
  }

  .file-content {
    display: block;
  }
}

.file-content {
  padding-left: 14px;
  margin-right: 16px;
  line-height: 24px;
  display: none;

  .file-title {
    display: block;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 28px;
    position: relative;
    text-overflow: ellipsis;

    span {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 24px;
      margin-right: 4px;
      text-align: center;
    }
  }

  >div:not(:last-child) {
    margin-bottom: 2px;
  }
}

.tree-item .tree-item .sub-title::before {
  content: unset;
}

.sub-title {
  display: flex;
  line-height: 28px;
  font-size: 1.1em;
  align-items: center;

  &::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    margin-right: 6px;
  }

  .file-icon {
    display: flex;
    align-items: center;
    height: 20px;
    background-image: url("./images/biq2.png");
    background-size: 24px 20px;
    background-repeat: no-repeat;
    background-size: left center;
    padding-left: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 24px;
  }

  .icon-arrow {
    display: block;
    background-image: url("./images/gdd2.png");
    background-repeat: no-repeat;

    background-size: 12px 11px;
    background-position: right center;
    // width: 12px;
    // height: 9px;
    padding: 4px;
    line-height: 24px;
    padding-right: 12px;
    font-size: 14px;
    color: #00e4ff;
    margin-left: auto;
    box-sizing: content-box;
    // background-origin: content-box;
    // background-repeat: no-repeat;
    cursor: pointer;
  }
}

.tree-node {}

.file-icon:hover {
  color: #00e4ff;
}

.tree-item {
  padding-bottom: 8px;
  margin-bottom: 8px;
  position: relative;
}

.tree-item .tree-item {
  margin-bottom: 0;
  padding-bottom: 0;
}

.tree-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.5px;
  background: white;
  bottom: -2px;
  background: rgba(12, 25, 180, 0.8);
}

.second-tree .tree-item::after {
  content: unset;
}

.sub-title {
  position: relative;
}

.sub-title .index-content {
  // position: absolute;
  // left: -24px;
  // top: 0;
  display: block;
  width: 24px;
  margin-left: -16px;
  margin-right: 4px;
  text-align: center;
}</style>