<template>
    <div class="click-show-more bfff">
        <div :style="csmStyle" id="click-show-more" class="content">
            <slot></slot>
        </div>
        <view @click="toggleContent" class="bfff p25 df aic jcc">
            <text class="f24 c999">{{ buttonText }}</text>
            <uni-icons :class="[{ cStyle: isExpanded }, 'icons']" type="down" :size="16" />
        </view>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const props = defineProps({
    // 需要预留的高度
    reserveHeight: {
        type: Number,
        default: 40
    },
    // 默认展开
    defaultExpanded: {
        type: Boolean,
        default: false
    },
    // 默认展开
    buttonText: {
        type: String,
        default: '展开'
    }
});
// 定义展开状态
const isExpanded = ref(false);
const buttonText = ref(isExpanded.value ? '收起' : '查看更多订单信息');
// 元素的高
const csmH = ref(null)
// 需要被响应的元素的样式
const csmStyle = ref({})

const toggleContent = () => {
    if (isExpanded.value) {
        buttonText.value = '查看更多订单信息';
        csmStyle.value = {
            'height': `${props.reserveHeight}px`
        }
        isExpanded.value = false;
    } else {
        buttonText.value = '收起';
        csmStyle.value = {
            'height': csmH.value + 'px'
        }
        isExpanded.value = true;
    }
};


const getCsm = () => {
    uni.createSelectorQuery().select('#click-show-more').boundingClientRect((rect) => {
        console.log('元素高度：', rect.height);
        csmH.value = rect.height
        csmStyle.value = {
            'height': `${props.reserveHeight}px`
        }
    }).exec();
}
onMounted(() => {
    getCsm();
})



</script>

<style scoped>
.show-more-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.content {
    transition: height .5s ease-in-out;
    overflow: hidden;
}

.icons {
    transition: transform 0.5s ease-in-out;
}

.cStyle {
    transform: rotate(-180deg);
}
</style>