<template>
  <CoverBtn
    :center="center"
    :width="width"
    :height="height"
    @click="onShow"
  />
  <div
    v-show="false"
    ref="elRef"
    v-viewer="{
      toolbar: false,
      navbar:false,
      title:false,
      url: 'data-source',
    }"
    class="images clearfix"
  >
    <img class="image" :src="image" :data-source="image" />
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
  import { useModel } from "@zjxpcyc/vue-tiny-store";
import CoverBtn from "./CoverBtn.vue";

const props = defineProps({
  center: Array,
  // image: String,
})

const elRef = ref()
const width = ref(170)
const height = ref(70)

const [image] = useModel("mapImage");

const onShow = () => {
    elRef.value.$viewer.show()
}
</script>

<style lang="less" scoped>

</style>
