<template>
  <el-dialog
    v-model="rechargeStore.visible"
    :title="$t('充值确认')"
    width="500px"
    :close-on-click-modal="false"
    @close="handleCancel"
  >
    <div class="info-container" v-if="dataRef">
      <div class="info-item">
        <span class="label">{{ $t('充值类型') }}</span>
        <span class="value" v-if="rechargeStore.item && rechargeStore.item.payment_type">
          {{ payment_type_text[Number(rechargeStore.item.payment_type) - 1] }}
        </span>
      </div>
      <div class="info-item">
        <span class="label">{{ $t('收款人姓名') }}</span>
        <span class="value">{{ dataRef.payName }}</span>
      </div>
      <div class="info-item">
        <span class="label">{{ $t('收款账号') }}</span>
        <span class="value">{{ dataRef.payAccount }}</span>
      </div>
      <div class="info-item" v-if="rechargeStore.item.payment_type == '3' && dataRef.bankName">
        <span class="label">{{ $t('开户行') }}</span>
        <span class="value">{{ dataRef.bankName }}</span>
      </div>
      <div class="qr-wrapper" v-if="rechargeStore.item.payment_type != '3' && dataRef.payQrCode">
        <img class="qr-code" :src="dataRef.payQrCode" alt="qr-code" />
        <div class="qr-tip">{{ $t('收款码') }}</div>
      </div>

      <div class="qr-wrapper">
        <CUploadImage @change="changeImg" :maxCount="1" ref="CUploadImageRef" />
        <div class="qr-tip">{{ $t('上传支付凭证') }}</div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button class="cancel-btn" @click="handleCancel">{{ t('取消') }}</el-button>
        <el-button type="primary" @click="handleConfirm" class="submit-btn">{{ t('提交') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { apiUrl } from "@/request";
import { useI18n } from "vue-i18n";
import CUploadImage from '@/components/CUploadImage/index.vue'
import { useRechargeStore } from '@/store/rechargeStore.js'

const { t, locale } = useI18n()
const rechargeStore = useRechargeStore()

// 定义需要抛出的事件
const emit = defineEmits(['recharge-confirm'])

const CUploadImageRef = ref()
const dataRef = ref({})
const dataParams = reactive({
  id: '',
  image: ''
})

const payment_type_text = ref(['微信', '支付宝', '银行卡'])

// 监听弹窗显示，并处理数据
watch(() => rechargeStore.visible, (newVal) => {
  if (newVal && rechargeStore.item && rechargeStore.item.pay_data) {
    dataParams.id = rechargeStore.item.id;
    dataRef.value = JSON.parse(rechargeStore.item.pay_data);
  }
})

const handleConfirm = () => {
  uni.request({
    url: apiUrl + 'wallet/submitImage',
    method: 'POST',
    data: dataParams,
    header: {
      Authorization: uni.getStorageSync('token'),
      lang: locale.value
    },
    success: (res) => {
      uni.hideLoading();
      if (res.data.code === 0) {
        uni.showToast({ title: res.data.msg || t('提交成功'), icon: 'success' });
        // 清空表单
        dataParams.id = '';
        dataParams.image = '';
        CUploadImageRef.value.clear(); // 调用子组件方法清除图片

        emit('recharge-confirm')
      } else {
        uni.showToast({ title: res.data.msg || t('提交失败'), icon: 'none' });
      }
    },
    fail: (err) => {
      uni.hideLoading();
      uni.showToast({ title: t('网络错误'), icon: 'none' });
    }
  });
  rechargeStore.hideModal();
};

const handleCancel = () => {
  rechargeStore.hideModal();
};

const changeImg = (e) => {
  dataParams.image = Array.isArray(e) ? e[0] : e
}
</script>

<style scoped>
/* 穿透修改 Element Plus 对话框主背景为 #141414 */
:deep(.el-dialog) {
  background-color: #141414;
}
:deep(.el-dialog__title) {
  color: #ffffff;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #ffffff;
}

.info-container {
  background-color: #1e1e1e; /* 使用略浅的暗色做容器层级区分，如需完全一致可改为 #141414 */
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #2d2d2d;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #8c8c8c;
}

.value {
  color: #ffffff;
  font-weight: 600;
}

.qr-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}

.qr-code {
  width: 160px;
  height: 160px;
  border-radius: 4px;
  border: 1px solid #333;
  object-fit: contain;
}

.qr-tip {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

.action-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-footer { display: flex; justify-content: center; gap: 16px; .cancel-btn { background: transparent; color: $text-primary; border: 1px solid $border-color; width: 100px; &:hover { border-color: $main-color; color: $main-color; } } .submit-btn { width: 140px; font-weight: bold; color: #000; background-color: $main-color; border-color: $main-color; &:hover { opacity: 0.9; } } }

</style>