<template>
  <el-row>
    <el-col :span="24">
      <div style="text-align: center">
        <div>{{ t('capital.currencyAmount') }}</div>
        <div class="info-text">{{ props.data?.currency_amount }}</div>
      </div>
      <div style="text-align: center;">
        <div class="template-content">
          <div class="qr-bg">
            <div class="img-wrap" v-if="props && props.data">
              <el-image style="width: 180px; height: 180px" :src="'data:image/png;base64,' + props.data.code_image" fit="contain" />
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: space-evenly;max-width: 310px;margin: 0 auto;">
          <!-- <svg-icon icon-class="wxpay" class="payIcon" /> -->
          <!--          <svg-icon icon-class="alipay" class="payIcon" />-->
          <!-- <svg-icon icon-class="unionpay" class="payIcon" /> -->
          <!-- <svg-icon icon-class="huabei" class="payIcon" /> -->
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>

import useClipboard from "vue-clipboard3"
import { useLocale } from 'element-plus'
import { getImgPath } from '@/api/common'
import { isEmpty } from '@/utils/htfx'
import { onMounted, watch } from 'vue';
import RemittanceUpload from '@/components/RemittanceUpload'

const { proxy } = getCurrentInstance();
const { t } = useLocale()
const { toClipboard } = useClipboard()
const emit = defineEmits(['last-step', 'submit'])
const props = defineProps({
  data: Object
})
const baseUrl = ref(null)




onMounted(()=> {
  getImgPath().then(resp => {
    baseUrl.value = resp.data
  })
})
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgba(51, 51, 51, 1);
}

.info-text {
  font-size: 20px;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
}

.countdown-text {
  font-weight: 700;
  font-size: 36px;
  color: rgba(41, 187, 228, 1);
  margin: 0 10px;
}

.sub-btn {
  width: 40%;
}

.currency-amount {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 55.02px;
  color: rgba(41, 187, 228, 1);
}

.template-content {
  padding: 50px 80px;

  .qr-bg {
    margin: auto;
    width: 192px;
    height: 192px;
    padding: 6px;

    .img-wrap {
      width: 100%;
      height: 100%;
      background-color: #fff;
    }
  }
}

.template-content > div {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 27px;
  color: rgba(170, 170, 170, 1);
  text-align: left;
}

.payIcon {
  width: 43px;
  height: 43px;
}
</style>