<template>
  <div class="fullPage">
    <GeneralHeader
      style="width: 100%"
      title="Cash out"
      color="color: rgba(0, 0, 0, 0.80)"
      backImg="/src/assets/icon/arrowBackBlack.png"
    />

    <div style="padding: 16px">
      <!-- 信息部分 -->
      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <div style="font-weight: 600">Information</div>
          <div style="display: flex; align-items: center" @click="lookDetails">
            <div style="color: rgba(0, 0, 0, 0.4)">Details</div>
            <img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
          </div>
        </div>
        <div
          style="
            background-color: white;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
          "
        >
          <span style="font-weight: 510; font-size: 0.8em">Withdrawable amount: </span>
          <span style="font-weight: 700; color: #333">{{
            currentAmount.availableAmount || 0
          }}</span>
        </div>
      </div>

      <!-- 银行帐号信息 -->
      <div>
        <!-- 标题 -->
        <div style="display: flex; align-items: center; margin-bottom: 10px">
          <div style="font-weight: 600">KYC</div>
        </div>
        <!-- 银行卡信息 -->
        <div
          style="
            background-color: white;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
          "
        >
          <!-- 未上传银行卡信息 -->
          <div
            v-if="!hasBankCard"
            style="display: flex; justify-content: space-between; align-items: center"
            @click="gotoKYC"
          >
            <span style="font-weight: 510; font-size: 1em">Complete information</span>
            <img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
          </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"
                >Passport/ID card:({{ bankCardInfo.cardImages.length }}/3)</span
              >
              <img
                src="../../../assets/icon/arrow.png"
                alt=""
                style="width: 6vw"
                @click="gotoKYC"
              />
            </div>
            <div style="display: flex; align-items: center; gap: 4px">
              <img
                :src="imgUrl"
                alt=""
                v-for="imgUrl in bankCardInfo.cardImages"
                style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px"
              />
            </div>

            <!-- 卡号 -->
            <div style="font-weight: 500">Contact number:</div>
            <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
              {{ bankCardInfo.contactNumber }}
            </div>

            <!-- 备注信息 -->
            <div style="font-weight: 500">Other description:</div>
            <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
              {{ bankCardInfo.description }}
            </div>
          </div>
        </div>
      </div>

      <!-- 提现按钮 -->
      <div style="display: flex; justify-content: center; align-items: center">
        <div
          style="
            margin-top: 10px;
            width: 80%;
            border-radius: 32px;
            padding: 12px;
            color: #fff;
            font-weight: 590;
            text-align: center;
          "
          :style="{
            background: hasBankCard
              ? '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="CashOut"
        >
          Cash out
        </div>
      </div>
    </div>

    <!-- 弹窗遮罩层 -->
    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        @click.stop
      >
        <div
          style="
            width: 80%;
            border-radius: 12px;
            background: #fff;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
          "
        >
          <div style="font-weight: 800; font-size: 1.2em">Tips</div>
          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.9em">
            Please fill in the information carefully. You can only withdraw cash after the
            information is completed.
          </div>
          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.7em">
            *lf there is a problem with the card number and the transfer cannot be made, it will
            result in the review being.
          </div>
          <div style="display: flex; justify-content: center; align-items: center">
            <div
              style="
                padding: 12px 20px;
                border-radius: 12px;
                background: linear-gradient(
                  152deg,
                  rgba(198, 112, 255, 0.8) 7.01%,
                  rgba(119, 38, 255, 0.8) 92.99%
                );
                color: #fff;
                font-weight: 800;
              "
              @click="Receive"
            >
              Receive
            </div>
          </div>
        </div>
      </div>
    </maskLayer>
  </div>
</template>

<script setup>
import GeneralHeader from '@/components/GeneralHeader.vue'
import maskLayer from '@/components/MaskLayer.vue'
import {
  withdrawableAmount, //获取可提现金额
  withdrawApply, //提交提现申请
} from '@/api/lottery'
import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const maskLayerShow = ref(false)
const currentAmount = ref(0) //可提现金额

const bankCardInfo = ref({})
const hasBankCard = computed(() => {
  return Object.keys(bankCardInfo.value).length > 0
})

// 查看历史提现信息
const lookDetails = () => {
  router.push('/cash-out-details')
}

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

// 提现按钮
const CashOut = () => {
  if (hasBankCard.value) {
    try {
      const resApply = withdrawApply(getApplyInfo())
      if (resApply.status) {
        setApplyInfo()
        router.go(-1)
      }
    } catch (error) {
      showError(error.errorMsg)
    }
  } else {
    maskLayerShow.value = true
  }
}

// 关闭提示信息
const Receive = () => {
  maskLayerShow.value = false
}

//获取拥有的抽奖券
const getDrawableAmount = async () => {
  const resDrawableAmount = await withdrawableAmount()
  if (resDrawableAmount.status && resDrawableAmount.body) {
    currentAmount.value = resDrawableAmount.body
  } else {
    currentAmount.value = 0
  }
}

onMounted(() => {
  getDrawableAmount() //获取可提现金额
  if (getApplyInfo()) {
    bankCardInfo.value =
      { ...getApplyInfo(), cardImages: JSON.parse(getApplyInfo().cardImages) } || {}
  }
})

onUnmounted(() => {
  setApplyInfo()
})
</script>

<style lang="scss" scoped>
* {
  color: rgba(0, 0, 0, 0.8);
  font-family: 'SF Pro Text';
}

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

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

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

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

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