<!--  -->
<template>
  <div
    class="pic-box"
    :class="{ show: viewer }"
    :style="metasHeight ? `height:${metasHeight}px;` : ''"
  >
    <div>
      <div
        v-if="currentIndex != 0"
        class="ctrl-btn left-btn"
        @click.stop="changeImage('pre')"
      >
        <kk-icon type="left" />
      </div>
      <div
        v-if="currentIndex < data.length - 1"
        class="ctrl-btn right-btn"
        @click.stop="changeImage('next')"
      >
        <kk-icon type="right" />
      </div>
    </div>
    <div class="over-box">
      <div
        class="image-list"
        :style="`transform:translateX(${-100 * currentIndex}%);`"
      >
        <div
          v-for="(i, index) in data"
          :key="index"
          class="image-item"
          :style="`transform:translateX(${
            100 * index
          }%);background-image:url(${changeUrl(i.src)});`"
        />
      </div>
      <kk-icon class="loading-icon" type="_loading_" />
      <!-- <div class="del-btn">
                <kk-icon type="del"></kk-icon>
            </div> -->
    </div>
    <div class="continue">
      <span class="pic-num">
        <span class="cur">{{ currentIndex + 1 }}</span>
        <span><span>&nbsp;</span>/<span>&nbsp;</span></span>
        <span>{{ data.length }}</span>
      </span>
    </div>
    <!-- 移动端缩放 -->
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from 'vue'
import { buildProps } from '@kankan-components/utils'
import { KkIcon } from '@kankan-components/components'
import type { PropType } from 'vue'

const currentIndex = ref(0)

const props = buildProps({
  metasHeight: {
    type: Number,
    default: null,
  },
  data: {
    type: Array as PropType<
      {
        src: string
      }[]
    >,
    default: () => [],
  },
  viewer: {
    type: Boolean,
    default: false,
  },
  scale: {
    type: Boolean,
    default: false,
  },
})

export default defineComponent({
  name: 'MetaImage',
  components: {
    'kk-icon': KkIcon,
  },
  props,
  setup() {
    const __sdk: any = inject('__sdk')
    function changeUrl(name: string, now?: string) {
      if (name.includes('http')) {
        return name
      } else {
        if (
          (typeof name === 'string' && name.slice(0, 4) == 'blob') ||
          (typeof name === 'string' && name.slice(0, 10) == 'data:image')
        ) {
          return name
        } else {
          return __sdk.resource.getUserResourceURL(name, false, now)
        }
      }
    }
    const changeImage = (type: 'pre' | 'next') => {
      if (type == 'pre') {
        currentIndex.value--
      } else {
        currentIndex.value++
      }
    }

    return {
      changeUrl,
      changeImage,
      currentIndex,
    }
  },
})
</script>
