<template>
    <view class="text-wrap" @longpress="handleLongTap">
        <uv-icon name="map1" custom-prefix="custom-icon" size="12" color="#616e78"></uv-icon>
        <view class="inner-text" ref="innerText" :class="{ over: state.over, show: state.showDropdown }" @click.stop.prevent="handleClick">
            <view class="arrow">
                <uv-icon :name="state.over ? 'arrow-down' : 'arrow-up'" size="8" color="#616e78"></uv-icon>
            </view>
            <view class="text">{{ props.address }}</view>
        </view>
    </view>
</template>

<script setup>
    import { ref, reactive, getCurrentInstance, onMounted } from "vue";
    import { useI18n } from 'vue-i18n';
	const { t } = useI18n();

    const instance = getCurrentInstance();
    const props = defineProps(["address"]);
    const innerText = ref(null);
    const state = reactive({
        over: false,
        showDropdown: false
    });

    onMounted(() => {
        // #ifdef MP-WEIXIN
        const query = uni.createSelectorQuery().in(instance.proxy);
        query
        .select(".inner-text")
        .boundingClientRect((data) => {
            let height = data.height;
            if (height > 18) {
                state.over = true;
                state.showDropdown = true;
            }
        })
        .exec();
        // #endif

        // #ifndef MP-WEIXIN
        let height = innerText.value?.$el?.offsetHeight;

        if (height > 18) {
            state.over = true;
            state.showDropdown = true;
        }
        // #endif
    });

    const handleClick = () => {
        if (!state.showDropdown) return;
        state.over = !state.over;
    }

    const handleLongTap = () => {
        uni.setClipboardData({
            data: props.address,
            showToast: false,
            success: function () {
                uni.showToast({
                    title: t("toast.copy"),
                    icon: "none"
                });
            }
        });
    }
</script>

<style lang="scss">
    .text-wrap {
        display: flex;
        align-items: baseline;
        width: 100%;
        margin-bottom: 10rpx;

        .inner-text {
            position: relative;
            width: calc(100% - 20rpx);
            .arrow {
                display: none;
                position: absolute;
                right: -20rpx;
                bottom: 0;
            }

            .text {
                margin-left: 4px;
                color: #616e78;
                font-size: var(--f22);
                font-weight: bold;
            }
        }

        .over {
            .text {
                position: relative;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .show {
            .arrow {
                display: block;
            }
        }
    }
</style>