<template>
  <div class="toProduct">
    <div class="productImg_content">
      <div class="productImg_content_bottom">
        <div class="productImg_left generalModel_state" :class="{ active: button.left }">
          <div class="selectImg">
            <div class="head">
              <div class="text">
                {{
                  source == 'design'
                    ? $t('ProductImg.DesignSelectCollection')
                    : productimgMenu.value == 'ToProductImage'
                    ? $t('ProductImg.SelectCollection')
                    : $t('ProductImg.SelectCollectionRelight')
                }}
              </div>
            </div>
            <div class="imgBox" v-mousewheel>
              <div
                class="item"
                :class="[item?.isChecked ? 'active' : '']"
                v-for="(item, index) in fileList[productimgMenu.value]"
                @click="setGenerate(item)"
                :key="item.id"
              >
                <div
                  class=""
                  v-if="item.status == 'uploading'"
                  style="display: flex; align-items: center"
                >
                  <a-spin size="large" />
                </div>
                <img
                  v-show="item.status != 'uploading'"
                  :src="item.designOutfitUrl || item.imgUrl || item.url"
                  alt=""
                />
                <div v-show="item.status != 'uploading'" class="btnBox">
                  <div :class="{ active: item.isChecked }">
                    <i class="fi fi-br-check"></i>
                  </div>
                  <div
                    @click.stop="setUploadDelete(item, index)"
                    v-if="source != 'design'"
                  >
                    <i class="fi fi-rr-trash icon_delete"></i>
                  </div>
                </div>
              </div>
              <div class="upload_item item" v-show="!isDesignPage">
                <div class="upload_file_item">
                  <a-upload
                    :action="uploadUrl + '/api/history/toProductImageElementUpload'"
                    list-type="picture-card"
                    :capture="null"
                    :data="{
                      ...upload
                    }"
                    :headers="{ Authorization: token }"
                    :before-upload="beforeUpload"
                    :multiple="!!upload.projectId"
                    accept=".jpg,.png,.jpeg,.bmp"
                    @change="file => fileUploadChange(file)"
                  >
                    <div class="upload_tip_block">
                      <i class="fi fi-br-upload"></i>
                    </div>
                  </a-upload>
                </div>
              </div>
            </div>
          </div>
          <div
            v-show="productimgMenu.value == 'ToProductImage' && !speedData.value"
            class="productImg_content_item_title productImg_content_item_title_similarity"
          >
            <span>{{ $t('ProductImg.Similarity') }}</span>
          </div>
          <div
            v-show="productimgMenu.value == 'ToProductImage' && !speedData.value"
            class="productImg_content_item_similarity"
          >
            <a-slider
              class="system_silder"
              v-model:value="similarity"
              @afterChange="setSimilarity"
              :tooltipVisible="false"
              :step="5"
              :max="100"
            ></a-slider>
            <input
              style="margin-left: 2rem"
              type="number"
              readonly
              v-model="similarity"
            />
          </div>
          <div
            v-show="
              productimgMenu.value == '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="
              productimgMenu.value == '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="RelightDirection"
              :options="RelightDirectionList"
            ></a-select>
          </div>
          <div
            v-show="
              productimgMenu.value == '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="
              productimgMenu.value == 'Relight' &&
              !(speedData.value == 'advanced' || speedData.value == 'flux')
            "
            class="productImg_content_item_similarity"
          >
            <a-slider
              class="system_silder"
              v-model:value="brightenValue"
              :tooltipVisible="false"
              :max="3"
              :min="1"
              :step="0.1"
            ></a-slider>
            <input
              style="margin-left: 2rem"
              type="number"
              readonly
              v-model="brightenValue"
            />
          </div>
          <div class="prompt-container">
            <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
                    class="textarea"
                    ref="textarea"
                    @input="ifMaximumLength"
                    :placeholder="
                      productimgMenu.value == 'Relight'
                        ? $t('ProductImg.relightInput')
                        : $t('ProductImg.productInput')
                    "
                    @keydown.enter.prevent="getPrductimg()"
                    v-model="searchName[productimgMenu.value]"
                  ></textarea>
                  <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>
          <div class="productImg_content_item_generate_btn input_border">
            <div class="generage_btn_box">
              <div v-show="!isProductimg" class="generage_btn started_btn">
                <i
                  class="fi fi-bs-magic-wand"
                  style="background-color: #000; font-size: 2.3rem; flex: 1; margin: 0"
                  @click="getPrductimg"
                ></i>
                <div
                  v-show="productimgMenu.value != 'Relight'"
                  class="icon iconfont icon-xiala"
                  :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="setSpeed(item)"
                    :title="item.title"
                  >
                    {{ item.label }}
                  </div>
                </div>
              </div>
              <div
                v-show="isProductimg"
                class="generage_btn started_btn"
                @click="getPrductimg"
              >
                <i class="fi fi-br-loading"></i>
              </div>
              <!-- <div v-show="isProductimg && !remProductimg" class="generage_btn started_btn" @click="getPrductimg">
								<i class="fi fi-br-loading"></i>
							</div> -->
              <!-- <div v-show="remProductimg" @click="removeProductimg" class="generage_btn started_btn">
								{{$t('Generate.Close')}}
							</div> -->
            </div>
          </div>
        </div>

        <div class="productImg_right">
          <div class="productImg_right_item_box generalScroll">
            <div class="content_header_left">
              <i class="fi fi-rs-comments"></i>
              <span class="content_header_des">
                {{
                  source == 'design'
                    ? $t('ProductImg.DesignSelectedDesign')
                    : $t('ProductImg.SelectedDesign')
                }}
              </span>
            </div>
            <div class="content">
              <img
                class="guide"
                v-if="
                  locale == 'ENGLISH' &&
                  likeList[productimgMenu.value] == 0 &&
                  generateList[productimgMenu.value] == 0
                "
                :src="
                  '/image/toolsGuide/' +
                  (productimgMenu.value == 'ToProductImage' ? 'productEN' : 'relightEN') +
                  '.png'
                "
                alt=""
              />
              <img
                class="guide"
                v-else-if="
                  likeList[productimgMenu.value] == 0 &&
                  generateList[productimgMenu.value] == 0
                "
                :src="
                  '/image/toolsGuide/' +
                  (productimgMenu.value == 'ToProductImage' ? 'productCN' : 'relightCN') +
                  '.png'
                "
                alt=""
              />
              <generalDrag
                ref="generalDragLeft"
                :type="productimgMenu.value"
                :isCopy="!isDesignPage"
                @setBtn="selectSetBtn"
                :isDelete="false"
                :isLike="true"
                :list="likeList[productimgMenu.value]"
              ></generalDrag>
            </div>
            <!-- </div> -->

            <!-- <div class="btnLeft" @click="setSize('left')">
							<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
						</div> -->
            <div class="btnRight" @click="setSize('right')">
              <span
                class="icon iconfont icon-xiala"
                :class="{ active: button.right }"
              ></span>
            </div>
          </div>
        </div>
        <div
          class="productImg_right"
          :class="{ active: button.right, designPage: isDesignPage }"
        >
          <div class="productImg_right_item_box right generalScroll">
            <div class="content_header_left">
              <i class="fi fi-rs-comments"></i>
              <span class="content_header_des">
                {{
                  source == 'design'
                    ? $t('ProductImg.DesignproductImageDrafts')
                    : $t('ProductImg.productImageDrafts')
                }}
              </span>
            </div>
            <div class="content">
              <generalDrag
                ref="generalDragRight"
                :type="productimgMenu.value"
                :isCopy="!isDesignPage"
                @setBtn="generateSetBtn"
                :list="generateList[productimgMenu.value]"
                :showMark="isShowMark"
              ></generalDrag>
            </div>
          </div>
        </div>
      </div>
    </div>
    <scaleImage
      ref="scaleImage"
      :productData="{
        upload: upload,
        similarity: similarity,
        brightenValue: brightenValue,
        RelightDirection: RelightDirection,
        RelightDirectionList: RelightDirectionList
      }"
      :isProductimg="true"
    ></scaleImage>
    <Prompt
      v-if="productimgMenu.value == 'ToProductImage'"
      v-model:showModal="showPromptAssist"
      :isDesignPage="isDesignPage"
    />
    <PromptEditProduct
      v-if="productimgMenu.value == 'Relight'"
      v-model:showModal="showPromptAssist"
    ></PromptEditProduct>
  </div>
</template>

<script lang="ts">
import { LoadingOutlined } from '@ant-design/icons-vue'
import {
  defineComponent,
  watch,
  createVNode,
  h,
  ref,
  toRefs,
  computed,
  reactive,
  triggerRef,
  nextTick,
  inject,
  onMounted
} from 'vue'
import { Https } from '@/tool/https'
import { getCookie, setCookie } from '@/tool/cookie'
// import domTurnImg from '@/tool/domTurnImg'
import { getUploadUrl, isMoible } from '@/tool/util'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Upload, message, Modal } from 'ant-design-vue'
import { downloadIamge } from '@/tool/util'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import scaleImage from '@/component/HomePage/scaleImage.vue'
import generalMenu from '@/component/HomePage/generalMenu.vue'
import generalDrag from '@/component/modules/generalDrag.vue'
import Prompt from './Prompt.vue'
import PromptEditProduct from './PromptEditProduct.vue'
import { List } from 'echarts'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  components: {
    scaleImage,
    generalMenu,
    generalDrag,
    Prompt,
    PromptEditProduct
  },
  props: {
    setTask: {
      type: Object,
      default: () => {
        return {}
      }
    },
    source: {
      type: String,
      default: ''
    },
    productimgMenu: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isDesignPage: {
      type: Boolean,
      default: false
    },
    isState: {
      type: Boolean,
      default: false
    }
  },
  emit: ['unLike'],
  setup(props, { emit }) {
    const store = useStore()
    let userDetail: any = computed(() => {
      return store.state.UserHabit.userDetail
    })
    const { t, locale } = useI18n()
    const upload: any = ref({
      projectId: computed(() => store.state.Workspace.probjects.id)
    })
    let driver__: any = computed(() => {
      return store.state.Guide.guide
    })
    const route = useRoute()
    const createProbject: any = inject('createProbject', () => {})
    let productImgData: any = reactive({
      isShowMark: false,
      fileList: {},
      searchName: {
        ToProductImage: '',
        Relight: ''
      },
      remProductimg: false, //是否出现取消按钮
      isProductimg: false, //开始生成
      selectProductimgList: [],
      generateList: {
        ToProductImage: computed(() => {
          if (!route.query?.id && route.query.tools == 'toProduct') {
            return []
          } else {
            return store.state.HomeStoreModule.toProductImageList.list
          }
        }),
        Relight: computed(() => {
          if (!route.query?.id && route.query.tools == 'relight') {
            return []
          } else {
            return store.state.HomeStoreModule.relightList.list
          }
        })
      },
      selectObject: computed(() => store.state.Workspace.probjects), //选择的项目
      likeList: {
        ToProductImage: computed(() => {
          if (!route.query?.id && route.query.tools == 'toProduct') {
            return []
          } else {
            return store.state.HomeStoreModule.toProductImageList.likedList
          }
        }),
        Relight: computed(() => {
          if (!route.query?.id && route.query.tools == 'relight') {
            return []
          } else {
            return store.state.HomeStoreModule.relightList.likedList
          }
        })
      } as any,
      similarity: 30,
      brightenValue: 1,
      button: {
        left: false,
        right: false
      },
      textarea: null as any
    })
    let speed = reactive({
      speedList: [
        {
          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 productImgDom = reactive({
      generalDragLeft: null as any,
      generalDragRight: null as any
    })
    let productimgMenuList = ref([
      {
        value: 'ToProductImage',
        label: useI18n().t('ProductImg.ProductImage')
      },
      {
        value: 'Relight',
        label: useI18n().t('ProductImg.Relight')
      }
    ])
    // let productimgMenu:any = ref(productimgMenuList.value[0])
    let RelightDirectionList = ref([
      {
        value: 'Right Light',
        label: useI18n().t('ProductImg.RightLight')
      },
      {
        value: 'Left Light',
        label: useI18n().t('ProductImg.LeftLight')
      },
      {
        value: 'Top Light',
        label: useI18n().t('ProductImg.TopLight')
      },
      {
        value: 'Bottom Light',
        label: useI18n().t('ProductImg.BottomLight')
      }
    ])
    let RelightDirection: any = ref(RelightDirectionList.value[0].value)
    // let likeDesignCollectionList: any = computed(() => {
    // 	return store.state.HomeStoreModule.likeDesignCollectionList;
    // });
    let selectDesignList: any = computed(() => {
      return store.state.UploadFilesModule.modularData
    })
    let userlikeGroupId = 0
    watch(
      () => store.state.HomeStoreModule.uploadElement.length,
      (newVal, oldVal) => {
        setFileList()
      }
    )
    const setFileList = () => {
      if (props.isDesignPage) return
      if (!route.query?.id && route.query.tools) {
        productImgData.fileList[props.productimgMenu.value] = []
      } else {
        productImgData.fileList[props.productimgMenu.value] =
          store.state.HomeStoreModule.uploadElement
        if (productImgData.fileList[props.productimgMenu.value][0]) {
          productImgData.fileList[props.productimgMenu.value][0].isChecked = true
        }
      }
    }
    const openSetData = (designList: any) => {
      // cleardata()
      // if(props.productimgMenu.value == 'ToProductImage'){
      // 	selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(selectDesignList.value.design.likeData))
      // }else if(props.productimgMenu.value == 'Relight'){
      // 	selectList.value['Relight'] = JSON.parse(JSON.stringify(selectDesignList.value.toProduct))
      // }
      if (props.isDesignPage) {
        productImgData.fileList[props.productimgMenu.value] = designList
        return
      }
      setFileList()
      userlikeGroupId = selectDesignList.value.userlikeGroupId
      // getLikeProductImage(selectDesignList.value.userlikeGroupId)
      productImgDom.generalDragLeft.setItemPosition()
      setCloudImg()
    }
    const setCloudImg = () => {
      let arr = store.state.UploadFilesModule.cloudList
      if (props.productimgMenu.value == 'ToProductImage') {
        let list = JSON.parse(JSON.stringify(arr.toProduct)) || []
        productImgData.generateList[props.productimgMenu.value].unshift(...list)
        store.commit('clearCloudList', 'ToProductImage')
      } else if (props.productimgMenu.value == 'Relight') {
        let list = JSON.parse(JSON.stringify(arr.relight)) || []
        productImgData.generateList[props.productimgMenu.value].unshift(...list)
        store.commit('clearCloudList', 'relight')
      }
    }
    let setproduct = (value: any) => {
      // props.productimgMenu = value
    }
    let getLikeProductImage = (userGroupId: any) => {
      let data = {
        userLikeGroupId: userGroupId,
        type: props.productimgMenu.value
      }
      Https.axiosPost(Https.httpUrls.productImageLikeList, data)
        .then(rv => {
          rv.forEach((item: any) => {
            item.imgUrl = item.url
          })
          let value = {
            likedList: rv,
            str: 'add',
            index: -1
          }
          if (props.productimgMenu.value == 'ToProductImage') {
            store.commit('setToProductImage', value)
          } else {
            store.commit('setRelightList', value)
          }
        })
        .catch(res => {})
    }
    let cleardata = () => {
      productImgData.generateList = []
      // props.productimgMenu = productimgMenuList.value[0]
    }

    let fileUploadChange = (data: any) => {
      let file = data.file
      let bor = true
      if (file.status === 'done') {
        let res = JSON.parse(file.xhr.response)
        if (res.errCode == 0) {
          file.imgUrl = res.data.url
          file.id = res.data.id
          file.isChecked = true
          file.type = 'ProductElement'
          // if(props.productimgMenu.value == 'Relight'){
          // 	file.type = "ToProductImage"
          // }
          let storeData = {
            str: 'add',
            list: [file]
          }
          store.commit('setUploadElement', storeData)
        } else {
          bor = false
        }
      } else if (file.status === 'error') {
        bor = false
      }
    }
    let isSelectObject = false
    watch(
      () => route.query,
      (query: any, oldQuery: any) => {
        isSelectObject = false
      }
    )
    let beforeUpload = async (file: any) => {
      const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpg' ||
        file.type === 'image/bmp'
      if (!isJpgOrPng) {
        message.info(useI18n().t('MoodboardUpload.jsContent3'))
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        message.info(useI18n().t('MoodboardUpload.jsContent4'))
      }
      const objectId = route?.query?.id
      if (!objectId && !isSelectObject) {
        isSelectObject = true
        productImgData.selectObject.id = await createProbject()
        upload.value = {
          projectId: productImgData.selectObject.id,
          CollectionType: props.productimgMenu.value
        }
      }
      return !!((isJpgOrPng && isLt2M && objectId) || Upload.LIST_IGNORE)
    }
    let setGenerate = (item: any) => {
      item.isChecked = !item.isChecked
    }
    const setUploadDelete = (item: any, index: any) => {
      let value = {
        id: item.id
      }
      Https.axiosPost(
        Https.httpUrls.toProductImageElementDelete,
        {},
        { params: value }
      ).then(rv => {
        let storeData = {
          str: 'delete',
          index
        }
        store.commit('setUploadElement', storeData)
      })
    }
    let likeFile = (item: any, str: any, index: any) => {
      let url
      let data = {
        toProductImageResultId: [item.id],
        projectId: store.state.Workspace.probjects.id,
        collectionSortParentId: props.isDesignPage ? item.parentId : ''
      }
      if (str == 'like') {
        url = Https.httpUrls.productImageLike
      } else {
        url = Https.httpUrls.productImageUnLike
        if (props.isDesignPage) {
          emit('unLike', item)
        }
      }
      Https.axiosPost(url, data)
        .then(rv => {
          if (str == 'like') {
            // if(rv?.sort)item.sort = rv.sort
            if (rv?.sort) item.oldSort = rv.sort
            if (rv?.id) item.userLikeSortId = rv.id
            item.newLike = true
            let value = {
              likedList: [item],
              str: 'add',
              index: -1
            }
            if (props.productimgMenu.value == 'ToProductImage') {
              store.commit('setToProductImage', value)
            } else {
              store.commit('setRelightList', value)
            }
            productImgData.generateList[props.productimgMenu.value].splice(index, 1)
          } else {
            let value = {
              likedList: [item],
              str: 'splice',
              index: index
            }
            productImgData.generateList[props.productimgMenu.value].push(item)
            if (props.productimgMenu.value == 'ToProductImage') {
              store.commit('setToProductImage', value)
            } else {
              store.commit('setRelightList', value)
            }
          }
        })
        .catch(res => {})
    }
    let remPrductimgTime: any = null
    let prductimgTime: any = null
    let getPrductimg = () => {
      // 非高级工具 未输入prompt时不可生成
      if (!productImgData.searchName[props.productimgMenu.value] && !props.isDesignPage) {
        message.info(t('ProductImg.noPrompt'))
        return
      }
      if (productImgData.isProductimg) return
      clearInterval(remPrductimgTime)
      let selectArr: any = []
      let obj = {
        createTime: '',
        elementId: 0,
        elementType: '',
        id: 0,
        isLike: 0,
        taskId: '',
        toProductImageRecordId: 0,
        url: '',
        parentId: null
      }
      if (productImgData.fileList[props.productimgMenu.value]) {
        productImgData.fileList[props.productimgMenu.value].forEach((item: any) => {
          if (item.isChecked) {
            if (item.resultType == 'Design') {
              obj.elementId = item.designOutfitId
              obj.elementType = 'DesignOutfit'
            } else {
              obj.elementId = item.id
              obj.elementType = item.resultType || 'ProductElement'
              obj.elementType =
                obj.elementType == 'Relight' ? 'ToProductImage' : obj.elementType
            }
            ;(obj.parentId = item?.parentId || item?.userLikeSortId),
              selectArr.push(JSON.parse(JSON.stringify(obj)))
          }
        })
      }
      if (selectArr.length == 0) {
        message.info(t('ProductImg.jsContent2'))
        return
      }
      let imageStrength = (70 / 100) * productImgData.similarity
      let data: any = {
        prompt: productImgData.searchName[props.productimgMenu.value],
        toProductImageVOList: selectArr,
        // userLikeGroupId:upload.value.userlikeGroupId,
        projectId: productImgData.selectObject.id,
        modelName:
          props.productimgMenu.value == 'Relight' ? 'flux' : speed.speedData.value,
        direction: RelightDirection.value,
        ageGroup: store.state.Workspace.probjects.ageGroup,
        brightenValue: productImgData.brightenValue,
        imageStrength: (100 - imageStrength) / 100,

        isDefaultLike: false //表示是否生成就like
      }
      productImgData.isProductimg = true

      let url = Https.httpUrls.toProduct
      if (props.productimgMenu.value == 'Relight') {
        url = Https.httpUrls.relight
      }
      productImgData.isShowMark = true
      Https.axiosPost(url, data)
        .then(rv => {
          productImgData.remProductimg = true
          productImgData.isShowMark = false
          let arr: any = []
          rv.forEach((item: any) => {
            arr.push(item.taskId)
          })
          productImgData.generateList[props.productimgMenu.value].unshift(...rv)
          setPrductimg(arr)
        })
        .catch(res => {
          productImgData.isShowMark = false
          productImgData.isProductimg = false
          clearInterval(remPrductimgTime)
          productImgData.remProductimg = 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.toProductImageResult
      if (props.productimgMenu.value == 'Relight') {
        url = Https.httpUrls.relightResult
      }

      prductimgTime = setInterval(() => {
        if (!state) return
        state = false
        Https.axiosPost(url, data)
          .then(rv => {
            state = true
            if (productImgData.isProductimg) {
              //防止取消后有正在执行的获取状态
              // generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
              rv.forEach((element: any) => {
                if (element.status == 'Success') {
                  element.imgUrl = element.url
                  let index = productImgData.generateList[
                    props.productimgMenu.value
                  ].findIndex((obj: any) => obj.taskId === element.taskId)
                  for (const key in element) {
                    if (element[key]) {
                      productImgData.generateList[props.productimgMenu.value][index][
                        key
                      ] = element[key]
                    }
                  }
                  productImgData.generateList[props.productimgMenu.value][
                    index
                  ].modelName =
                    props.productimgMenu.value == 'Relight'
                      ? 'flux'
                      : speed.speedData.value
                  // productImgData.generateList[props.productimgMenu.value][index] = {
                  // 	...element,
                  // 	modelName:props.productimgMenu.value == 'Relight'?'flux':speed.speedData.value,
                  // }
                  // productImgData.generateList[props.productimgMenu.value].unshift(element)
                  data = data.filter((item: any) => item !== element.taskId)
                } else if (element.status == 'Fail') {
                  message.info(element?.errorMessage || t('ProductImg.jsContent3'))
                  let index = productImgData.generateList[
                    props.productimgMenu.value
                  ].findIndex((obj: any) => obj.taskId === element.taskId)
                  productImgData.generateList[props.productimgMenu.value].splice(index, 1)
                  data = data.filter((item: any) => item !== element.taskId)
                }
              })
              generateProceedList = data
              if (data.length == 0) {
                // if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
                // }
                store.dispatch('getCredits')
                clearInterval(prductimgTime)
                clearInterval(remPrductimgTime)
                productImgData.remProductimg = false
                productImgData.isProductimg = false
              }
            }
          })
          .catch(res => {
            productImgData.generateList[props.productimgMenu.value].filter(
              (item: any) => item.status == 'Success'
            )
            clearInterval(prductimgTime)
            clearInterval(remPrductimgTime)
            productImgData.isProductimg = false
            productImgData.remProductimg = false
          })
      }, 1000)
    }
    let removeProductimg = () => {
      productImgData.isProductimg = false
      productImgData.remProductimg = false
      clearInterval(prductimgTime)
      if (generateProceedList) {
        // let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
        let str = generateProceedList.join(',')
        let data = {
          uniqueId: str,
          userId: userDetail.value.userId,
          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
          type: props.productimgMenu.value
        }
        Https.axiosGet(Https.httpUrls.generateStopWaiting, { params: data })
          .then(rv => {
            generateProceedList = []
            let aa = productImgData.generateList[props.productimgMenu.value].filter(
              (item: any) => item.status == 'Success'
            )
          })
          .catch(res => {})
        generateProceedList.forEach((item: any) => {
          const index = productImgData.generateList[props.productimgMenu.value].findIndex(
            item => item.status != 'Success'
          )
          if (props.productimgMenu == 'ToProductImage') {
          }
        })
      }
    }
    let scaleImage = ref()
    let setScaleImage = (arr: any, index: any, isLike: any) => {
      arr.forEach((item: any) => {
        item.imgUrl = item.url
      })
      scaleImage.value.isProductimg = isLike
      // scaleImage.value.isProductimg = false
      scaleImage.value.isLike = false
      scaleImage.value.productimgSearchName =
        productImgData.searchName[props.productimgMenu.value]
      scaleImage.value.productimgSimilarity = productImgData.similarity
      scaleImage.value.productimgBrightenValue = productImgData.brightenValue
      scaleImage.value.productimgRelightDirection = RelightDirection.value
      scaleImage.value.init(arr, index)
      scaleImage.value.isComparison = true
    }
    let setSimilarity = (num: any) => {}

    //超分
    let setTask = (data: any) => {
      emit('setTask', data)
    }

    const setLikeZoom = (item: any, str: string, index: number, list: List) => {
      if (str == 'zoom') {
        setScaleImage(list, index, true)
      } else if (str == 'copy') {
        setCopy(item)
      } else {
        likeFile(item, str, index)
      }
    }
    const selectSetBtn = (id: any, str: string) => {
      productImgData.likeList[props.productimgMenu.value].forEach(
        (item: any, index: number) => {
          if (item.id == id) {
            let selectStr = ''
            str == 'like' ? (str = 'noLike') : str
            setLikeZoom(
              item,
              str,
              index,
              productImgData.likeList[props.productimgMenu.value]
            )
          }
        }
      )
    }
    const generateSetBtn = (id: any, str: string) => {
      if (str == 'delete') {
        let type = 'ToProductImage'
        if (props.productimgMenu.value == 'Relight') type = 'Relight'
        let value = {
          type,
          id,
          projectId: productImgData.selectObject.id
        }
        Https.axiosGet(Https.httpUrls.historyDeleteResult, { params: value }).then(() => {
          let index = productImgData.generateList[props.productimgMenu.value].findIndex(
            (v: any) => v.id == id
          )
          productImgData.generateList[props.productimgMenu.value].splice(index, 1)
        })
        // productImgData.generateList[props.productimgMenu.value] = productImgData.generateList[props.productimgMenu.value].filter((v:any) => v.id != id);
      } else {
        productImgData.generateList[props.productimgMenu.value].forEach(
          (item: any, index: number) => {
            if (item.id == id) {
              let selectStr = ''
              str == 'zoom' ? (selectStr = 'zoom') : (selectStr = 'like')
              setLikeZoom(
                item,
                str,
                index,
                productImgData.generateList[props.productimgMenu.value]
              )
            }
          }
        )
      }
    }
    const setCopy = (item: any) => {
      let value = {
        id: item.id
      }
      Https.axiosPost(Https.httpUrls.convertRelightElement, {}, { params: value }).then(
        rv => {
          if (!productImgData.fileList[props.productimgMenu.value]?.length)
            productImgData.fileList[props.productimgMenu.value] = []
          productImgData.fileList[props.productimgMenu.value].unshift(rv)
        }
      )
    }
    const setItemPosition = () => {
      productImgDom.generalDragLeft.setItemPosition()
      productImgDom.generalDragRight.setItemPosition()
    }
    const setSize = (str: string) => {
      productImgData.button[str] = !productImgData.button[str]
      nextTick(() => {
        setItemPosition()
      })
    }
    const ifMaximumLength = async () => {
      // await nextTick()
      // let textarea = productImgData.textarea
      // const scrollTop = textarea.scrollTop
      // // 2. 计算单行高度
      // const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20 // 默认20px
      // // 3. 重置高度为1行
      // textarea.style.height = lineHeight + 'px'
      // // 4. 计算实际需要的高度
      // const newHeight = Math.max(lineHeight, textarea.scrollHeight)
      // textarea.style.height = newHeight + 'px'
      // textarea.scrollTop = scrollTop
      // 随着输入内容自动调整高度
      let textarea = productImgData.textarea
      textarea.style.height = 'auto'
      textarea.style.height = textarea.scrollHeight + 'px'
    }
    const openSpeed = () => {
      speed.speedState = !speed.speedState
      if (speed.speedState) {
        document.addEventListener('click', openSpeed)
      } else {
        document.removeEventListener('click', openSpeed)
      }
    }
    const setSpeed = (item: any) => {
      speed.speedData = item
      speed.speedState = false
      document.removeEventListener('click', openSpeed)
    }
    //watch立即执行一次
    watch(
      () => productImgData.selectObject.id,
      (newVal, oldVal) => {
        createProbject.generateList = []
        let list = []
        if (props?.productimgMenu.value == 'ToProductImage') {
          list = store.state.HomeStoreModule.toProductImageList.list || []
        } else {
          list = store.state.HomeStoreModule.relightList.list || []
        }
        let taskIdList = list.filter((item: any) => !item?.url)
        if (taskIdList?.length > 0) {
          let arr: any = []
          taskIdList.forEach((item: any) => {
            arr.push(item.taskId)
          })
          productImgData.isProductimg = true
          productImgData.remProductimg = true
          productImgData.isShowMark = false
          setPrductimg(arr)
        }
      },
      { immediate: true }
    )
    onMounted(() => {
      ifMaximumLength()
    })

    // 计算属性：根据条件生成提示词列表

    const showPromptAssist = ref(false)
    const handleClickAssistBtn = () => {
      const { httpType } = store.state.Workspace.probjects
      const isSingleDesign = httpType === 'SINGLE_DESIGN'
      if (props.isDesignPage && !isSingleDesign) {
        const promptText = t('ProductImg.Series')
        productImgData.searchName[props.productimgMenu.value] = promptText
        return
      }
      showPromptAssist.value = true
    }

    return {
      upload,
      driver__,
      openSetData,
      ...toRefs(productImgData),
      ...toRefs(productImgDom),
      ...toRefs(speed),
      productimgMenuList,
      RelightDirectionList,
      RelightDirection,
      showPromptAssist,

      setproduct,
      fileUploadChange,
      beforeUpload,
      setGenerate,
      setUploadDelete,
      likeFile,
      getPrductimg,
      removeProductimg,
      scaleImage,
      setScaleImage,
      setSimilarity,
      setTask,
      selectSetBtn,
      generateSetBtn,
      setItemPosition,
      setSize,
      ifMaximumLength,
      openSpeed,
      setSpeed,
      locale,
      handleClickAssistBtn
    }
  },
  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)
          },
          { passive: true }
        )
      }
    }
  },
  data() {
    return {
      indicator: h(LoadingOutlined, {
        style: {
          fontSize: '2.4rem'
        },
        spin: true
      }),
      // moodTemplateId: "", //模板id
      token: '',
      uploadUrl: ''
    }
  },
  mounted() {
    this.token = getCookie('token') || ''
    this.uploadUrl = getUploadUrl()
  }
})
</script>

<style lang="less" scoped>
.toProduct {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.productImg_content {
  height: 100%;
  width: 100%;
  .modal_title_text {
    height: 4rem;
  }
}
.productImg_content_bottom {
  height: 100%;
  --border-color: #c4c4c4;
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.productImg_content_item_title {
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 1rem;
  &.productImg_content_item_title_menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    :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_intro {
  font-size: 1.4rem;
}

.selectImg {
  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;
    column-gap: 1rem;
    // &.active

    > .item {
      margin-right: 1rem;
      // width: calc(100% / 2 - 0.5rem);
      // height: 25rem;
      width: 12.7rem;
      height: 17.8rem;
      cursor: pointer;
      overflow: hidden;
      display: flex;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      // &.active{
      // 	border: 2px solid;
      // }
      :deep(.ant-checkbox-wrapper) {
        position: absolute;
        top: 2rem;
        right: 2rem;
      }
      > .btnBox {
        position: absolute;
        right: 1rem;
        top: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        > 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;
      }
    }
    > .upload_item {
      border: none;
    }
  }
  > .head {
    color: #000;
    // font-weight: 600;
    margin-bottom: 2rem;
    > .text {
      display: inline-block;
      font-size: 1.6rem;
    }
  }
}
.productImg_left,
.productImg_right {
  display: flex;
  flex-direction: column;
}
.productImg_content_item:last-child {
  margin-bottom: 0;
}
.productImg_left {
  overflow-y: auto !important;
  width: 25%;
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  padding-right: 3.8rem;
  width: 39rem;
  align-items: stretch;
  flex-wrap: nowrap;
  &.active {
    width: 0;
    padding: 0;
    overflow: hidden;
  }
  .productImg_content_item_imgBox {
    flex-shrink: 0;
    margin-bottom: 3rem;
    width: 100%;
    height: 25rem;
    .content_item_imgBox_itemImg,
    .upload_file_item {
      margin-right: 1rem;
      width: calc(100% / 2 - 0.5rem);
      cursor: pointer;
      overflow: hidden;
      display: flex;
      justify-content: center;
      flex-shrink: 0;
      height: 25rem;
      position: relative;

      > .imgBox {
        width: 100%;
      }
      img {
        object-fit: contain;
      }
    }
  }
  .productImg_content_item_generate {
    --width: 100%;
    padding-bottom: 1rem;
    // margin-top: auto;
  }
  .productImg_content_item_similarity {
    display: flex;
    align-items: center;
    padding-bottom: 3rem;
    .system_silder {
      flex: 1;
    }
    input {
      width: 30%;
      width: 5rem;
      height: 5rem;
      text-align: center;
      font-size: 1.8rem;
      margin-left: 2rem;
    }
  }
  .productImg_content_item_Direction {
    padding-bottom: 1rem;
    margin-right: 0;
    margin-bottom: 1rem;
  }
  .selectText {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    > div {
      background: #efeff1;
      width: 100%;
      font-size: 1.6rem;
      margin-bottom: 1.2rem;
      border-radius: 1.6rem;
      cursor: pointer;
      padding: 1.2rem;
      white-space: nowrap; /* 文本不换行 */
      overflow: hidden; /* 溢出部分隐藏 */
      text-overflow: ellipsis; /* 显示省略号 */
      &:hover {
        background: #f9fafa;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .productImg_content_item_generate_btn {
    width: 100%;
    justify-content: space-around;
    .generage_btn_box {
      flex: 0;
      margin-left: auto;
    }
    .started_btn {
      // width: 13rem;
      // text-align: center;
      margin: 0;
    }
  }
}
.productImg_right {
  height: 100%;
  flex-direction: row;
  flex: 1;
  &.active {
    flex: 0;
    overflow: hidden;
  }
  .productImg_right_item_box {
    // height: 40%;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    &.right {
      padding-left: 2.3rem;
    }
    > .content {
      background: #f6f6fa;
      border-radius: 2rem;
      padding: 1rem 1.5rem;
      border-radius: 2rem;
      position: relative;
      flex: 1;
      overflow: hidden;
      .guide {
        position: absolute;
        width: 50rem;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-height: 100%;
        object-fit: contain;
      }
    }
    > .btnLeft,
    > .btnRight {
      position: absolute;
      width: 3rem;
      height: 7rem;
      background: #fff;
      border: 2px solid;
      border-right: none;
      border-radius: 2rem 0 0 2rem;
      top: 50%;
      transform: translate(-100%, -50%);
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      cursor: pointer;
      transition: all 0.3s;
      > span {
        transition: all 0.3s;
        transform: rotate(90deg);
        &.active {
          transform: rotate(270deg);
        }
      }
    }
    > .btnRight {
      left: calc(100% + 3rem);
      transform: translate(-100%, -50%) rotate(180deg);
      &:hover {
        width: 4rem;
        left: calc(100% + 4rem);
      }
    }
    .content_header_left {
      display: flex;
      align-items: center;
      margin-bottom: 2rem;
      .content_header_des {
        font-size: 1.6rem;
        color: #000000;
        margin-left: 1rem;
        font-weight: 900;
      }
    }
    .mark_loading {
      position: absolute;
    }
  }
  .productImg_right_titleBtn {
    display: flex;
    justify-content: space-between;
  }
}
.designPage {
  margin-right: 4rem;
}

.upload_file_item {
  :deep(.ant-upload-picture-card-wrapper) {
    .ant-upload-list-picture-card {
      .ant-upload-select-picture-card {
        width: 12.7rem;
        height: 17.8rem;
        border-width: 1px;
        background: #fff;
      }
    }
  }
}
.prompt-container {
  margin-top: 4rem;
  margin-bottom: 3rem;
  position: relative;
  .prompt-title {
    margin-bottom: 1.4rem;
    font-size: 1.6rem;
    // margin-bottom: 1rem;
  }
  .input_border {
    padding-bottom: 0;
    .input_box {
      .input_box_btnBox {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .textarea {
          // flex: 1;
          min-height: 12.7rem;
          max-height: none;
          width: 100%;
        }
      }
    }
  }
  .asistant-btn {
    height: 2.3rem;
    padding: 0 0.6rem;
    font-size: 1rem;
    font-weight: 400;
    color: #313131;
    // position: absolute;
    // bottom: 1.3rem;
    // left: 1.3rem;
    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;
      // margin-top: -0.2rem;
    }
  }
}
</style>
