<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-16 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]">打开导览地图</div>
                <div class="font-color-500 text-[12px] mt-6">距你 {{ distance }} · 步行 {{ walk }}</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>
export default {
    name: 'OpenMapComponent',
    props: {
        distance: {
            type: String,
            default: '500m'
        },
        walk: {
            type: String,
            default: '8分钟'
        }
    },
    methods: {
        openMap() {
            this.$emit('open')
        }
    }
}
</script>

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