<template>
  <div class="fullPage">
    <GeneralHeader
      :showLanguageList="true"
      :title="t('kyc')"
      :backQuery="backQuery"
      style="width: 100%"
      color="black"
    />

    <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px">
      <!-- 银行卡号 -->
      <div style="font-weight: 600">{{ t('contact_number') }}</div>
      <div
        style="
          border-radius: 8px;
          background: #fff;
          padding: 12px;
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
        "
      >
        <input
          type="text"
          v-model="applyInfo.contactNumber"
          :placeholder="t('enter_contact_number')"
          maxlength="50"
          @blur="handleContactNumberInput"
          style="width: 100%; border: none; outline: none"
        />
      </div>

      <!-- 申请信息 -->
      <div style="font-weight: 600">{{ t('other_description') }}</div>
      <div
        style="
          padding: 12px 12px 20px;
          background: #fff;
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
          border-radius: 8px;
          position: relative;
        "
      >
        <textarea
          v-model="applyInfo.otherDescription"
          rows="5"
          maxlength="100"
          :placeholder="t('enter_other_description')"
          style="width: 100%; border: none; outline: none; resize: none"
        ></textarea>
        <span
          style="
            position: absolute;
            bottom: 4px;
            right: 4px;
            color: rgba(0, 0, 0, 0.4);
            font-size: 0.8em;
          "
          class="word-count"
          >{{ count }}/100</span
        >
      </div>

      <!-- 上传图片 -->
      <div style="font-weight: 600">{{ t('passport_id_card_title') }}:</div>
      <div style="display: flex; align-items: center">
        <!-- 预览图片 -->
        <div v-for="(imgUrl, index) in resImgUrls" :key="index" style="position: relative">
          <img
            :src="imgUrl"
            alt=""
            style="display: block; width: 15vw; aspect-ratio: 1/1; object-fit: cover"
          />
          <img
            src="/src/assets/icon/Aslan/cancelGray.png"
            alt=""
            style="
              position: absolute;
              top: 6%;
              right: 6%;
              display: block;
              width: 3vw;
              aspect-ratio: 1/1;
              object-fit: cover;
            "
            @click="handleCancel(index)"
          />
        </div>

        <!-- 添加按钮 -->
        <div v-if="resImgUrls.length < 3" style="position: relative">
          <img
            src="/src/assets/icon/Aslan/addImg.png"
            alt=""
            style="display: block; width: 15vw; aspect-ratio: 1/1; object-fit: cover"
          />
          <button
            @click="onClickImagePicker"
            style="
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              cursor: pointer;
              border: none;
            "
          ></button>
          <!-- <input
            v-else
            type="file"
            accept="image/*"
            @click="onFileInputClick"
            @change="handleFileChange"
            style="
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              cursor: pointer;
            "
          /> -->
        </div>
      </div>

      <!-- 当前状态 -->
      <div v-if="updateStatus" style="display: flex; align-items: flex-end; gap: 8px">
        <div style="font-weight: 600">{{ t('current_status') }}</div>
        <div
          v-if="applyInfo.status === 'PASS'"
          style="
            font-weight: 510;
            font-size: 0.9em;
            background: linear-gradient(248deg, #75ff98 5.66%, #3dff54 42.49%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          "
        >
          {{ t('review_passed') }}
        </div>
        <div
          v-else-if="applyInfo.status === 'NOT_PASS'"
          style="
            font-weight: 510;
            font-size: 0.9em;
            background: linear-gradient(248deg, #ff7578 5.66%, #ff3d40 42.49%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          "
        >
          {{ t('review_failed') }}
        </div>
        <div
          v-else-if="applyInfo.status === 'PENDING'"
          style="
            font-weight: 510;
            font-size: 0.9em;
            background: linear-gradient(248deg, #ffe675 5.66%, #ffc53d 42.49%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          "
        >
          {{ t('awaiting_review') }}
        </div>
      </div>

      <!-- 提交按钮 -->
      <div style="display: flex; justify-content: center; align-items: center">
        <div
          style="margin-top: 10px; width: 80%; border-radius: 32px; padding: 12px"
          :style="{
            background: checkStatus
              ? 'linear-gradient(135deg, #BB92FF 2.82%, #8B45FF 99.15%), linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)'
              : 'linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)',
          }"
          @click="checkStatus ? (maskLayerShow = true) : ''"
        >
          <div v-if="updateStatus" style="color: #fff; font-weight: 590; text-align: center">
            {{ t('change_kyc') }}
          </div>
          <div v-else style="color: #fff; font-weight: 590; text-align: center">
            {{ t('submit') }}
          </div>
        </div>
      </div>
    </div>

    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
      <div style="min-height: 100vh; display: flex; justify-content: center; align-items: center">
        <div
          style="position: relative; margin: 20% 5%; background-color: white; border-radius: 12px"
          @click.stop
        >
          <div style="padding: 20px 20px 0 20px">
            <div
              style="
                margin: 0;
                font-size: 1.5em;
                font-weight: 700;
                color: rgba(0, 0, 0, 0.8);
                text-align: center;
              "
            >
              {{ t('tips') }}
            </div>
          </div>

          <div style="padding: 8px 20px">
            <div
              style="
                font-size: 1.2em;
                font-weight: 600;
                color: rgba(0, 0, 0, 0.4);
                line-height: 1.5;
              "
            >
              {{ t('confirm_modify_kyc') }}
            </div>
          </div>

          <div style="display: flex; gap: 12px; padding: 0 20px 20px 20px">
            <button class="cancel-btn" @click="maskLayerShow = false">{{ t('cancel') }}</button>
            <button class="confirm-btn" @click="Submit">{{ t('confirm') }}</button>
          </div>
        </div>
      </div>
    </maskLayer>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
import { setDocumentDirection } from '@/locales/i18n'
import { useLastImgStore } from '@/stores/lastImg'
import { storeToRefs } from 'pinia'
import { isInApp } from '@/utils/appBridge.js'
import { uploadImgFile, parseAccessOrigin } from '@/utils/uploadFiles.js'

import { uploadImg } from '@/api/upload.js'
import { getWithdrawInfoList, addWithdrawInfo, updateWithdrawInfo } from '@/api/wallet'

import GeneralHeader from '@/components/GeneralHeader.vue'
import maskLayer from '@/components/MaskLayer.vue'

const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()
const backQuery = ref(route.query || null)
const lastImgStore = useLastImgStore()
// 初始化时从 localStorage 恢复数据
lastImgStore.initFromStorage()
const { imgUrl: lastImgUrl } = storeToRefs(lastImgStore) //获取图片缓存

// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)

const maskLayerShow = ref(false)
const count = computed(() => applyInfo.value.otherDescription.length) //字数

const tempFiles = ref([]) //用于提交的临时图片文件列表
const resImgUrls = ref([]) //用于提交申请的图片数组

const updateStatus = ref(false) //是否为修改

const applyInfo = ref({
  id: '', // 提现信息ID
  contactNumber: '', // 联系方式
  category: 'CARD', // 类别
  otherDescription: '', // 其他描述
  passportFrontUrl: '', // 图片
  passportBackUrl: 'meaningless',
})

// 是否全填
const checkStatus = computed(() => {
  const contactNumber = applyInfo.value.contactNumber.trim()
  return contactNumber.length <= 50 && contactNumber != '' && resImgUrls.value.length > 0
})

// 处理银行卡号输入，去除首尾空格
const handleContactNumberInput = (event) => {
  applyInfo.value.contactNumber = event.target.value.trim()
}

// 点击图片选择按钮
const onClickImagePicker = async () => {
  try {
    await callNativeImagePicker()
  } catch (error) {
    console.error('图片选择失败:', error)
    // 可以在这里添加额外的错误处理逻辑
  }
}

// 调用原生图片选择器
const callNativeImagePicker = async () => {
  console.log('调用原生图片选择器')

  // 最多3张图片
  if (resImgUrls.value.length >= 3) {
    throw new Error('Maximum number of images reached')
  }

  // 定义过滤函数
  const filterDuplicateImages = (access) => {
    try {
      // 处理空数据情况
      if (!access || access === '""' || access === '') {
        return true // 空数据不过滤，让上层处理
      }

      const result = parseAccessOrigin(access)

      if (result.success && result.data) {
        const file = result.data
        console.log('检查图片数据:', file.path)

        // 如果是已存在的图片，返回false表示需要继续检查
        if (lastImgUrl.value && file.path === lastImgUrl.value) {
          console.log('检测到重复图片，继续等待新图片...')
          return false
        }

        // 新图片，可以接受
        return true
      }

      // 其他情况接受数据
      return true
    } catch (error) {
      console.error('过滤图片数据时出错:', error)
      return true // 出错时不过滤，让上层处理
    }
  }

  return new Promise((resolve, reject) => {
    try {
      uploadImgFile(
        async (access) => {
          try {
            // 处理空数据情况
            if (!access || access === '""' || access === '') {
              console.warn('接收到空的图片数据')
              reject(new Error('No image selected'))
              return
            }

            const result = parseAccessOrigin(access)

            if (result.success && result.data) {
              const file = result.data
              console.log('接收到原生图片数据:', file.path)

              lastImgStore.setLastImgUrl(file.path) // 更新上一次实际选择的图片路径
              // 生成预览图
              resImgUrls.value.push(file.path)
              resolve()
            } else {
              const errorMsg = result.error
              console.error('图片选择失败:', errorMsg)
              reject(new Error(errorMsg))
            }
          } catch (error) {
            console.error('处理原生图片选择结果失败:', error)
            reject(error)
          }
        },
        filterDuplicateImages, // 传递过滤函数
      )
    } catch (error) {
      console.error('调用原生图片选择器失败:', error)
      reject(error)
    }
  })
}

// 取消图片选择
const handleCancel = (index) => {
  resImgUrls.value.splice(index, 1)
}

// 上传图片
const uploadImgUrl = async () => {
  for (let index = 0; index < tempFiles.value.length; index++) {
    const file = tempFiles.value[index]
    try {
      const res = await uploadImg(file)
      if (res.status) {
        resImgUrls.value.push(res.body)
      }
    } catch (error) {
      showError(error.response?.errorMsg || t('upload_failed'))
    }
  }
}

// 提交申请
const Submit = async () => {
  // 检查是否漏填
  console.log('checkStatus.value:', checkStatus.value)

  if (checkStatus.value) {
    applyInfo.value.passportFrontUrl = JSON.stringify(resImgUrls.value)
    if (updateStatus.value) {
      console.log('更新信息：', applyInfo.value)
      await updateWithdrawInfoData()
    } else {
      console.log('添加信息：', applyInfo.value)
      await addWithdrawInfoData()
    }
    maskLayerShow.value = false
    // 先返回到 availableIncome (原始状态)
    router.go(-1)

    // 检查是否来自 availableIncome 页面
    if (route.query) {
      console.log('route.query:', route.query)

      // 使用 nextTick 确保上一步完成
      nextTick(() => {
        // 然后使用 replace 替换为带参数的版本
        router.replace({
          path: route.query.from,
          query: {
            activeAction: route.query.activeAction,
          },
        })
      })
    }
  }
}

// 获取提现信息列表
const getWithdrawInfoListData = async () => {
  try {
    const resWithdrawInfoList = await getWithdrawInfoList()
    console.log('提现信息列表:', resWithdrawInfoList)
    if (resWithdrawInfoList.status && resWithdrawInfoList.body?.length > 0) {
      updateStatus.value = true
      applyInfo.value = resWithdrawInfoList.body[0]
      let imgList = JSON.parse(resWithdrawInfoList.body[0].passportFrontUrl)
      resImgUrls.value = imgList.map((item) => item)
    }
  } catch (error) {
    console.error('获取提现信息列表失败:', error)
    showError(error.response?.errorMsg)
  }
}

// 添加提现信息
const addWithdrawInfoData = async () => {
  try {
    const resAddWithdrawInfo = await addWithdrawInfo(applyInfo.value)
    if (resAddWithdrawInfo.status) {
      showSuccess(t('application_submitted'))
      // getWithdrawInfoListData() // 重新获取提现信息列表
    }
  } catch (error) {
    showError(error.response?.errorMsg)
    throw error
  }
}

// 更新提现信息
const updateWithdrawInfoData = async () => {
  try {
    const resUpdateWithdrawInfo = await updateWithdrawInfo(applyInfo.value)
    if (resUpdateWithdrawInfo.status) {
      showSuccess(t('application_submitted'))
      // getWithdrawInfoListData() // 重新获取提现信息列表
    }
  } catch (error) {
    showError(error.response?.errorMsg)
    throw error
  }
}

onMounted(() => {
  getWithdrawInfoListData() // 获取个人申请信息
})
</script>

<style lang="scss" scoped>
* {
  color: rgba(0, 0, 0, 0.8);
}

.fullPage {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  background-image: url(/src/assets/images/Aslan/secondBg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
}

input::placeholder {
  font-weight: 510;
  color: rgba(0, 0, 0, 0.4);
}

textarea::placeholder {
  font-weight: 510;
  color: rgba(0, 0, 0, 0.4);
}

textarea::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 112px;
  color: #fff;
  font-size: 1.2em;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn {
  background:
    linear-gradient(180deg, #e5e2e6 0%, rgba(197, 196, 199, 0) 58.38%),
    linear-gradient(135deg, #a2a2a2 2.82%, #646464 99.15%), #d587ff;

  box-shadow:
    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
  backdrop-filter: blur(5000px);
}

.confirm-btn {
  background:
    linear-gradient(180deg, #d3acff 0%, rgba(222, 172, 255, 0) 58.38%),
    linear-gradient(152deg, #c670ff 7.01%, #7726ff 92.99%), #ff4768;

  box-shadow:
    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
}

.cancel-btn:active,
.confirm-btn:active {
  transform: scale(0.98);
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}

/* RTL支持 */
[dir='rtl'] .word-count {
  right: auto;
  left: 4px;
}
</style>
