<template>
    <view class="searchComponent" :style="{ height: contentHeight, background: backgroundBox }">
        <view class="search" :style="{ background }">
            <wd-icon v-if="showIcon" name="thin-arrow-left" class="icon" @tap="back" :style="{ color: backIcon }"></wd-icon>
            <slot></slot>
            <text class="title" :style="{ color: textColor }" v-if="showTitle">{{ title }}</text>
        </view>
    </view>
</template>

<script setup>
import { useCountStore } from "@/store";
import { onMounted, defineProps } from "vue";
const props = defineProps({
    background: {
        type: String,
        default: ""
    },
    backIcon: {
        type: String,
        default: "black"
    },
    showIcon: {
        type: Boolean,
        default: false
    },
    backgroundBox: {
        type: String,
        default: ""
    },
    showTitle: {
        type: Boolean,
        default: false
    },
    textColor: {
        type: String,
        default: "#333333"
    },
    title: {
        type: String,
        default: "HELLO WORLD"
    }
});
const contentHeight = ref("100rpx");
onLoad(() => {
    xma.xh.getSystemInfo({
        success(res) {
            // console.log('设备信息', res); // 设备信息
        }
    });
    xma.xh.getMenuButtonBoundingClientRect({
        success(res) {
            // console.log('宽度', res.width); // 宽度，单位：px
            // console.log('高度', res.height); // 高度，单位：px
            // console.log('上边界坐标', res.top); // 上边界坐标，单位：px
            // console.log('右边界坐标', res.right); // 右边界坐标，单位：px
            // console.log('下边界坐标', res.bottom); // 下边界坐标，单位：px
            // console.log('左边界坐标', res.left);
            contentHeight.value = (res.top + res.bottom) / 2 + 25 + "px";
            // contentHeight.value = res.bottom * 2 + 10 + 'rpx'; // 左边界坐标，单位：px
        }
    });
});

// 返回上一级
const back = () => {
    xma.navigateBack({
        delta: 1
    });
};
</script>

<style lang="scss" scoped>
.searchComponent {
    position: sticky;
    top: 0;
    z-index: 999999;

    // background: green;
    transition: background-color 0.5s;

    // box-sizing: border-box;
    .search {
        position: absolute;
        bottom: 10rpx;
        left: 0;

        // padding-left: 20rpx;
        box-sizing: border-box;

        // margin-top: 44rpx;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 70rpx;

        // margin: 0 auto;

        // background: red;
        // border-radius: 16rpx;
        // background-color: red;
        opacity: 0.8;

        // transform: translateX(-50%);
        .arrow {
            width: 15rpx;
            height: 24rpx;
        }
        .icon {
            position: absolute;
            left: 16rpx;
            font-size: 28rpx;
        }
        .title {
            display: inline-block;
            margin: 0 auto;

            // font-family: "PingFang SC";

            // width: 100%;
            font-size: 32rpx;
            font-weight: bold;
        }
    }
}
</style>
