<template>
  <div class="host-setting gradient-background-circles">
    <!-- 使用 GeneralHeader 替换 MobileHeader -->
    <GeneralHeader
      :showBack="true"
      :showLanguageList="true"
      :title="t('host_setting')"
      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; flex-shrink: 0; margin-left: 8px"
          />
        </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;
            gap: 4px;
          "
        >
          <!-- 代理人信息 -->
          <div style="display: flex; align-items: center; min-width: 0">
            <!-- 头像 -->
            <img
              :src="userInfo.userAvatar || ''"
              alt=""
              style="width: 3.5em; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
              @error="handleAvatarImageError"
            />

            <!-- 信息 -->
            <div style="flex: 1; min-width: 0; margin-left: 12px">
              <!-- 用户名 -->
              <div
                style="
                  margin-bottom: 4px;
                  font-weight: 600;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                {{ userInfo.userNickname || '' }}
              </div>

              <!-- ID -->
              <div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4)">
                {{ t('user_id_prefix') }} {{ userInfo.account }}
              </div>
            </div>
          </div>

          <!-- 按钮 -->
          <div style="display: flex; align-items: center">
            <div class="leave-btn" @click="maskLayerShow = true">{{ t('leave') }}</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/Aslan/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/Aslan/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/Aslan/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/Aslan/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>

    <!-- 弹窗 -->
    <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: 18px; font-weight: 600; color: #333; text-align: center"
            >
              {{ t('tips') }}
            </div>
          </div>

          <div style="padding: 16px 20px; text-align: center">
            <div style="margin: 0 0 8px 0; font-size: 14px; color: #666; line-height: 1.5">
              {{ t('leave_agent_tips') }}
            </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="confirmLeave">{{ t('confirm') }}</button>
          </div>
        </div>
      </div>
    </maskLayer>
  </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 { getTeamId } from '@/utils/userStore.js'
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'

import { getMyAgency, leaveAgency } from '@/api/host'
import {
  getBankBalance, // 获取余额
  getBankCardList, // 获取正在使用的银行卡
  getWithdrawInfoList, // 获取申请提现信息
  useBankCard, // 设置默认银行卡
  withdrawApply, //提现
} from '@/api/wallet.js'

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

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

const maskLayerShow = ref(false)

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

const userInfo = ref({}) // 用户信息
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 confirmLeave = async () => {
  console.log('确定离开')
  const resLeave = await leaveAgency({ reason: 'QUIT', teamId: getTeamId() })
  if (resLeave.status) {
    // 可以添加成功离开后的处理逻辑
  }
  maskLayerShow.value = false
}

// 获取代理信息
const getMyAgencyInfo = async () => {
  const resAgencyInfo = await getMyAgency()
  if (resAgencyInfo.status && resAgencyInfo.body) {
    userInfo.value = resAgencyInfo.body
  }
}

// 获取银行卡列表
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)
  }
}

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

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

.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;
  cursor: pointer;
}

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

.cancel-btn,
.confirm-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn {
  border: 1px solid #e6e6e6;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.4);
}

.confirm-btn {
  color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(
    152deg,
    rgba(198, 112, 255, 0.6) 7.01%,
    rgba(119, 38, 255, 0.6) 92.99%
  );
}

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

/* RTL支持 */
[dir='rtl'] .leave-btn {
  margin-right: 0;
  margin-left: 8px;
}

[dir='rtl'] .agency-icon {
  margin-left: 0;
  margin-right: 8px;
}

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