<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>;
}>();

const listData = computed(() => props.list)

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

// 查看
const viewClick = (item) => {
  emit("view",item);
}

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

// 子级监听
const itemClick = (item) => {
  emit("change",item);
}

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

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

<template>
  <Collapse simple>
    <Panel :name="item.name" v-for="(item, index) in listData" :key="index">
      {{ item.name }}
      <span class="collapse-item__btns--box">
        <el-icon color="rgb(253, 84, 81)" :size="16"  v-if="item.isAdd" @click.stop="addClick(item)">
          <circle-plus-filled />
        </el-icon>
        <el-icon color="#2c9ef7" :size="16" v-if="item.isView" @click.stop="viewClick(item)" style="margin-left: 8px;">
          <View />
        </el-icon>
        <el-icon color="rgb(13, 215, 141)" :size="16" v-if="item.isDelete" @click.stop="mainDeletion(item)" style="margin-left: 8px;">
          <delete />
        </el-icon>
      </span>
      <template #content>
        <div>
          <div class="rule__item" v-for="(itemTwo, i) in item.list" :key="i" @click="itemClick(itemTwo)">
            <span>{{ itemTwo.name }}</span>
            <div class="default"></div>
            <div class="rule__item__btns">
              <el-icon color="#2c9ef7" :size="15" v-if="itemTwo.isCheck" @click.stop="defaultClick(itemTwo)" style="margin-right: 8px;" >
                <circle-check  />
              </el-icon>
              <el-icon color="rgb(13, 215, 141)" :size="15" v-if="itemTwo.isDelete"  @click.stop="childDelete(itemTwo)">
                <delete />
              </el-icon>
            </div>
          </div>
        </div>
      </template>
    </Panel>
  </Collapse>
</template>

<style lang="scss" scoped>
:deep(.ivu-collapse-content) {
  padding: 0 0 0 14px;
}
:deep(.ivu-collapse-content-box) {
  padding-bottom: 0;
}
.ivu-collapse-header {
  padding-left: 0;
}
.ivu-collapse-simple {
  border: none !important;
  .ivu-collapse-item {
    position: relative;
    border: none !important;
  }
  .ivu-collapse-item:before {
    content: " ";
    width: calc(100% - 14px);
    height: 1px;
    background: #f3f5fa;
    position: absolute;
    top: 0;
    left: 14px;
  }
  .ivu-collapse-item:first-child:before {
    height: 0;
  }
}
.collapse-item__btns--box {
  position: absolute;
  right: 4px;
}

.rule__item {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    border-bottom: 1px solid #f3f5fa;
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &__btns {
      padding-top: 7px;
      padding-right: 28px;
      display: none;
      line-height: 30px;
    }
    .default {
      position: absolute;
      top: 0;
      right: 0;
      width: 28px;
      height: 30px;
      background: url("@/assets/images/assetLibrary/default.png") no-repeat
        center center;
      background-size: 100% 100%;
      pointer-events: none;
    }
  }
  .rule__item:hover {
    color: #21333f;
    background: #f3f5fa;
    .rule__item__btns {
      display: block;
    }
  }
</style>