<template>
    <el-dialog
        class="ba-operate-dialog deposit-detail-dialog"
        :close-on-click-modal="false"
        :model-value="isOpen"
        width="640px"
        @close="onDialogClose"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ t('order.depositOrder.detail_title') }}
            </div>
        </template>

        <el-scrollbar v-loading="loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form ba-edit-form"
                :style="config.layout.shrink ? '' : 'width: calc(100% - ' + (baTable.form.labelWidth ?? 120) / 2 + 'px)'"
            >
                <el-form
                    v-if="!loading"
                    :label-position="config.layout.shrink ? 'top' : 'right'"
                    :label-width="(baTable.form.labelWidth ?? 120) + 'px'"
                    @submit.prevent=""
                >
                    <el-form-item :label="t('order.depositOrder.order_no')">
                        <el-input :model-value="form.order_no" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.idempotency_key')">
                        <el-input :model-value="form.idempotency_key || '-'" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.user_username')">
                        <el-input :model-value="form.user_text" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.channel_name')">
                        <el-input :model-value="form.channel_text" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.status')">
                        <el-tag :type="statusTagType" effect="dark" size="small">{{ statusLabel }}</el-tag>
                    </el-form-item>

                    <el-form-item :label="t('order.depositOrder.amount')">
                        <el-input :model-value="amountText" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.bonus_amount')">
                        <el-input :model-value="bonusText" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.total_credit')">
                        <el-input :model-value="totalCreditText" readonly />
                    </el-form-item>

                    <el-form-item :label="t('order.depositOrder.pay_channel')">
                        <el-input :model-value="form.pay_channel || '-'" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.pay_time')">
                        <el-input :model-value="form.pay_time_text" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.deposit_tier_id')">
                        <el-input :model-value="form.deposit_tier_id || '-'" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.remark')">
                        <el-input v-model="form.remark" type="textarea" :rows="2" readonly />
                    </el-form-item>
                    <el-form-item :label="t('order.depositOrder.create_time')">
                        <el-input :model-value="form.create_time_text" readonly />
                    </el-form-item>
                </el-form>
            </div>
        </el-scrollbar>

        <template #footer>
            <div class="detail-footer">
                <el-button type="primary" v-blur @click="onDialogClose">{{ t('order.depositOrder.close_btn') }}</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, inject, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'

const config = useConfig()
const baTable = inject('baTable') as baTableClass
const { t } = useI18n()

const loading = ref(false)

const form = reactive({
    id: 0,
    order_no: '',
    idempotency_key: '',
    user_text: '-',
    channel_text: '-',
    pay_channel: '',
    pay_time_text: '-',
    deposit_tier_id: '',
    remark: '',
    create_time_text: '-',
    amount: 0,
    bonus_amount: 0,
    status: 0,
})

const isOpen = computed(() => ['Edit'].includes(baTable.form.operate ?? ''))

watch(
    () => ({ visible: isOpen.value, loadingState: baTable.form.loading, items: baTable.form.items }),
    ({ visible, loadingState }) => {
        if (!visible) return
        loading.value = loadingState === true
        if (loadingState) return
        hydrate()
    },
    { deep: true, immediate: true }
)

const hydrate = () => {
    const row = baTable.form.items as Record<string, unknown> | undefined
    if (!row || !row['id']) {
        return
    }
    form.id = Number(row['id'] ?? 0)
    form.order_no = String(row['order_no'] ?? '')
    form.idempotency_key = String(row['idempotency_key'] ?? '')
    form.pay_channel = String(row['pay_channel'] ?? '')
    form.deposit_tier_id = String(row['deposit_tier_id'] ?? '')
    form.remark = String(row['remark'] ?? '')
    form.amount = parseNumber(row['amount'])
    form.bonus_amount = parseNumber(row['bonus_amount'])
    form.status = Number(row['status'] ?? 0)
    form.create_time_text = formatTime(row['create_time'])
    form.pay_time_text = formatTime(row['pay_time'])
    form.user_text = resolveRelationText(row, 'user', row['user_id'])
    form.channel_text = resolveRelationText(row, 'channel', row['channel_id'])
}

const statusLabel = computed(() => t('order.depositOrder.status ' + form.status))
const statusTagType = computed(() => {
    switch (form.status) {
        case 1:
            return 'success'
        case 2:
            return 'danger'
        case 3:
            return 'warning'
        default:
            return 'info'
    }
})

const amountText = computed(() => formatAmount(form.amount))
const bonusText = computed(() => formatAmount(form.bonus_amount))
const totalCreditText = computed(() => formatAmount(Number((form.amount + form.bonus_amount).toFixed(2))))

const onDialogClose = () => {
    baTable.toggleForm()
}

function parseNumber(raw: unknown): number {
    if (raw === null || raw === undefined || raw === '') return 0
    const n = Number(raw)
    if (!Number.isFinite(n)) return 0
    return Number(n.toFixed(2))
}

function formatAmount(value: number): string {
    if (!Number.isFinite(value)) return '0.00'
    return value.toFixed(2)
}

function formatTime(raw: unknown): string {
    if (raw === null || raw === undefined || raw === '' || raw === 0) return '-'
    const sec = Number(raw)
    if (!Number.isFinite(sec) || sec <= 0) return '-'
    const d = new Date(sec * 1000)
    const pad = (n: number) => (n < 10 ? '0' + n : String(n))
    return (
        d.getFullYear() +
        '-' +
        pad(d.getMonth() + 1) +
        '-' +
        pad(d.getDate()) +
        ' ' +
        pad(d.getHours()) +
        ':' +
        pad(d.getMinutes()) +
        ':' +
        pad(d.getSeconds())
    )
}

function resolveRelationText(row: Record<string, unknown>, relationKey: string, fallbackId: unknown): string {
    const rel = row[relationKey]
    if (rel && typeof rel === 'object') {
        const r = rel as Record<string, unknown>
        const name = r['username'] ?? r['name']
        if (typeof name === 'string' && name !== '') {
            const id = fallbackId === null || fallbackId === undefined || fallbackId === '' ? '' : ' (ID: ' + String(fallbackId) + ')'
            return name + id
        }
    }
    if (fallbackId === null || fallbackId === undefined || fallbackId === '') {
        return '-'
    }
    return 'ID: ' + String(fallbackId)
}
</script>

<style scoped lang="scss">
.deposit-detail-dialog {
    :deep(.el-dialog__body) {
        padding-top: 8px;
    }
}

.detail-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    :deep(.deposit-detail-dialog) {
        width: calc(100vw - 24px) !important;
        max-width: 100vw;
    }
}
</style>
