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

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

const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
</script>

<template>
  <Collapse simple>
    <Panel name="1">
      测试数据域
      <span class="collapse-item__btns--box">
        <el-icon color="rgb(253, 84, 81)" :size="16">
          <circle-plus-filled />
        </el-icon>
      </span>
      <template #content>
        <div>
          <div class="rule__item">
            <span>aaaa</span>
            <div class="default"></div>
            <div class="rule__item__btns">
              <el-icon color="rgb(13, 215, 141)" :size="16">
                <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>