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

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

const props = defineProps<{
  modelValue: boolean;
  text?: string;
  icon?: string; // 图标 '' 'success' 'error'
  width?: string;
  cancel?: string;
}>();

// 新增
const addClick = () => { 
  console.log("add");
}

// 查看
const viewClick = () => { 
  console.log("view");
}

// 主删除
const mainDeletion = () => { 
  console.log("mainDeletion");
}

// 子级监听
const itemClick = () => { 
  console.log("change");
}

// 默认项
const defaultClick = () => { 
  console.log("default");
}

// 子删除
const childDelete = () => { 
  console.log("childDelete");
}
</script>

<template>
  <Collapse simple>
    <Panel name="1">
      测试数据域
      <span class="collapse-item__btns--box">
        <el-icon color="rgb(253, 84, 81)" :size="16" @click.stop="addClick()">
          <circle-plus-filled />
        </el-icon>
        <el-icon color="#2c9ef7" :size="16" style="margin-left: 8px;" @click.stop="viewClick()">
          <View />
        </el-icon>
        <el-icon color="rgb(13, 215, 141)" :size="16" style="margin-left: 8px;" @click.stop="mainDeletion()">
          <delete />
        </el-icon>
      </span>
      <template #content>
        <div>
          <div class="rule__item" @click="itemClick()">
            <span>aaaa</span>
            <div class="default"></div>
            <div class="rule__item__btns">
              <el-icon color="#2c9ef7" :size="15" style="margin-right: 8px;" @click.stop="defaultClick()">
                <circle-check  />
              </el-icon>
              <el-icon color="rgb(13, 215, 141)" :size="15" @click.stop="childDelete()">
                <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>