<template>
  <div ref="modalContainer"></div>
  <a-modal
    class="tips-modal generalModel"
    v-model:visible="showModal"
    :footer="null"
    :get-container="() => $refs.modalContainer"
    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="title-container">
      <div class="title">{{ $t('poseTransfer.Tips') }}</div>
      <div class="sub-title">
        {{ $t('poseTransfer.TipsStart') }}
        <i class="fi fi-ss-box-open" />
        {{ $t('poseTransfer.TipsEnd') }}
      </div>
    </div>
    <div class="diliver" />
    <div class="content">
      <div class="frame-item">
        <img class="tips-frame" :src="firstFrame" />
        <div class="frame-name">{{ $t('poseTransfer.FirstFrame') }}</div>
      </div>
      <img :src="add" class="add" />
      <div class="frame-item">
        <img class="tips-frame" :src="lastFrame" />
        <div class="frame-name">{{ $t('poseTransfer.LastFrame') }}</div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue'
import { downloadIamge } from '@/tool/util'
import { useI18n } from 'vue-i18n'
import firstFrame from '@/assets/images/product/first_frame.png'
import add from '@/assets/images/product/add.png'
import lastFrame from '@/assets/images/product/last_frame.png'

const { t, locale } = useI18n()

const modalContainer = useTemplateRef('modalContainer')
const showModal = defineModel<boolean>('showModal', { required: true })

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

<style lang="less" scoped>
.tips-modal {
  .title-container {
    .title {
      font-size: 3.5rem;
      color: #181818;
    }
    .sub-title {
      font-size: 2rem;
      font-weight: 400;
      color: #000;
      margin-top: 2rem;
    }
  }
  .diliver {
    height: 1px;
    background: #dfdfdf;
    // margin: 4rem 0;
  }
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 4.8rem;
    .add {
      width: 3.5rem;
      height: 3.5rem;
    }
    .frame-item {
      text-align: center;
      .tips-frame {
        width: 21.3rem;
        height: 36.1rem;
      }
      .frame-name {
        margin-top: 1.2rem;
        font-size: 2.6rem;
        font-weight: 400;
      }
    }
  }
}
:deep(.generalModel .ant-modal-body) {
  padding: 0 11rem 4rem 14rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
:deep(.generalModel) {
  height: calc(55rem * 1.2);
}
</style>
