<template>
  <view
    class="map-box"
    :style="{
      'background-color': mapi.marginTopColor,
      'padding-top': mapi.marginTop + 'rpx',
    }"
  >
    <view
      class="inner-box"
      :style="{
        height: mapi.height + 'rpx',
        padding: mapi.paddingY + 'rpx ' + mapi.paddingX + 'rpx',
        'background-color': mapi.backgroundColor,
        'background-image': 'url(' + mapi.backgroundPicUrl + ')',
      }"
    >
      <map
        :longitude="local[1]"
        :latitude="local[0]"
        style="width: 100%; height: 100%;"
      ></map>
    </view>
  </view>
</template>

<script>
export default {
  props: ["mapi"],
  data() {
    return {
      local: [0, 0],
    };
  },
  created() {
    this.local = this.mapi.location.split(",");
  },
};
</script>

<style>
.map-box .inner-box {
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
