<script setup lang="ts">
import { ref } from 'vue';
import Taro from '@tarojs/taro';

const isShow = ref(false);

defineExpose({
  isShow,
});

const props = defineProps({
  imgArr: {
    required: true,
    type: Array,
    default: () => [],
  },
  type: Number,
  cb: {
    type: Function || null,
    default: null,
  },
});

const imgs = ref(props.imgArr);

const clickFn = type => {
  if (props.cb) props.cb(type);
  else isShow.value = false;
};

const closeFn = () => {
  isShow.value = false;
  imgs.value.shift(0);
  if (imgs.value.length !== 0) isShow.value = true;
};

Taro.useLoad(() => {
  isShow.value = true;
});
</script>

<template>
  <nut-overlay
    v-model:visible="isShow"
    :lock-scroll="true"
    :close-on-click-overlay="false">
    <view class="wrapper">
      <view @click.stop="clickFn(type)">
        <image
          :style="{
            width: imgs[0]?.naturalWidth,
            height:
              imgs[0]?.naturalHeight < 600 ? imgs[0]?.naturalHeight : '480px',
          }"
          :src="imgs[0]" />
      </view>
      <view @click.stop="closeFn">
        <image class="icon" src="../static/index/close.png" />
      </view>
    </view>
  </nut-overlay>
</template>

<style lang="scss">
.wrapper {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.image {
  width: 500px;
  height: 600px;
}

.icon {
  width: 80px;
  height: 80px;
}
</style>
