<template>
  <a-modal
    class="editDesignType_modal generalModel"
    :class="{
      posetransfer: isPoseTransfer
    }"
    v-model:visible="scaleImage"
    :footer="null"
    width="78%"
    :maskClosable="false"
    :centered="true"
    :closable="false"
    :mask="true"
    :keyboard="false"
    :destroyOnClose="false"
  >
    <div class="generalModel_btn">
      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
        <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="white" 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 class="generalModel_closeIcon download" @click.stop="download()">
        <i class="fi fi-rr-down-to-line"></i>
      </div>
    </div>
    <div class="scaleImage_content" v-if="scaleImage">
      <div class="productImg_modal">
        <div class="productImg_left generalModel_state">
          <div
            v-if="!isPoseTransfer"
            class="productImg_content_item_title productImg_content_item_title_menu"
          >
            <span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">
              {{ $t('ProductImg.MagicTools') }}
            </span>
            <span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">
              {{ $t('ProductImg.relightingTool') }}
            </span>
          </div>
          <div
            v-show="
              scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' &&
              !speedData.value
            "
            class="productImg_content_item_title productImg_content_item_title_similarity"
          >
            <span>{{ $t('ProductImg.Similarity') }}</span>
          </div>
          <div
            v-show="
              scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' &&
              !speedData.value
            "
            class="productImg_content_item_similarity"
          >
            <a-slider
              class="system_silder"
              v-model:value="productimgSimilarity"
              :tooltipVisible="false"
              :step="5"
              :max="100"
              @afterChange="() => {}"
            ></a-slider>
            <input
              style="margin-left: 2rem"
              type="number"
              readonly
              v-model="productimgSimilarity"
            />
          </div>
          <div
            v-show="
              scaleImageList[scaleImageIndex]?.resultType == 'Relight' &&
              !(speedData.value == 'advanced' || speedData.value == 'flux')
            "
            class="productImg_content_item_title productImg_content_item_title_similarity"
          >
            <span>{{ $t('ProductImg.RelightDirection') }}</span>
          </div>
          <div
            v-show="
              scaleImageList[scaleImageIndex]?.resultType == 'Relight' &&
              !(speedData.value == 'advanced' || speedData.value == 'flux')
            "
            class="productImg_content_item_Direction generalModel_state_item"
          >
            <a-select
              size="large"
              style="width: 100%"
              v-model:value="productimgRelightDirection"
              :options="productimgRelightDirectionList"
            ></a-select>
          </div>
          <div
            v-show="
              scaleImageList[scaleImageIndex]?.resultType == 'Relight' &&
              !(speedData.value == 'advanced' || speedData.value == 'flux')
            "
            class="productImg_content_item_title productImg_content_item_title_similarity"
          >
            <span>{{ $t('ProductImg.Highlight') }}</span>
          </div>
          <div
            v-show="
              scaleImageList[scaleImageIndex]?.resultType == 'Relight' &&
              !(speedData.value == 'advanced' || speedData.value == 'flux')
            "
            class="productImg_content_item_similarity"
          >
            <a-slider
              class="system_silder"
              v-model:value="productimgBrightenValue"
              :tooltipVisible="false"
              :max="3"
              :min="1"
              :step="0.1"
            ></a-slider>
            <input
              style="margin-left: 2rem"
              type="number"
              readonly
              v-model="productimgBrightenValue"
            />
          </div>
          <div class="prompt-container" v-show="!isPoseTransfer">
            <div class="prompt-title">{{ $t('ProductImg.Prompt') }}</div>
            <div class="input_border productImg_content_item_generate">
              <div class="input_box">
                <div class="input_box_btnBox">
                  <textarea
                    ref="textareaRef"
                    class="textarea"
                    :placeholder="inputPlaceholder"
                    @input="ifMaximumLength"
                    @keydown.enter.prevent="getPrductimg()"
                    v-model="productimgSearchName"
                  />
                  <div class="asistant-btn" @click="handleClickAssistBtn">
                    <i class="fi fi-bs-magic-wand asistant-icon"></i>
                    <span>{{ $t('ProductImg.PromptAssit') }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <template v-if="isPoseTransfer">
            <div class="video-type-container">
              <div class="title">{{ $t('poseTransfer.VideoType') }}</div>
              <a-select
                class="video-type-selection"
                v-model:value="videoType"
                size="large"
                placeholder="Please select"
              >
                <a-select-option
                  v-for="item in options"
                  :key="item.value"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </div>
            <div class="upload-container" v-show="videoType === 3">
              <div class="title">{{ $t('poseTransfer.SelectDesign') }}</div>
              <div class="frames-list">
                <div class="frame-item first" :class="{ showupload: !firstFrameImage }">
                  <img
                    v-if="firstFrameImage"
                    :src="
                      firstFrameImage.url ||
                      firstFrameImage.designOutfitUrl ||
                      firstFrameImage.productImage
                    "
                    alt=""
                  />
                  <div
                    class="upload-placeholder"
                    v-show="!firstFrameImage"
                    @click="handleOpenProduct('first')"
                  >
                    <i class="fi fi-br-upload upload-icon"></i>
                  </div>
                  <div
                    v-if="firstFrameImage"
                    class="delete-btn"
                    @click.stop="handleDeleteFrame('first')"
                  >
                    <i class="fi fi-rr-trash icon_delete"></i>
                  </div>
                </div>
                <div class="frame-item last" :class="{ showupload: !lastFrameImage }">
                  <img
                    v-if="lastFrameImage"
                    :src="
                      lastFrameImage.url ||
                      lastFrameImage.designOutfitUrl ||
                      lastFrameImage.productImage
                    "
                    alt=""
                  />
                  <div
                    class="upload-placeholder"
                    v-show="!lastFrameImage"
                    @click="handleOpenProduct('last')"
                  >
                    <i class="fi fi-br-upload upload-icon"></i>
                  </div>
                  <div
                    v-if="lastFrameImage"
                    class="delete-btn"
                    @click.stop="handleDeleteFrame('last')"
                  >
                    <i class="fi fi-rr-trash icon_delete"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="prompt-input-container" v-show="!showMotion">
              <div class="title">
				<span>{{ $t('ProductImg.Prompt') }}</span>
				<SvgIcon
					class="cursor-icon"
					@click="handleNavigateHelp"
					name="CHelpFlip"
					size="18"
					color="#000"
				/>
			  </div>
              <promptInput :content="prompt" ref="promptInputRef" />
            </div>
            <div class="transferPose" v-show="showMotion">
              <div class="head">
                <div class="text">{{ $t('poseTransfer.Selectpose') }}</div>
              </div>
              <div class="imgBox" v-mousewheel>
                <div
                  class="item"
                  v-for="(item, index) in poseList"
                  :key="item.id"
                  @click="setSelectPose(item, index)"
                >
                  <video :ref="el => setVideoRef(item.id, el)" :src="item.video" />
                  <div class="btnBox">
                    <div :class="{ active: item.isChecked }">
                      <i class="fi fi-br-check"></i>
                    </div>
                  </div>
                  <div class="control-container" @click.stop>
                    <div class="icon-list">
                      <SvgIcon
                        class="play-icon"
                        @click.stop="handlePlayMotion(item)"
                        :name="isVideoPlaying(item.id) ? 'CPause' : 'CPlay'"
                        size="20"
                        color="#ffffff"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <div class="generage_btn_box" style="margin-left: auto">
            <div class="generage_btn started_btn" v-show="!productimgIsProductimg">
              <i
                class="fi fi-bs-magic-wand"
                style="background-color: #000; font-size: 2.3rem; flex: 1; margin: 0"
                @click="getPrductimg()"
              ></i>
              <div
                class="icon iconfont icon-xiala"
                v-show="showDropdown"
                :class="{ active: speedState }"
                @click.stop="openSpeed"
              ></div>
              <div class="content" v-show="speedState">
                <div
                  v-for="item in speedList"
                  :key="item.value"
                  :class="{ active: item.value == speedData.value }"
                  @click.stop="setSpeed(item)"
                  :title="item.title"
                >
                  {{ item.label }}
                </div>
              </div>
            </div>
            <div class="generage_btn started_btn" v-show="productimgIsProductimg">
              <i class="fi fi-br-loading"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="scaleImage_content_imgBox" :class="{ active: isComparison }">
        <img
          v-if="showCompare"
          :src="selectGenerate?.sourceUrl || selectGenerate?.productImage"
        />
        <div class="loadBox" v-show="selectGenerate">
          <div class="load" v-show="productimgIsProductimg">
            <a-spin size="large" class="content_img_flex"></a-spin>
          </div>
          <div class="imgBox" v-show="!productimgIsProductimg">
            <img
              v-show="selectGenerate?.resultType != 'PoseTransfer'"
              :src="generateCourse?.url || selectGenerate?.url"
              alt=""
            />
            <div
              v-show="
                selectGenerate?.resultType === 'PoseTransfer' &&
                (generateCourse?.videoUrl || selectGenerate?.videoUrl)
              "
              class="result-video-container"
            >
              <video
                :ref="el => setGenerateResultVideoRef(el)"
                :src="generateCourse?.videoUrl || selectGenerate?.videoUrl"
                controlslist="nodownload nofullscreen noremoteplayback"
                :controls="false"
              />
              <div class="control-container" @click.stop>
                <div class="icon-list">
                  <SvgIcon
                    class="play-icon"
                    @click.stop="handlePlayGenerateResult"
                    :name="isGenerateResultVideoPlaying ? 'CPause' : 'CPlay'"
                    size="20"
                    color="#ffffff"
                  />
                </div>
              </div>
            </div>
            <div
              v-for="(item, index) in newVideoList"
              :key="item.taskId || index"
              class="result-video-container new-video-container"
            >
              <video
                :ref="el => setNewVideoRef(el, index)"
                :src="item.videoUrl"
                controlslist="nodownload nofullscreen noremoteplayback"
                :controls="false"
              />
              <div class="control-container" @click.stop>
                <div class="icon-list">
                  <SvgIcon
                    class="play-icon"
                    @click.stop="handlePlayNewVideo(index)"
                    :name="isNewVideoPlaying(index) ? 'CPause' : 'CPlay'"
                    size="20"
                    color="#ffffff"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mark_loading" v-show="loadingShow">
      <a-spin size="large" />
    </div>
    <template>
      <Prompt v-if="scaleImageList[scaleImageIndex]?.resultType === 'ToProductImage'" v-model:showModal="showPromptAssist" />
      <PromptEditProduct v-if="scaleImageList[scaleImageIndex]?.resultType === 'Relight'" v-model:showModal="showPromptAssist" />
    </template>
    <Product
      v-model:showModal="showProductList"
      :frameList="fullProductImages"
      :type="productType"
      :key="productType"
      @confirm="handleConfirmProduct"
    />
  </a-modal>
</template>

<script lang="ts">
import {
  defineComponent,
  h,
  ref,
  toRefs,
  createVNode,
  reactive,
  computed,
  watch,
  useTemplateRef
} from 'vue'
import { Https } from '@/tool/https'
import { Modal, message } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { downloadIamge, getMinioUrl, downloadVideoWithFetch } from '@/tool/util'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import Prompt from '@/component/home/tools/toProduct/Prompt.vue'
import promptInput from '@/component/home/tools/poseTransfer/promptInput.vue'
import Product from '@/component/home/tools/poseTransfer/Product.vue'
import PromptEditProduct from '@/component/home/tools/toProduct/PromptEditProduct.vue'
import {
  getFirstFrame,
  getFirstAndLastFrame
} from '@/component/home/tools/poseTransfer/prompt'

export default defineComponent({
  components: { Prompt, promptInput, Product, PromptEditProduct },
  props: {
    productData: {
      type: Object,
      default: {
        similarity: 30,
        brightenValue: 1,
        upload: ''
      }
    },
    isCanvas: {
      type: Boolean,
      default: false
    },
    sex: {
      type: String,
      default: ''
    },
    onlike: {
      type: Function,
      default: () => {}
    }
  },
  emits: ['addGenerateImg', 'upDataDesignLikeList'],
  setup(props: any, { emit }) {
    const store = useStore()
    let userDetail: any = computed(() => {
      return store.state.UserHabit.userDetail
    })
    let { t, locale } = useI18n()
    const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
    const videoType = ref(2)
    const showMotion = computed(() => videoType.value === 1)
    const options = ref([
      { value: 2, label: t('poseTransfer.FirstFrame') },
      { value: 3, label: t('poseTransfer.FirstAndLastFrames') },
      { value: 1, label: t('poseTransfer.FirstFrameAndSkeleton') }
    ])

    const firstFrameImage = ref<any | null>(null)
    const lastFrameImage = ref<any | null>(null)
    const newVideoList = ref([])
    const promptInputRef = useTemplateRef<HTMLTextAreaElement>('promptInputRef')
    const prompt = computed(() => {
      if (videoType.value === 2) {
        return getFirstFrame(t)
      }
      if (videoType.value === 3) {
        return getFirstAndLastFrame(t)
      }
    })

    let productimg = reactive({
      isGenerate: false, //判断是否进行generate
      textarea: null as any,
      productimgSearchName: '',
      productimgIsTextarea: false,
      productimgRemProductimg: false,
      productimgIsProductimg: false,
      productimgSimilarity: 30,
      productimgBrightenValue: 1,
      productimgUpload: props.productData.upload,
      productimgRelightDirection: 'Bottom Light',
      productimgRelightDirectionList: props.productData.RelightDirectionList,
      selectObject: computed(() => store.state.Workspace.probjects), //选择的项目
      likeDesignCollectionList: computed(() => {
        return store.state.HomeStoreModule.likeDesignCollectionList
      }),
      selectGenerate: null as any, //生成成功后返回的数据
      poseList: [],
      selectPose: null as any,
      openType: '',
      scaleImageIndex: 0,
      scaleImageList: [],
      generateCourse: null as any
    })

    const showDropdown = computed(() => {
      if (isPoseTransfer.value) {
        return videoType.value === 1
      } else {
        return (
          productimg.scaleImageList[productimg.scaleImageIndex]?.resultType !== 'Relight'
        )
      }
    })
    let speed = reactive({
      speedList: [] as any,
      speedTypeList: {
        poseTransfer: [
          {
            title: '',
            label: t('speedList.toproductBasic'),
            value: ''
          },
          {
            title: '',
            label: t('speedList.toproductFlus'),
            value: 'wx'
          }
        ],
        toPorductImg: [
          {
            title: '',
            label: t('speedList.toproductFlus'),
            relightLabel: t('speedList.relightEdit'),
            value: 'advanced'
          },
          {
            title: '',
            label: t('speedList.toproductBasic'),
            relightLabel: t('speedList.changeBackground'),
            value: ''
          }
        ]
      },
      speedState: false,
      speedData: {
        title: '',
        label: t('speedList.toproductFlus'),
        relightLabel: t('speedList.relightEdit'),
        value: 'advanced'
      }
    })
    const openSpeed = () => {
      speed.speedState = !speed.speedState
      if (speed.speedState) {
        document.addEventListener('click', openSpeed)
      } else {
        document.removeEventListener('click', openSpeed)
      }
    }
    const resetSpeedState = () => {
      if (!speed.speedState) return
      speed.speedState = false
      document.removeEventListener('click', openSpeed)
    }
    const setSpeed = (item: any) => {
      speed.speedData = item
      document.removeEventListener('click', openSpeed)
      speed.speedState = false
    }
    let scaleImage: any = ref(false)
    watch(scaleImage, value => {
      if (!value) {
        resetSpeedState()
      }
    })
    let loadingShow = ref(false)
    let isComparison = ref(false) // home/design组件中修改的,当前组件没有修改
    const visible = ref<boolean>(false)
    const setVisible = (value: any): void => {
      visible.value = value
    }
    let scaleImageMask: any = ref(false)
    let isLike: any = ref(true)
    let robotAssits: any = ref(0)

    const promptTextList = computed(() => {
      const { ageGroup, httpType } = store.state.Workspace.probjects
      const isSingleDesign = httpType === 'SINGLE_DESIGN'
      const isAdult = ageGroup === 'Adult'

      if (isSingleDesign) {
        const secondPrompt = isAdult
          ? t('poseTransfer.SingleAdultTryOn')
          : t('poseTransfer.SingleChildTryOn')
        return [t('poseTransfer.SingleGarment'), secondPrompt]
      } else {
        return [
          isAdult
            ? t('poseTransfer.SeriesAdultTryOn')
            : t('poseTransfer.SeriesChildTryOn')
        ]
      }
    })
    const showPromptAssist = ref(false)
    const handleClickAssistBtn = () => {
    //   const { httpType } = store.state.Workspace.probjects
    //   const isSingleDesign = httpType === 'SINGLE_DESIGN'
    //   if (!isSingleDesign) {
    //     const promptText = t('ProductImg.Series')
    //     productimg.productimgSearchName = promptText
    //     return
    //   }
      showPromptAssist.value = true
    }

    let remPrductimgTime: any = null
    let prductimgTime: any = null
    const getData = () => {
      let obj = null as any
      if (
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
        'ToProductImage'
      ) {
        obj = {
          elementId:
            productimg.scaleImageList[productimg.scaleImageIndex].designOutfitId ||
            productimg.scaleImageList[productimg.scaleImageIndex].elementId,
          elementType: 'DesignOutfit',
          parentId:
            productimg.selectGenerate.parentId ||
            productimg.selectGenerate.userLikeSortId,
          // userLikeSortId:productimg.selectGenerate.userLikeSortId || null,
          userLikeSortId:
            productimg.openType == 'add'
              ? productimg.selectGenerate.userLikeSortId || null
              : null
        }
        if (
          productimg.scaleImageList[productimg.scaleImageIndex]?.relationType == 'Design'
        ) {
          delete obj.userLikeSortId
        }
      } else if (
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'Relight'
      ) {
        obj = {
          elementId:
            productimg.scaleImageList[productimg.scaleImageIndex].designItemId ||
            productimg.scaleImageList[productimg.scaleImageIndex].id ||
            productimg.scaleImageList[productimg.scaleImageIndex],
          elementType: 'ToProductImage',
          parentId:
            productimg.selectGenerate.parentId ||
            productimg.selectGenerate.userLikeSortId,
          userLikeSortId:
            productimg.openType == 'add'
              ? productimg.selectGenerate.userLikeSortId || null
              : null
          // userLikeSortId:productimg.selectGenerate.userLikeSortId || null,
        }
      } else if (
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
        'PoseTransfer'
      ) {
      }
      console.log(productimg.selectGenerate)
      return obj
    }
    const getPoseTransformData = () => {
      const currentImage = productimg.scaleImageList[productimg.scaleImageIndex]
      const params: any = {
        poseId: productimg.selectPose,
        projectId: productimg.selectObject.id,
        productImage: getMinioUrl(currentImage.sourceUrl || currentImage.productImage),
        modelName: speed.speedData.value,
        mode: videoType.value,
        parentId:
          productimg.selectGenerate.parentId || productimg.selectGenerate.userLikeSortId,
        userLikeSortId:
          productimg.openType == 'add'
            ? productimg.selectGenerate.userLikeSortId || null
            : null,
        isDefaultLike: true //表示是否生成就like
      }

      // 使用首帧/尾帧选择覆盖默认的源图
      if (videoType.value === 2 || videoType.value === 3) {
        if (firstFrameImage.value) {
          const src =
            firstFrameImage.value.miniourl ||
            firstFrameImage.value.minioUrl ||
            firstFrameImage.value.productImage ||
            firstFrameImage.value.url ||
            firstFrameImage.value.imgUrl
          if (src) {
            params.productImage = getMinioUrl(src)
          }
        }
      }

      if (videoType.value === 3 && lastFrameImage.value) {
        const lastSrc =
          lastFrameImage.value.miniourl ||
          lastFrameImage.value.minioUrl ||
          lastFrameImage.value.productImage ||
          lastFrameImage.value.url ||
          lastFrameImage.value.imgUrl
        if (lastSrc) {
          params.lastFrameProductImage = getMinioUrl(lastSrc)
        }
      }
      if (videoType.value !== 1) {
        const prompt = promptInputRef.value.getFullText()
        params.prompt = prompt
        params.modelName = ''
      }
      return params
    }
    let getPrductimg = async () => {
      let obj = getData()
      // let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
      let imageStrength = (70 / 100) * productimg.productimgSimilarity
      let data: any = {
        direction: productimg.productimgRelightDirection,
        prompt: productimg.productimgSearchName,
        toProductImageVOList: [obj],
        modelName: 'flux',
        brightenValue: productimg.productimgBrightenValue,
        projectId: productimg.selectObject.id,
        imageStrength: (100 - imageStrength) / 100,
        ageGroup: productimg.selectObject.ageGroup,

        isDefaultLike: true //表示是否生成就like
      }

      // return
      // remPrductimgTime = setTimeout(()=>{
      // 	productimg.productimgRemProductimg = true
      // },10000)
      let url = Https.httpUrls.relight
      if (
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
        'ToProductImage'
      ) {
        data.modelName = speed.speedData.value
        url = Https.httpUrls.toProduct
      } else if (
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
        'PoseTransfer'
      ) {
        url = Https.httpUrls.poseTransform
        await new Promise((res, reject) => {
          Modal.confirm({
            title: t('poseTransfer.jsContent1'),
            icon: createVNode(ExclamationCircleOutlined),
            okText: 'Yes',
            cancelText: 'No',
            mask: false,
            centered: true,
            onOk() {
              res('')
            },
            cancel() {
              reject()
            }
          })
        })
          .then(() => {})
          .catch(() => {
            return
          })
        data = getPoseTransformData()
      }
      productimg.productimgIsProductimg = true
      if (
        (productimg.openType != 'add' || productimg.generateCourse) &&
        !isPoseTransfer.value
      ) {
        await new Promise(async (res, reject) => {
          await props.onlike(
            productimg.generateCourse,
            productimg.selectGenerate.listType
          )
          setTimeout(() => {
            res('')
          }, 1000)
        })
      }
      Https.axiosPost(url, data)
        .then(rv => {
          productimg.productimgRemProductimg = true
          productimg.scaleImageList[productimg.scaleImageIndex].imgUrl =
            '/image/loading.gif'
          let arr: any = []

          if (
            productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
            'PoseTransfer'
          ) {
            rv = [rv]
            // arr.push(rv.taskId)
          } else {
            // rv.forEach((item:any)=>{
            // 	arr.push(item.taskId)
            // })
          }
          rv.forEach((item: any) => {
            arr.push(item.taskId)
          })
          productimg.generateCourse = {
            ...rv[0],
            prompt: productimg.productimgSearchName,
            parentId:
              productimg.selectGenerate?.parentId ||
              productimg.selectGenerate.userLikeGroupId,
            // modelName:speed.speedData.value,
            modelName: data.modelName,
            poseId: productimg.selectPose,
            sourceUrl:
              productimg.selectGenerate?.sourceUrl ||
              productimg.selectGenerate?.productImage,
            status: null,
            oldId: productimg.openType == 'add' ? null : productimg.selectGenerate.id,
            resultType: productimg.selectGenerate?.resultType
          }
          generateProceedList = rv.map(user => user.taskId)
          setPrductimg(arr)
          productimg.isGenerate = true
        })
        .catch(res => {
          productimg.productimgIsProductimg = false
          clearInterval(remPrductimgTime)
          productimg.productimgRemProductimg = false
          if (res.errCode === 2) {
            Modal.confirm({
              title: res.errMsg,
              icon: createVNode(ExclamationCircleOutlined),
              okText: 'Yes',
              cancelText: 'No',
              mask: false,
              zIndex: 99999,
              centered: true,
              onOk() {
                store.commit('setUpgradePlan', true)
              },
              onCancel() {}
            })
          }
        })
    }
    let generateProceedList: any = []
    let setPrductimg = (dataList: any) => {
      let data = dataList
      let dataNum = dataList.length
      let state = true
      let url = Https.httpUrls.relightResult
      if (
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
        'ToProductImage'
      ) {
        url = Https.httpUrls.toProductImageResult
      } else if (
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
        'PoseTransfer'
      ) {
        url = Https.httpUrls.poseTransformResult
        data = dataList
      }
      // url = Https.httpUrls.poseTransformResult
      // data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
      prductimgTime = setInterval(
        () => {
          if (!state) return
          state = false
          Https.axiosPost(url, data)
            .then(rv => {
              state = true
              if (productimg.productimgIsProductimg) {
                //防止取消后有正在执行的获取状态
                let isEnd = false
                if (rv[0].status == 'Success') {
                  if (productimg.openType === 'edit' && isPoseTransfer.value) {
                    newVideoList.value.push(rv[0])
                  } else {
                    productimg.generateCourse.url = rv[0].url
                    productimg.generateCourse.status = rv[0].status
                    productimg.generateCourse.designOutfitUrl = rv[0].url
                    if (rv[0]?.videoUrl) {
                      productimg.generateCourse.firstFrameUrl = rv[0].firstFrameUrl
                      productimg.generateCourse.videoUrl = rv[0].videoUrl
                      productimg.generateCourse.gifUrl = rv[0].gifUrl
                    }
                  }
                  isEnd = true
                  clearInterval(remPrductimgTime)
                  store.dispatch('getCredits')
                } else if (rv[0].status == 'Fail') {
                  message.info(rv[0]?.errorMessage || t('ProductImg.jsContent3'))
                  isEnd = true
                  productimg.generateCourse = null
                }
                generateProceedList = data
                if (isEnd) {
                  store.state.store.dispatch('getCredits')
                  clearInterval(prductimgTime)
                  clearInterval(remPrductimgTime)
                  productimg.productimgRemProductimg = false
                  productimg.productimgIsProductimg = false
                }
              }
            })
            .catch(res => {
              clearInterval(prductimgTime)
              clearInterval(remPrductimgTime)
              productimg.productimgIsProductimg = false
              productimg.productimgRemProductimg = false
            })
        },
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
          'PoseTransfer'
          ? 10000
          : 1000
      )
    }
    let removeProductimg = () => {
      productimg.productimgIsProductimg = false
      productimg.productimgRemProductimg = false
      clearInterval(prductimgTime)
      productimg.generateCourse = null
      if (generateProceedList) {
        // let str = generateProceedList.length > 1?generateProceedList.join(',')
        let data = {
          uniqueId: generateProceedList,
          userId: userDetail.value.userId,
          type: productimg.scaleImageList[productimg.scaleImageIndex]?.resultType
        }
        if (
          productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ==
          'PoseTransfer'
        ) {
          // data = {
          // 	uniqueId:data.waitList,
          // 	userId:store.state.UserHabit.userDetail.userId,
          // 	timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
          // 	type: 'PoseTransferation'
          // }
        }
        Https.axiosGet(Https.httpUrls.generateStopWaiting, { params: data })
          .then(rv => {
            generateProceedList = []
          })
          .catch(res => {})
      }
    }
    const setUserData = (item: any) => {
      productimg.productimgSearchName = item.prompt
      productimg.productimgBrightenValue = item.brightenValue
      // productimg.productimgSimilarity = 100 - item.imageStrength * 100
      productimg.productimgSimilarity = ((100 - item.imageStrength * 100) * 100) / 70
      productimg.productimgRelightDirection = item.direction
      if (item.poseId) {
        let index = 0
        productimg.poseList.forEach((poseItem, poseIndex) => {
          if (Number(poseItem.id) == item.poseId) {
            index = poseIndex
          }
        })
        setSelectPose(productimg.poseList[index], index)
      }
      let list = [] as any
      if (item.resultType == 'PoseTransfer') {
        list = speed.speedTypeList.poseTransfer
      } else if (item.resultType == 'ToProductImage' || item.resultType == 'Relight') {
        list = speed.speedTypeList.toPorductImg
      }
      if (list.length == 0) return
      let modelName = ''
      if (!item.modelName) {
        modelName = ''
      } else {
        modelName = item.modelName
      }
      list.forEach((item: any) => {
        if (modelName == item.value) {
          speed.speedData = item
        }
      })
    }
    const clearUserData = () => {
      productimg.productimgSearchName = ''
      productimg.productimgSimilarity = 30
      productimg.productimgRelightDirection = ''
    }
    let init = async (
      list: any,
      index: any,
      dialogueIndex: any,
      status: any,
      listType: string
    ) => {
      console.log(list[index], dialogueIndex, status, listType)
      productimg.scaleImageList = list
      productimg.scaleImageIndex = index
      scaleImage.value = true
      productimg.openType = status
      if (status == 'add') {
        productimg.selectGenerate = {
          ...list[index],
          listType
        }
        // productimgRemProductimg:false,
        // productimgIsProductimg:false,
        delete productimg.selectGenerate.url
      } else {
        productimg.selectGenerate = {
          ...list[index]
        }
        productimg.selectGenerate.listType = listType
        productimg.selectGenerate.isIndex = index

        if (
          (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) ||
          (list[index].resultType !== 'PoseTransfer' && !list[index].url)
        ) {
          productimg.productimgIsProductimg = true
          productimg.productimgRemProductimg = true
          productimg.generateCourse = {
            ...list[index]
          }
          setPrductimg([list[index].taskId])
        }
      }
      productimg.productimgRelightDirection = JSON.parse(
        JSON.stringify(props.productData.RelightDirection)
      )

      productimg.selectGenerate.parentId =
        list[index].parentId || list[index].userLikeSortId
      ifMaximumLength()
      if (productimg.poseList.length == 0 && list[index].resultType == 'PoseTransfer') {
        await getPoseList()
      }
      productimg.isGenerate = false
      if (productimg.scaleImageList[index].resultType == 'PoseTransfer') {
        speed.speedList = speed.speedTypeList.poseTransfer
      }
      if (productimg.scaleImageList[index].resultType == 'Relight') {
        speed.speedList = [
          speed.speedTypeList.toPorductImg[0],
          speed.speedTypeList.toPorductImg[1]
        ]
      } else if (productimg.scaleImageList[index].resultType != 'PoseTransfer') {
        speed.speedList = [
          speed.speedTypeList.toPorductImg[0],
          speed.speedTypeList.toPorductImg[1]
        ]
      }
      speed.speedData = JSON.parse(JSON.stringify(speed.speedList[0]))
      if (status != 'add') {
        setUserData(list[index])
      }
      if (dialogueIndex) robotAssits.value = dialogueIndex
    }
    const getPoseList = async () => {
      await new Promise((resolve, reject) => {
        Https.axiosGet(Https.httpUrls.getAllPose)
          .then(rv => {
            rv[0].isChecked = true
            productimg.selectPose = rv[0]?.id || 1
            productimg.poseList = rv
            resolve('')
          })
          .catch(() => {
            resolve('')
          })
      })
    }
    const gifPlay = (e: any, item: any) => {
      e.target.src = item.gif || item.gifUrl //使用gif图片
    }
    const gifPause = (e: any, item: any) => {
      e.target.src = item.firstFrame || item.firstFrameUrl //静态图片
    }
    // 存储视频元素的引用
    const videoRefs = ref<Record<number, HTMLVideoElement | null>>({})
    // 存储视频播放状态
    const videoPlayingStates = ref<Record<number, boolean>>({})

    // 设置视频 ref
    const setVideoRef = (id: number, el: HTMLVideoElement | null) => {
      if (el) {
        videoRefs.value[id] = el
        // 初始化播放状态
        videoPlayingStates.value[id] = !el.paused
        // 监听播放事件
        el.addEventListener('play', () => {
          videoPlayingStates.value[id] = true
        })
        // 监听暂停事件
        el.addEventListener('pause', () => {
          videoPlayingStates.value[id] = false
        })
        // 监听结束事件
        el.addEventListener('ended', () => {
          videoPlayingStates.value[id] = false
        })
      }
    }

    // 检查视频是否正在播放
    const isVideoPlaying = (id: number) => {
      return videoPlayingStates.value[id] || false
    }

    // 播放视频
    const handlePlayMotion = (item: any) => {
      const video = videoRefs.value[item.id]
      if (video) {
        if (video.paused) {
          video.play().catch(err => {
            console.error('播放视频失败:', err)
          })
        } else {
          video.pause()
        }
      }
    }
    // 生成结果视频的引用和播放状态
    const generateResultVideoRef = ref<HTMLVideoElement | null>(null)
    const isGenerateResultVideoPlaying = ref(false)

    // 设置生成结果视频 ref
    const setGenerateResultVideoRef = (el: HTMLVideoElement | null) => {
      if (el) {
        generateResultVideoRef.value = el
        // 初始化播放状态
        isGenerateResultVideoPlaying.value = !el.paused
        // 监听播放事件
        el.addEventListener('play', () => {
          isGenerateResultVideoPlaying.value = true
        })
        // 监听暂停事件
        el.addEventListener('pause', () => {
          isGenerateResultVideoPlaying.value = false
        })
        // 监听结束事件
        el.addEventListener('ended', () => {
          isGenerateResultVideoPlaying.value = false
        })
      }
    }

    // 播放/暂停生成结果视频
    const handlePlayGenerateResult = () => {
      const video = generateResultVideoRef.value
      if (video) {
        if (video.paused) {
          video.play().catch(err => {
            console.error('播放视频失败:', err)
          })
        } else {
          video.pause()
        }
      }
    }
    // 新生成视频列表的引用和播放状态
    const newVideoRefs = ref<Record<number, HTMLVideoElement | null>>({})
    const newVideoPlayingStates = ref<Record<number, boolean>>({})

    const setNewVideoRef = (el: HTMLVideoElement | null, index: number) => {
      if (el) {
        newVideoRefs.value[index] = el
        newVideoPlayingStates.value[index] = !el.paused
        el.addEventListener('play', () => {
          newVideoPlayingStates.value[index] = true
        })
        el.addEventListener('pause', () => {
          newVideoPlayingStates.value[index] = false
        })
        el.addEventListener('ended', () => {
          newVideoPlayingStates.value[index] = false
        })
      }
    }

    const isNewVideoPlaying = (index: number) => {
      return newVideoPlayingStates.value[index] || false
    }

    const handlePlayNewVideo = (index: number) => {
      console.log('视频播放')
      const video = newVideoRefs.value[index]
      if (video) {
        if (video.paused) {
          video.play().catch(err => {
            console.error('播放视频失败:', err)
          })
        } else {
          video.pause()
        }
      }
    }
    const setSelectPose = (item: any, index: number) => {
      productimg.poseList.forEach((poseItem: any) => {
        poseItem.isChecked = false
      })
      productimg.poseList[index].isChecked = true
      productimg.selectPose = item.id
    }
    const cancelDsign = async () => {
      if (productimg.productimgIsProductimg) {
        if (!productimg.productimgRemProductimg) {
          return message.info(t('Generate.generateLoading'))
        }
      }
      if (productimg.generateCourse) {
        if (productimg.isGenerate) {
          if (productimg.productimgIsProductimg) {
            clearInterval(prductimgTime)
            clearInterval(remPrductimgTime)
            productimg.productimgRemProductimg = false
            productimg.productimgIsProductimg = false
          }
          productimg.generateCourse.oldData = {}
          if (productimg.selectGenerate.resultType == 'Design') {
            productimg.generateCourse.oldData.resultType =
              productimg.selectGenerate.resultType
          }
        }
        let emitData = {
          status: 'add',
          // status:productimg.openType,
          addList: [
            {
              ...productimg.generateCourse
            }
          ]
        }
        emit('upDataDesignLikeList', emitData, 'noBatch')
        productimg.generateCourse = null
      }
      productimg.openType = ''
      scaleImage.value = false
      clearInterval(prductimgTime)
      clearInterval(remPrductimgTime)
      clearUserData()
      productimg.scaleImageList = []
      productimg.scaleImageIndex = -1
      productimg.productimgIsProductimg = false
      productimg.productimgRemProductimg = false
    }
    const ifMaximumLength = async () => {
      // 等待 DOM 更新后再读取 scrollHeight，避免高度计算不准
      await nextTick()
      const textarea = textareaRef.value as HTMLTextAreaElement | null
      if (!textarea) return
      // 先重置高度，再用内容撑开的高度
      textarea.style.height = 'auto'
      const newHeight = textarea.scrollHeight
      textarea.style.height = newHeight + 'px'
    }

    const showProductList = ref(false)
    const productType = ref('first')
    const fullProductImages = computed(() => {
      return productimg.likeDesignCollectionList.flatMap(item =>
        (item.childList || []).filter(child => child.resultType !== 'PoseTransfer')
      )
    })
    const handleOpenProduct = (type: 'first' | 'last') => {
      productType.value = type
      showProductList.value = true
    }

    const handleConfirmProduct = ({ data: productData }: { data: any }) => {
      if (!productData) return
      if (productType.value === 'first') {
        firstFrameImage.value = productData
      } else if (productType.value === 'last') {
        lastFrameImage.value = productData
      }
      showProductList.value = false
    }

    const handleDeleteFrame = (type: 'first' | 'last') => {
      if (type === 'first') {
        firstFrameImage.value = null
      } else if (type === 'last') {
        lastFrameImage.value = null
      }
    }

    const isPoseTransfer = computed(() => {
      return (
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType ===
        'PoseTransfer'
      )
    })
    const inputPlaceholder = computed(() => {
      if (
        productimg.scaleImageList[productimg.scaleImageIndex]?.resultType === 'Relight'
      ) {
        return t('ProductImg.relightInput')
      } else {
        return t('ProductImg.productInput')
      }
    })

    const showCompare = computed(() => {
      // isComparison.value
      if (!isPoseTransfer.value) {
        return isComparison.value
      } else {
        return videoType.value === 3 ? false : true
      }
    })
	const handleNavigateHelp = () => {
      const url =
        locale === 'CHINESE_SIMPLIFIED'
          ? 'https://aida-user-manual-chinese.super.site/2b08f755cedd80a985cffdf2af80c538'
          : 'https://aida-user-manual.super.site/advanced-tool/animated-product-image/to-product-video-prompt-assist '
      window.open(url,'_blank')
    }
    onBeforeUnmount(() => {
      clearInterval(prductimgTime)
      clearInterval(remPrductimgTime)
      productimg.productimgIsProductimg = false
      productimg.productimgRemProductimg = false
      resetSpeedState()
    })
    return {
      t,
      ...toRefs(productimg),
      ...toRefs(speed),
      openSpeed,
      setSpeed,
      scaleImage,
      loadingShow,
      isComparison,
      visible,
      setVisible,
      scaleImageMask,
      isLike,
      robotAssits,
      promptTextList,
      showPromptAssist,
      handleClickAssistBtn,
      getPrductimg,
      removeProductimg,
      getPoseList,
      gifPlay,
      gifPause,
      setSelectPose,
      setVideoRef,
      handlePlayMotion,
      isVideoPlaying,
      setGenerateResultVideoRef,
      handlePlayGenerateResult,
      isGenerateResultVideoPlaying,
      generateProceedList,
      init,
      cancelDsign,
      prductimgTime,
      remPrductimgTime,
      ifMaximumLength,
      textareaRef,
      videoType,
      options,
      showMotion,
      prompt,
      promptInputRef,
      firstFrameImage,
      lastFrameImage,
      handleOpenProduct,
      handleConfirmProduct,
      handleDeleteFrame,
      productType,
      showProductList,
      fullProductImages,
      isPoseTransfer,
      showCompare,
      newVideoList,
      setNewVideoRef,
      handlePlayNewVideo,
      isNewVideoPlaying,
      showDropdown,
      inputPlaceholder,
	  handleNavigateHelp
    }
  },
  data() {
    return {
      // moodTemplateId: "", //模板id
      isNext: false
    }
  },
  directives: {
    mousewheel: {
      mounted(el) {
        el.addEventListener('wheel', (e: WheelEvent) => {
          let num = 0
          if (e.deltaY > 0) {
            num = 25
          } else {
            num = -25
          }
          el.scrollBy(num, 0)
        })
      }
    }
  },
  mounted() {},
  methods: {
    download() {
      let url
      if (
        this.selectGenerate?.resultType == 'PoseTransfer' ||
        this.generateCourse?.resultType == 'PoseTransfer'
      ) {
        url = this.selectGenerate?.videoUrl
        if (this.generateCourse?.videoUrl) {
          url = this.generateCourse.videoUrl
        }
        downloadVideoWithFetch(url)
      } else {
        url =
          this.generateCourse?.url ||
          this.selectGenerate?.designOutfitUrl ||
          this.selectGenerate?.url
        downloadIamge(url)
      }
    },
    setScaleImageIndex(index: any) {
      // this.scaleImageIndex = index
      this.setImageIndex(index)
    },
    setImageIndex(index: any) {
      if (this.isNext) return
      // let this_ = this
      // if(this.isCanvas){
      // 	this.isNext = true
      // 	new Promise((resolve,reject)=>{
      // 		Modal.confirm({
      // 			title: this.t('scaleImage.submitCanvas'),
      // 			icon: createVNode(ExclamationCircleOutlined),
      // 			okText: 'Yes',
      // 			cancelText: 'No',
      // 			mask:false,
      // 			centered:true,
      // 			onOk() {
      // 				this_.scaleImageIndex = index
      // 				this_.isNext = false
      // 				resolve('')
      // 			},
      // 			onCancel(){
      // 				this_.isNext = false
      // 				resolve('')
      // 			}
      // 		});
      // 	})
      // }else{
      // 	this.scaleImageIndex = index
      // }
      this.scaleImageIndex = index
    },
    LikeFile(item: any, str: string) {
      let parent: any = this.$parent
      if (this.robotAssits) {
        parent.likeFile(item, this.scaleImageIndex, this.robotAssits)
      } else {
        parent.likeFile(item, str)
      }
    }
  }
})
</script>
<style>
.editDesignType_modal {
  overflow: visible !important;
}
.generalModel.posetransfer {
  height: calc(67rem * 1.2);
  .ant-modal-body {
    padding: 4.5rem 7rem;
  }
}
</style>
<style lang="less" scoped>
.editDesignType_modal {
  .ant-modal-body {
    display: flex;
    flex-direction: column;
  }

  .scaleImage_content {
    display: flex;
    justify-content: center;
    height: 100%;
    position: relative;

    width: 100%;
    .productImg_modal {
      position: relative;
      left: 0;
      z-index: 9;

      flex: 1;
      overflow: hidden;
      .productImg_left {
        width: 24rem;
        display: flex;
        height: 100%;
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        flex-wrap: nowrap;
        .input_box_btnBox {
          width: 100%;
        }
        .input_box {
          justify-content: flex-end;
        }
        .productImg_content_item_generate_btn {
          // transform: translateY(100%);
          // position: absolute;
          // bottom: 0;
          width: 100%;
          justify-content: space-around;
          margin-top: 0;
        }
        .productImg_content_item_title {
          font-weight: 600;
          font-size: 1.6rem;
          margin-bottom: 1rem;
          &.productImg_content_item_title_menu {
            margin-bottom: 6rem;
            :deep(.generalMenu_printModel) {
              margin: 0;
              width: 100%;
              > div,
              > ul {
                width: 100%;
              }
            }
            .productImg_content_item_title_menubtn {
              font-size: 1.6rem;
              font-weight: 500;
            }
          }
        }
        .productImg_content_item_Direction {
          padding-bottom: 1rem;
          margin-right: 0;
          margin-bottom: 1rem;
        }
        .selectText {
          margin-bottom: 2rem;
          display: flex;
          width: 100%;
          > div {
            background: #efeff1;
            width: 100%;
            font-size: 1.6rem;
            margin-right: 1.2rem;
            border-radius: 1.6rem;
            cursor: pointer;
            padding: 1.2rem;
            white-space: nowrap; /* 文本不换行 */
            overflow: hidden; /* 溢出部分隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
            &:hover {
              background: #f9fafa;
            }
            &:first-child {
              margin-right: 0;
            }
          }
        }
        .selectText {
          margin-bottom: 2rem;
          display: flex;
          width: 100%;
          > div {
            background: #efeff1;
            width: 100%;
            height: 4.8rem;
            margin-right: 1.2rem;
            border-radius: 1.6rem;
            cursor: pointer;
            padding: 1.2rem;
            white-space: nowrap; /* 文本不换行 */
            overflow: hidden; /* 溢出部分隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
            &:hover {
              background: #f9fafa;
            }
            &:first-child {
              margin-right: 0;
            }
          }
        }
        .transferPose {
          display: flex;
          flex-direction: column;
          > .imgBox {
            flex: 1;
            max-height: 45rem;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            width: 100%;
            overflow: hidden;
            overflow-x: auto;
            > .item {
              margin-right: 1rem;
              width: 15rem;
              // width: calc(100% / 1.2 - .5rem);
              cursor: pointer;
              overflow: hidden;
              display: flex;
              justify-content: center;
              flex-shrink: 0;
              height: 25rem;
              position: relative;
              > .checkbox {
                position: absolute;
                top: 2rem;
                right: 2rem;
              }
              > .btnBox {
                position: absolute;
                right: 1rem;
                top: 1rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                z-index: 3;
                > div {
                  width: 2rem;
                  height: 2rem;
                  display: flex;
                  border: 1px solid;
                  align-items: center;
                  border-radius: 0.5rem;
                  justify-content: center;
                  cursor: pointer;
                  margin-bottom: 1rem;
                  > i {
                    display: flex;
                  }
                  > .fi-br-check {
                    color: #fff;
                    display: none;
                  }
                  &.active {
                    background: #000;
                    > i {
                      display: flex;
                      color: #fff;
                    }
                  }
                }
              }
              > img {
                width: 100%;
                object-fit: contain;
              }
              > video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
              }
              .control-container {
                width: 100%;
                height: 3.3rem;
                position: absolute;
                bottom: 0;
                left: 0;
                background: linear-gradient(
                  180deg,
                  rgba(8, 9, 13, 0) 0%,
                  rgba(8, 9, 13, 0.27) 80.37%
                );
                display: flex;
                // align-items: flex-end;
                // justify-content: center;
                z-index: 2;
                .icon-list {
                  // height: 50%;
                  // width: calc(100% - 1.6rem);
                  padding-left: 1rem;
                  display: flex;
                  box-sizing: border-box;
                  justify-content: flex-start;
                  align-items: center;
                  .play-icon {
                    width: 2rem;
                    height: 2rem;
                    cursor: pointer;
                  }
                }
              }
            }
            > .upload_item {
              border: none;
            }
          }
        }
        .productImg_content_item_similarity {
          padding-bottom: 2.4rem;
          display: flex;
          align-items: center;
          input {
            width: 5rem;
            height: 5rem;
            text-align: center;
            font-size: 1.8rem;
          }
        }
        .video-type-container {
          margin-bottom: 3rem;
          .title {
            font-size: 1.7rem;
            color: #000;
            margin-bottom: 1.4rem;
            font-weight: 500;
          }
        }
        .upload-container {
          margin-bottom: 2.8rem;
          .title {
            font-size: 1.7rem;
            font-weight: 500;
            color: #000;
            margin-bottom: 1.4rem;
          }
          .frames-list {
            display: flex;
            height: 17.1rem;
            column-gap: 2.3rem;
            .frame-item {
              position: relative;
              width: 12.2rem;
              height: 17.1rem;
              border: 1px solid #d0d0d0;
              border-radius: 11.8px;
              &.showupload {
                border-color: #000;
              }
              .upload-placeholder {
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 17.1rem;
                cursor: pointer;
                .upload-icon {
                  font-size: 3rem;
                  color: #000;
                }
              }
              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
              .delete-btn {
                position: absolute;
                right: 1rem;
                top: 1rem;
                width: 2rem;
                height: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 0.5rem;
                cursor: pointer;
                z-index: 2;
                transition: background 0.3s;
                .icon_delete {
                  font-size: 1.2rem;
                  color: #fff;
                  display: flex;
                }
              }
            }
          }
        }
        .prompt-input-container {
          margin-bottom: 4rem;
          :deep(.promptInput) {
            box-sizing: border-box;
          }
		  .title {
			display: flex;
			align-items: center;
			column-gap: 1rem;
			.cursor-icon {
				display: flex;
				width: auto;
				cursor: pointer;
			}
		  }
        }
        .prompt-container {
          margin-top: 4rem;
          margin-bottom: 3rem;
          position: relative;

          padding-right: 0.8rem;
          .prompt-title {
            margin-bottom: 1.4rem;
            font-size: 1.7rem;
            color: #000;
            font-weight: 500;
          }
          .input_border {
            padding-bottom: 0;
            .input_box {
              .input_box_btnBox {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .textarea {
                  width: 100%;
                  min-height: 12.7rem;
                  max-height: 14rem;
                  overflow-y: auto;
                  resize: none;
                  padding-bottom: 1rem;
                }
              }
            }
          }
          .asistant-btn {
            height: 2.3rem;
            padding: 0 0.6rem;
            font-size: 1rem;
            font-weight: 400;
            color: #313131;
            display: flex;
            column-gap: 0.3rem;
            justify-content: center;
            align-items: center;
            background-color: #f2f2f2;
            border: 1px solid #dfdfdf;
            border-radius: 0.5rem;
            cursor: pointer;
            .asistant-icon {
              font-size: 1rem;
              margin-right: 0;
              width: initial;
            }
          }
        }
      }
    }
    .scaleImage_content_imgBox {
      position: relative;
      width: auto;
      // min-width: 70%;
      width: 76%;
      text-align: center;
      justify-content: center;
      > .loadBox {
        display: flex;
        width: auto;
        height: 100%;
        max-width: 50rem;
        min-width: 40rem;
        align-items: center;
        justify-content: center;
        > .imgBox {
          height: 100%;
          position: relative;
          .result-video-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            &.new-video-container {
              margin-left: 2rem;
              column-gap: 2rem;
            }
            video {
              width: auto;
              height: 100%;
              max-width: 50rem;
              min-width: 40rem;
              object-fit: contain;
            }
            .control-container {
              width: 100%;
              height: 3.3rem;
              position: absolute;
              bottom: 0;
              left: 0;
              background: linear-gradient(
                180deg,
                rgba(8, 9, 13, 0) 0%,
                rgba(8, 9, 13, 0.27) 80.37%
              );
              display: flex;
              z-index: 2;
              .icon-list {
                padding-left: 1rem;
                display: flex;
                box-sizing: border-box;
                justify-content: flex-start;
                align-items: center;
                .play-icon {
                  width: 2rem;
                  height: 2rem;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
      img {
        width: auto;
        height: 100%;
        max-width: 50rem;
        min-width: 40rem;
        object-fit: contain;
      }
      &.active {
        display: flex;
        img {
          // width: 50%;
          height: 100%;
          object-fit: contain;
          margin: 0 1rem;
        }
      }
      .img_operate_block {
        width: 3.6rem;
        height: 3.6rem;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        text-align: center;
        line-height: 3.6rem;
        cursor: pointer;
        margin-bottom: 0.4rem;
        position: absolute;
        right: 2rem;
        top: 2rem;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        .operate_icon {
          font-size: 1.8rem;
          color: #fff;
          &.fi-sr-heart {
            color: red;
          }
        }
        i {
          display: flex;
          font-size: 1.8rem;
          color: #fff;
        }
      }
    }
  }
  .scaleImage_content_imgBox:hover {
    .img_operate_block {
      opacity: 1;
    }
  }
  .scaleImage_nav {
    flex: 1;
    margin: calc(2.5rem * 1.2) calc(0rem * 1.2);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: 100%;
    left: 0;
    position: absolute;
    .nav_left,
    .nav_right {
      cursor: pointer;
      top: 50%;
      i {
        display: flex;
        font-size: 4rem;
        transition: 0.3s all;
        color: rgba(0, 0, 0, 0.5);
      }
    }
    // .nav_left{
    // 	left: 0;
    // 	transform: translate(-200%,-50%);
    // }
    // .nav_right{
    //     right: 0;
    // 	transform: translate(200%,-50%);
    // }
    .nav_left:hover,
    .nav_right:hover {
      i {
        color: rgba(0, 0, 0, 1);
      }
    }
    .nav_list {
      margin: 0 calc(2rem * 1.2);
      max-width: calc(60rem * 1.2);
      overflow-y: hidden;
      &.nav_list::-webkit-scrollbar {
        display: none;
      }
      .nav_centent {
        width: auto;
        display: flex;
      }
      img {
        max-width: calc(5rem * 1.2);
        max-height: calc(5rem * 1.2);
        object-fit: cover;
        object-position: 50%, 50%;
        margin-left: calc(1rem * 1.2);
        border-radius: calc(1rem * 1.2);
        overflow: hidden;
        cursor: pointer;
        padding: calc(0.1rem * 1.2);
        flex-shrink: 0;
        &.active {
          border: 2px solid #aaaaaa;
        }
      }
      img:nth-child(1) {
        margin-left: calc(0rem * 1.2);
      }
    }
  }
}
.video-type-container {
  :deep(.video-type-selection) {
    width: 100%;
    .ant-select-selector {
      border: 2px solid #d0d0d0;
      border-radius: 1rem;
    }
  }
}
.posetransfer {
  .loadBox {
    .imgBox {
      overflow-x: auto;
      display: flex;
    }
  }
}
</style>
