<template>
    <div class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
        <!-- 占位撑开 -->
        <div class="w-vw"></div>
        <div class="flex flex-items-center flex-justify-between p-12 border-box" @click="openMap">
            <div class="rounded-16 p-16 bg-theme-color-50">
                <div class="w-32 h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
                    <uni-icons type="location" size="16" color="#171717" />
                </div>
            </div>
            <div class="center ml-12">
                <div class="font-color-900 font-size-14">打开导览地图</div>
                <div class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</div>
            </div>
            <div class="ml-12 flex flex-items-center flex-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>
