<template>
  <a-modal
    class="product-modal generalModel"
    v-model:visible="showModal"
    :footer="null"
    width="78%"
    :maskClosable="false"
    :centered="true"
    :closable="false"
    wrapClassName="#app"
    :keyboard="false"
  >
    <div class="generalModel_btn">
      <div class="generalModel_closeIcon" @click.stop="handleClose()">
        <svg
          width="100%"
          height="100%"
          viewBox="0 0 46 46"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3" />
          <rect
            x="32.5063"
            y="12"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(45 32.5063 12)"
            fill="white"
          />
          <rect
            x="34.6274"
            y="32.5059"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(135 34.6274 32.5059)"
            fill="white"
          />
        </svg>
      </div>
    </div>
    <div class="content-wrapper">
      <div class="title-container">
        <div class="title">{{ type === 'first' ? 'First Frame' : 'Last Frame' }}</div>
      </div>
      <div class="content-container">
        <div class="video-frames-wrapper">
          <div class="video-frames-scroll">
            <div
              v-for="(frame, index) in frameList"
              :key="index"
              class="frame-item"
              @click="selectFrame(index)"
            >
              <SvgIcon
                v-if="selectedFrameIndex === index"
                class="check-icon"
                name="CCheck"
                color="#000000"
                size="24"
              />
              <img v-if="frame.url" :src="frame.url" alt="" />
              <div v-else class="frame-placeholder"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="action-container">
        <button class="confirm-btn" @click="handleConfirm">Confirm</button>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps<{
  frameList: Array<{ url?: string }>
  type: String // first last
}>()

const showModal = defineModel<boolean>('showModal', { required: true })
const selectedFrameIndex = ref<number | null>(null)

const emits = defineEmits(['confirm'])

// 当 type 改变时，重置选中状态
watch(() => props.type, () => {
  selectedFrameIndex.value = null
})

// 当弹窗关闭时，重置选中状态
watch(() => showModal.value, (newVal) => {
  if (!newVal) {
    selectedFrameIndex.value = null
  }
})

const handleClose = () => {
  showModal.value = false
}

const selectFrame = (index: number) => {
  selectedFrameIndex.value = index
}

const handleConfirm = () => {
  if (selectedFrameIndex.value !== null) {
    // 触发确认事件或回调
    const selected = props.frameList[selectedFrameIndex.value]
    emits('confirm', { data: selected })
  }
  handleClose()
}
</script>

<style lang="less" scoped>
.product-modal {
  .content-wrapper {
    // padding: 0;
    position: relative;
    // margin-top: 1.36rem;
    height: 100%;
    display: flex;
    flex-direction: column;

    .title-container {
      .title {
        font-size: 2.4rem;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
      }
    }

    .content-container {
      margin-top: 5.8rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;

      .video-frames-wrapper {
        background: #ffffff;
        border-radius: 2rem;
        padding: 1.2rem 2.88rem;
        flex: 1;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .video-frames-scroll {
          display: flex;
          flex-wrap: wrap;
          gap: 3.1rem;
          align-content: flex-start;
          overflow-y: auto;
          overflow-x: auto;
          flex: 1;
          min-height: 0;
          scrollbar-width: thin;
          scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

          &::-webkit-scrollbar {
            width: 0.4rem;
            height: 0.4rem;
          }

          &::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 0.2rem;
          }

          &::-webkit-scrollbar-track {
            background: transparent;
          }

          .frame-item {
            flex-shrink: 0;
            width: 16.47rem;
            height: 24.6rem;
            border-radius: 0;
            border: 0.1rem solid #999999;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            overflow: visible;

            .check-icon {
              position: absolute;
              bottom: 0;
              right: 0;
              transform: translate(50%, 50%);
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
              display: block;
            }

            .frame-placeholder {
              width: 100%;
              height: 100%;
              background: #f5f5f5;
            }
          }
        }
      }
    }
  }

  .action-container {
    display: flex;
    justify-content: flex-end;

    .confirm-btn {
      width: 8.6rem;
      height: 4rem;
      background: #000000;
      color: #ffffff;
      border: none;
      border-radius: 2rem;
      font-size: 1.2rem;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
  }
}

:deep(.generalModel .ant-modal-body) {
  padding: 5rem 4.4rem 8rem 4.6rem;
}

.c-svg {
  width: initial;
  height: initial;
}
</style>
