<script setup lang="ts" name="collapseView">
import { ref, computed } from "vue";
import { Collapse, Panel } from "view-ui-plus";

const emit = defineEmits([
  "add",
  "view",
  "mainDeletion",
  "default",
  "childDelete",
  "change",
]);

const props = defineProps<{
  list: Array<any>;
  fatherIndex: Array<any>;
  currentId: Array<any>;
}>();

const listData = computed(() => props.list);
const activeId = computed(() => props.currentId);
const fatherIndex = computed(() => props.fatherIndex);
const childIndex = ref(null);

// 新增
const addClick = (item) => {
  emit("add", item);
};

// 查看
const viewClick = (item, index) => {
  const { isView, list } = item
  if (isView) {
    emit("view", item);
  } else {
    if(list.length <= 0) return
    emit("view", index);
  }
  
};

// 主删除
const mainDeletion = (item) => {
  emit("mainDeletion", item);
};

// 子级监听
const itemClick = (item,index) => {
  childIndex.value = index
  const parentItem = listData.value[fatherIndex.value]
  const data = {
    parentItem: parentItem,
    item: item,
  };
  emit("change", data);
};

// 默认项
const defaultClick = (item) => {
  emit("default", item);
};

// 子删除
const childDelete = (item) => {
  emit("childDelete", item);
};


</script>

<template>
  <div class="collapse">
    <div class="fatherLevel">
      <el-scrollbar style="width: 100%;height: 100%;">
        <div class="panel" :class="fatherIndex === index ? 'active' : ''" v-for="(item, index) in listData" :key="index"  @click.stop="viewClick(item,index)">
          <div class="add" v-if="item.isAdd" @click.stop="addClick(item)">
            <el-icon :size="10" color="#fff">
              <plus />
            </el-icon>
          </div>
          <div class="name">{{ item.dataarea }}</div>
          <el-icon color="rgba(212, 48, 48, 1)" :size="16" v-if="item.isDelete" @click.stop="mainDeletion(item)"
            style="margin-right: 17px;">
            <circle-close-filled />
          </el-icon>
          <el-icon :size="14" color="rgba(53, 64, 79, 1)" v-if="item.list && item.list.length > 0">
            <arrow-right />
          </el-icon>
        </div>
      </el-scrollbar>
    </div>
    <div class="childLevel" v-if="listData[fatherIndex] && listData[fatherIndex].list.length > 0">
      <el-scrollbar style="width: 100%;height: 100%;padding: 0 9px;">
        <div class="panel" :class="activeId === item.id ? 'active' : ''" v-for="(item, index) in listData[fatherIndex].list" :key="index" @click.stop="itemClick(item,index)" >
          <div class="line"></div>
          <div class="name">{{ item.name }}</div>
          <div class="default" v-if="item.defaulttype === '1'"></div>
          <div class="btns" :style="item.defaulttype === '1' ? 'margin-right: 30px;':''">
            <el-icon color="rgba(33, 103, 217, 1)" v-if="item.isCheck && item.defaulttype !== '1'" :size="16" @click.stop="defaultClick(item)" style="margin-right: 10px;">
              <circle-check-filled />
            </el-icon>
            <el-icon color="rgba(212, 48, 48, 1)" v-if="item.isDelete" :size="16" @click.stop="childDelete(item)">
              <circle-close-filled />
            </el-icon>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.collapse {
  width: 100%;
  height: 100%;
  display: flex;
  .fatherLevel {
    width: 282px;
    height: 100%;
    .panel {
      padding-right: 28px;
      width: 100%;
      height: 50px;
      border-bottom: 1px dashed rgba(186, 193, 204, 1);
      display: flex;
      align-items: center;
      cursor: pointer;
      .add {
        margin-left: 18px;
        width: 16px;
        height: 16px;
        border-radius: 4px;
        background: rgba(133, 147, 167, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .name {
        flex: 1;
        margin-left: 12px;
        font-size: 14px;
        line-height: 22px;
        color: rgba(53, 64, 79, 1);
      }
    }
    .active{
      background: rgba(235, 242, 255, 1);
    }
  }
  .childLevel {
    padding: 1px 0;
    flex: 1;
    height: 100%;
    border-radius: 8px;
    background: rgba(235, 242, 255, 1);
    overflow: hidden;
    .panel {
      position: relative;
      width: 100%;
      height: 50px;
      border-bottom: 1px dashed rgba(186, 193, 204, 1);
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;
      color: rgba(53, 64, 79, 1);
      cursor: pointer;
      .line {
        width: 2.26px;
        height: 20px;
        border-radius: 8px;
        background: rgba(33, 103, 217, 1);
        opacity: 0;
      }
      .name {
        flex: 1;
        margin-left: 19px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 22px;
        color: rgba(53, 64, 79, 1);
      }
      .btns {
        margin-right: 14px;
        line-height: 14px;
        display: none;
      }
      .default {
        position: absolute;
        top: 7px;
        right: 4px;
        width: 21.93px;
        height: 22.24px;
        background: url("@/assets/images/assetLibrary/default.png") no-repeat center
          center;
        background-size: 100% 100%;
        pointer-events: none;
      }
    }
    .active{
      background: #fff;
      border-radius: 8px;
      .line{
        opacity: 1;
      }
      .name{
        color: rgba(33, 103, 217, 1);
      }
      .btns{
        display: block;
      }
    }
  }
}
</style>