<script setup lang="ts">
import { useSafeArea } from '@/composables/useSafeArea'

interface Props {
  imageUrls: string[]
}

const props = defineProps<Props>()

const visible = defineModel<boolean>({ required: true })

// 获取安全区域
const { safeAreaInsets } = useSafeArea()

/**
 * 扩大阿里云OSS图片裁剪范围
 * 正则匹配阿里云OSS裁剪参数，如果存在则扩大范围
 * 例如：/crop,w_500,h_500,x_100,y_100 -> /crop,w_750,h_750,x_25,y_25
 */
function expandCropArea(url: string): string {
  // 匹配阿里云OSS的crop参数：/crop,w_数字,h_数字,x_数字,y_数字
  const cropRegex = /crop,w_(\d+),h_(\d+),x_(\d+),y_(\d+)/

  const match = url.match(cropRegex)

  if (match) {
    const [, w, h, x, y] = match
    const xNum = Number.parseInt(x)
    const yNum = Number.parseInt(y)
    const wNum = Number.parseInt(w)
    const hNum = Number.parseInt(h)

    // 扩大范围：向外扩展50%
    const expandRatio = 0.5
    const expandX = Math.floor((wNum * expandRatio) / 2)
    const expandY = Math.floor((hNum * expandRatio) / 2)

    const newX = Math.max(0, xNum - expandX)
    const newY = Math.max(0, yNum - expandY)
    const newW = wNum + expandX * 2
    const newH = hNum + expandY * 2

    const newCrop = `crop,w_${newW},h_${newH},x_${newX},y_${newY}`
    return url.replace(cropRegex, newCrop)
  }

  return url
}

// 扩大裁剪范围后的图片URL列表
const expandedImageUrls = computed(() => {
  return props.imageUrls.map(url => expandCropArea(url))
})
</script>

<template>
  <wd-popup
    v-model="visible"
    position="center"
    :close-on-click-modal="false"
    custom-class="fullscreen-dialog"
  >
    <view
      class="fullscreen-container h-100vh w-100vw flex flex-col bg-black"
      @click="visible = false"
    >
      <!-- 顶部工具栏 -->
      <view
        class="flex items-center justify-between bg-black/80 px-4 py-3"
        :style="{ paddingTop: `${(safeAreaInsets?.top || 0) + 12}px` }"
        @click.stop
      >
        <text class="text-base text-white font-medium">全屏查看</text>
        <view
          class="size-8 flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-white/20"
          @click="visible = false"
        >
          <view class="i-carbon-close size-5 text-white" />
        </view>
      </view>

      <!-- 图片展示区 -->
      <view class="flex-1 overflow-auto">
        <!-- 单张图片 -->
        <view
          v-if="expandedImageUrls.length === 1"
          class="h-full flex items-center justify-center"
        >
          <image
            :src="expandedImageUrls[0]"
            mode="aspectFit"
            class="h-full w-full"
            :show-menu-by-longpress="true"
          />
        </view>

        <!-- 多张图片 -->
        <view v-else class="flex flex-col gap-4 p-4">
          <view
            v-for="(imageUrl, index) in expandedImageUrls"
            :key="index"
            class="flex items-center justify-center rounded bg-gray-900"
            style="min-height: 300px"
          >
            <image
              :src="imageUrl"
              mode="aspectFit"
              class="h-full w-full"
              :show-menu-by-longpress="true"
            />
          </view>
        </view>
      </view>

      <!-- 底部提示 -->
      <view class="bg-black/80 px-4 py-2 text-center" @click.stop>
        <text class="text-sm text-white/70">长按图片可保存</text>
      </view>
    </view>
  </wd-popup>
</template>

<style>
/* 全局样式，确保弹窗全屏 */
.fullscreen-dialog {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
}
</style>
