// src/views/Wallet/CashOut/Details.vue
<template>
  <div class="fullPage">
    <GeneralHeader
      :showLanguageList="true"
      :title="t('details')"
      style="width: 100%"
      color="rgba(0, 0, 0, 0.80)"
    />

    <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px">
      <div
        v-for="record in records"
        style="
          padding: 12px;
          border-radius: 12px;
          background: #fff;
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
          display: flex;
          flex-direction: column;
          gap: 4px;
        "
      >
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div style="font-weight: 600">{{ t('cash_out') }}</div>
          <div style="font-weight: 600">${{ record.amount }}</div>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
            {{ formatUTCCustom(record.createTime) }}
          </div>
          <div
            style="
              font-weight: 510;
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            "
            :style="{
              backgroundImage:
                record.status == 0
                  ? 'linear-gradient(248deg, #759cff 5.66%, #3d73ff 42.49%)'
                  : record.status == 1
                    ? 'linear-gradient(248deg, #75FF98 5.66%, #3DFF54 42.49%)'
                    : 'linear-gradient(248deg, #FF7578 5.66%, #FF3D40 42.49%)',
            }"
          >
            {{ showStatus(record) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { formatUTCCustom } from '@/utils/utcFormat.js'
import { setDocumentDirection } from '@/locales/i18n'
import { useI18n } from 'vue-i18n'

import {
  withdrawRecords, //获取可提现金额
} from '@/api/lottery'

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

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

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

const activityId = route.query.activityId || ''
const records = ref([])

const showStatus = (item) => {
  if (item.status == 0) {
    return t('under_review')
  } else if (item.status == 1) {
    return t('approved')
  } else if (item.status == 2) {
    return t('rejection')
  }
}

//获取提现记录
const getRecords = async () => {
  const resRecords = await withdrawRecords(activityId)
  if (resRecords.status && resRecords.body) {
    records.value = resRecords.body.records
  } else {
    records.value = []
  }
}

onMounted(() => {
  getRecords() //获取提现记录
})
</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;
}

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

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