<!-- 内容分隔组件 -->
<template>
    <div class="title-container" >
        <div class="header" :style="{ backgroundColor: bgColor, fontSize, color, borderBottom: arrow?'1px solid #CDD0D6':'' }" @click="handleShow" >
            <div class="left">
                <span class="line" :style="{display: showLine? 'inline' : 'none', borderColor: lineColor}"></span> <span class="name">{{ title }}</span>
            </div>
            <div class="right" :style="{display: arrow? 'inline' : 'none'}">
                <el-icon :style="{transform: show ? 'rotate(90deg)' : '', transition: 'transform 0.2s linear'}"><ArrowRightBold /></el-icon>
            </div>
        </div>
        <div class="content" v-show="show" :style="{height: show ? 'auto' : '0px'}">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts">
</script>

<script setup lang="ts">

const props = defineProps({
    title: { type: String, required: true, }, //标签名称
    bgColor: { type: String, default: '#fff' },//背景颜色
    color: { type: String, default: '#222' },//文字颜色
    fontSize: { type: String, default: '20px' },//字体大小
    showLine: { type: Boolean, default: true },//是否显示图标
    lineColor: { type: String, default: '' },//图标颜色
    arrow: { type: Boolean, default: false },//展开、收起功能
})
 
const show = ref(true)
const handleShow = () => {
    if (!props.arrow) {
        return
    }
    show.value = !show.value
}



</script>

<style lang="scss" scoped>
.header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    // border-bottom: 1px solid #CDD0D6;

    .left{
        .line {
        width: 2px;
        border: 2px solid var(--el-color-primary);
        border-radius: 6px;
        margin-right: 6px;
    }

    .name {
        font-weight: bold;
    }
    }

    .right{
        margin-right: 5px;
    }
}

.content{
    height: 0px;
    transition: height 2s ease;
}
</style>