<template>
  <div class="host-setting gradient-background-circles">
    <!-- 使用与HostCenterView相同的头部组件 -->
    <GeneralHeader
      :showLanguageList="true"
      :title="t('my_agency')"
      color="black"
      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
    />

    <div style="padding: 16px; position: relative; display: flex; flex-direction: column; gap: 2vw">
      <!-- My Agency -->
      <div style="display: flex; flex-direction: column; gap: 2vw">
        <!-- 标题 -->
        <div style="display: flex; align-items: center">
          <div style="font-size: 1.4em; font-weight: 600">{{ t('my_agency') }}</div>
          <img
            src="/src/assets/icon/identity/agency.png"
            alt=""
            height="25px"
            style="display: block; margin-left: 10px"
          />
        </div>

        <!-- 代理信息 -->
        <div
          style="
            background-color: white;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
            display: flex;
            justify-content: space-between;
          "
        >
          <!-- 用户信息 -->
          <div style="display: flex; align-items: center">
            <img
              :src="userInfo.userAvatar || ''"
              alt=""
              width="50px"
              style="aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
              @error="handleAvatarImageError"
            />
            <div style="flex: 1; margin-left: 12px">
              <div style="margin-bottom: 4px; font-weight: 600">
                {{ userInfo.userNickname || userInfo.name }}
              </div>
              <div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4)">
                {{ t('user_id_prefix') }} {{ userInfo.id }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Bank Card -->
      <div style="display: flex; flex-direction: column; gap: 2vw">
        <!-- 标题 -->
        <div style="display: flex; justify-content: space-between">
          <div style="font-size: 1.4em; font-weight: 600">{{ t('bank_card') }}</div>

          <!-- 跳转按钮 -->
          <div
            v-if="usedBankCard"
            style="display: flex; align-items: center"
            @click="gotoselectBank"
          >
            <div style="font-weight: 400; color: rgba(0, 0, 0, 0.4)">{{ t('more') }}</div>
          </div>
        </div>

        <!-- 银行卡信息 -->
        <div
          style="
            border-radius: 8px;
            background: #fff;
            padding: 12px;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
          "
          :style="
            usedBankCard
              ? `border-radius: 11.75px;border: 0.5px solid rgba(255, 255, 255, 0.08);`
              : ''
          "
          @click="cashOutTypeShow = true"
        >
          <!-- 无使用银行卡 -->
          <div
            v-if="!usedBankCard"
            style="display: flex; justify-content: space-between; align-items: center"
            @click="gotoselectBank"
          >
            <div style="font-weight: 510; color: rgba(0, 0, 0, 0.8)">
              {{ t('add_payment_method') }}
            </div>

            <!-- 跳转按钮 -->
            <img
              v-smart-img
              src="/src/assets/icon/Azizi/arrow.png"
              alt=""
              style="width: 6vw"
              class="flipImg"
            />
          </div>

          <!-- 银行卡信息 -->
          <div v-else style="display: flex; flex-direction: column; gap: 2vw">
            <!-- Category -->
            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.8)">{{ t('category') }}</div>
            <div
              style="
                font-weight: 510;
                color: rgba(0, 0, 0, 0.4);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ usedBankCard?.cardType }}
            </div>

            <!-- Card Number -->
            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.8)">
              {{ t('card_number_label') }}
            </div>
            <div
              style="
                font-weight: 510;
                color: rgba(0, 0, 0, 0.4);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ usedBankCard?.cardNo }}
            </div>

            <!-- Payee -->
            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.8)">{{ t('payee') }}:</div>
            <div
              style="
                font-weight: 510;
                color: rgba(0, 0, 0, 0.4);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ usedBankCard?.payee }}
            </div>
          </div>
        </div>
      </div>

      <!-- KYC -->
      <div style="display: flex; flex-direction: column; gap: 2vw">
        <!-- 标题 -->
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div style="display: flex; align-items: center">
            <div style="font-size: 1.4em; font-weight: 600">{{ t('kyc') }}</div>

            <!-- 申请状态 -->
            <div v-if="hasKYC" style="font-size: 1.4em; font-weight: 600; margin: 0 4px">:</div>

            <!-- 通过 -->
            <div
              v-if="bankCardInfo?.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-if="bankCardInfo?.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-if="bankCardInfo?.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>

          <!-- 跳转按钮 -->
          <img
            v-if="hasKYC"
            v-smart-img
            src="/src/assets/icon/Azizi/arrow.png"
            alt=""
            style="width: 6vw"
            class="flipImg"
            @click="gotoKYC"
          />
        </div>

        <!-- 资料内容 -->
        <div
          style="
            background-color: white;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
          "
        >
          <!-- 未上传 -->
          <div
            v-if="!hasKYC"
            style="display: flex; justify-content: space-between; align-items: center"
            @click="gotoKYC"
          >
            <span style="font-weight: 510; font-size: 1em">{{ t('complete_information') }}</span>
            <img
              v-smart-img
              src="/src/assets/icon/Azizi/arrow.png"
              alt=""
              style="width: 6vw"
              class="flipImg"
            />
          </div>

          <!-- 获取到上传的资料 -->
          <div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px">
            <!-- 资料 -->
            <div style="display: flex; justify-content: space-between; align-items: center">
              <!-- 图片数量 -->
              <span style="font-weight: 510; font-size: 1em"
                >{{ t('passport_id_card_title') }}:</span
              >

              <!-- 跳转按钮 -->
              <!-- <img
                v-smart-img
                src="/src/assets/icon/Azizi/arrow.png"
                alt=""
                style="width: 6vw"
                @click="gotoKYC"
                class="flipImg"
              /> -->
            </div>

            <!-- 资料图片列表 -->
            <div style="display: flex; align-items: center; gap: 4px">
              <img
                :src="imgUrl"
                alt=""
                v-for="imgUrl in bankCardInfo.previewUrls"
                style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px"
              />
            </div>

            <!-- 联系方式 -->
            <div style="font-weight: 500">{{ t('contact_number') }}:</div>
            <div
              style="
                color: rgba(0, 0, 0, 0.4);
                font-weight: 600;
                font-size: 0.8em;
                overflow-wrap: break-word;
              "
            >
              {{ bankCardInfo.contactNumber }}
            </div>

            <!-- 备注信息 -->
            <div style="font-weight: 500">{{ t('other_description') }}:</div>
            <div
              style="
                color: rgba(0, 0, 0, 0.4);
                font-weight: 600;
                font-size: 0.8em;
                overflow-wrap: break-word;
              "
            >
              {{ bankCardInfo.otherDescription }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { setDocumentDirection } from '@/locales/i18n'
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'

import {
  getBankCardList, // 获取正在使用的银行卡
  getWithdrawInfoList, // 获取申请提现信息
} from '@/api/wallet.js'

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

const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()

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

const usedBankCard = ref(null) //正在使用的银行卡

const bankCardInfo = ref(null)
const hasKYC = computed(() => {
  return bankCardInfo.value != null
})

// 前往选择银行卡
const gotoselectBank = () => {
  router.push('/bank-card')
}

// 查看历史提现信息
const gotoKYC = () => {
  router.push('/KYC')
}

// 获取银行卡列表
const getBankCards = async () => {
  try {
    const resBankCards = await getBankCardList()
    console.log('银行卡列表:', resBankCards)
    if (resBankCards.status && resBankCards.body) {
      const usedCard = resBankCards.body.find((card) => card.use)
      if (usedCard) {
        usedBankCard.value = usedCard
      } else {
        // 没有使用中的银行卡
        usedBankCard.value = null
      }
    }
  } catch (error) {
    console.error('获取银行卡列表失败:', error)
  }
}

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

const { userInfo } = usePageInitializationWithConfig('AGENCY_CENTER')

onMounted(() => {
  getBankCards() // 获取银行卡列表
  getWithdrawInfoListData() // 获取提现信息列表
})
</script>

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

.host-setting {
  width: 100vw;
  min-height: 100vh;
  background-color: #ffffff;
  background-image: url(../assets/images/Azizi/secondBg.png);
}

.leave-btn {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.9em;
  font-weight: 500;
  transition: background-color 0.2s;
}

.leave-btn:active {
  background-color: #00000010;
}

@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;
  }
}

/* RTL支持 */
[dir='rtl'] .agency-info {
  flex-direction: row-reverse;
}

[dir='rtl'] .user-info {
  margin-left: 0;
  margin-right: 12px;
  text-align: right;
}

[dir='rtl'] .flipImg {
  transform: scaleX(-1);
}
</style>
