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

</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>
