<template>
    <div class="w-full bg-white  border-ff overflow-hidden rounded-[20px] flex flex-col">
        <!-- 占位撑开 -->
        <div class="w-full"></div>
        <div class="flex items-center justify-between p-[12px] " @click="openMap">
            <div class="rounded-[16px] p-[16px] bg-[#f0f8f3]">
                <div class="w-32 h-32 rounded-full bg-white flex items-center justify-center">
                    <uni-icons type="location" size="16" color="#171717" />
                </div>
            </div>
            <div class="center ml-[12px]">
                <div class="font-color-900 text-[14px]">{{ t("home.map.open") }}</div>
                <div class="font-color-500 text-[12px] mt-6">{{ t("home.map.distancePrefix") }} {{ distance }} {{
                    t("home.map.walkPrefix") }} {{ walk || t("home.map.defaultWalk") }}</div>
            </div>
            <div class="ml-[12px] flex items-center justify-center w-32 h-32 rounded-full bg-F2F5F8">
                <uni-icons class="mb-2" type="right" size="12" color="#99A0AE" />
            </div>
        </div>
    </div>

</template>

<script>
import { useI18n } from "vue-i18n";

export default {
    name: 'OpenMapComponent',
    setup() {
        const { t } = useI18n();
        return { t };
    },
    props: {
        distance: {
            type: String,
            default: '500m'
        },
        walk: {
            type: String,
            default: ''
        }
    },
    methods: {
        openMap() {
            this.$emit('open')
        }
    }
}
</script>

<style scoped>
.center {
    flex: 1 1 auto;
}
</style>
