<template>
    <div class="default-main ba-table-box">
        <MallPageIntro page-key="playxOrder" />
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <TableHeader
            :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('mall.playxOrder.quick Search Fields') })"
        ></TableHeader>

        <Table ref="tableRef"></Table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { baTableApi } from '/@/api/common'
import MallPageIntro from '/@/components/mall/MallPageIntro.vue'
import createAxios from '/@/utils/axios'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import { ElMessageBox } from 'element-plus'

defineOptions({
    name: 'mall/playxOrder',
})

const { t } = useI18n()
const tableRef = useTemplateRef('tableRef')

const baTable = new baTableClass(
    new baTableApi('/admin/mall.PlayxOrder/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('mall.playxOrder.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
            { label: t('mall.playxOrder.user_id'), prop: 'user_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
            {
                label: t('mall.playxOrder.type'),
                prop: 'type',
                align: 'center',
                operator: 'eq',
                sortable: false,
                render: 'tag',
                replaceValue: {
                    BONUS: t('mall.playxOrder.type BONUS'),
                    PHYSICAL: t('mall.playxOrder.type PHYSICAL'),
                    WITHDRAW: t('mall.playxOrder.type WITHDRAW'),
                },
            },
            {
                label: t('mall.playxOrder.status'),
                prop: 'status',
                align: 'center',
                operator: 'eq',
                sortable: false,
                render: 'tag',
                replaceValue: {
                    PENDING: t('mall.playxOrder.status PENDING'),
                    COMPLETED: t('mall.playxOrder.status COMPLETED'),
                    SHIPPED: t('mall.playxOrder.status SHIPPED'),
                    REJECTED: t('mall.playxOrder.status REJECTED'),
                },
            },
            { label: t('mall.playxOrder.mall_item_id'), prop: 'mall_item_id', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('mall.playxOrder.mallitem__title'), prop: 'mallItem.title', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
            { label: t('mall.playxOrder.points_cost'), prop: 'points_cost', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('mall.playxOrder.amount'), prop: 'amount', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('mall.playxOrder.external_transaction_id'), prop: 'external_transaction_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), sortable: false, operator: 'LIKE' },
            {
                label: t('mall.playxOrder.grant_status'),
                prop: 'grant_status',
                align: 'center',
                operator: 'eq',
                sortable: false,
                render: 'tag',
                replaceValue: {
                    NOT_SENT: t('mall.playxOrder.grant_status NOT_SENT'),
                    SENT_PENDING: t('mall.playxOrder.grant_status SENT_PENDING'),
                    ACCEPTED: t('mall.playxOrder.grant_status ACCEPTED'),
                    FAILED_RETRYABLE: t('mall.playxOrder.grant_status FAILED_RETRYABLE'),
                    FAILED_FINAL: t('mall.playxOrder.grant_status FAILED_FINAL'),
                    '---': t('mall.playxOrder.grant_status ---'),
                },
            },
            {
                label: t('mall.playxOrder.fail_reason'),
                prop: 'fail_reason',
                align: 'center',
                showOverflowTooltip: true,
                operatorPlaceholder: t('Fuzzy query'),
                sortable: false,
                operator: 'LIKE',
            },
            { label: t('mall.playxOrder.reject_reason'), prop: 'reject_reason', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('mall.playxOrder.shipping_company'), prop: 'shipping_company', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('mall.playxOrder.shipping_no'), prop: 'shipping_no', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('mall.playxOrder.receiver_name'), prop: 'receiver_name', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('mall.playxOrder.receiver_phone'), prop: 'receiver_phone', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('mall.playxOrder.receiver_address'), prop: 'receiver_address', align: 'center', showOverflowTooltip: true, sortable: false, operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('mall.playxOrder.create_time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', comSearchRender: 'datetime', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
            { label: t('mall.playxOrder.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', comSearchRender: 'datetime', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
            {
                label: t('Operate'),
                align: 'center',
                render: 'buttons',
                buttons: [
                    {
                        render: 'confirmButton',
                        name: 'retry',
                        title: 'mall.playxOrder.manual_retry',
                        text: '',
                        type: 'warning',
                        icon: 'fa fa-refresh',
                        class: 'table-row-edit',
                        display: (row: TableRow) =>
                            row.type === 'BONUS' &&
                            row.status === 'PENDING' &&
                            ['NOT_SENT', 'SENT_PENDING', 'FAILED_RETRYABLE', 'FAILED_FINAL'].includes(String(row.grant_status)),
                        popconfirm: {
                            title: t('mall.playxOrder.retry_confirm'),
                            confirmButtonText: t('Confirm'),
                            cancelButtonText: t('Cancel'),
                            confirmButtonType: 'warning',
                        },
                        click: async (row: TableRow) => {
                            await createAxios(
                                {
                                    url: '/admin/mall.Order/retry',
                                    method: 'post',
                                    data: {
                                        id: row.id,
                                    },
                                },
                                {
                                    showSuccessMessage: true,
                                }
                            )
                            await baTable.getData()
                        },
                    },
                    {
                        render: 'tipButton',
                        name: 'ship',
                        title: 'mall.playxOrder.ship',
                        text: '',
                        type: 'success',
                        icon: 'fa fa-truck',
                        class: 'table-row-ship',
                        display: (row: TableRow) => row.type === 'PHYSICAL' && row.status === 'PENDING',
                        click: async (row: TableRow) => {
                            try {
                                const shippingNoRes = await ElMessageBox.prompt(t('mall.playxOrder.ship_shipping_no_prompt'), t('mall.playxOrder.ship'), {
                                    confirmButtonText: t('Confirm'),
                                    cancelButtonText: t('Cancel'),
                                })
                                const shippingCompanyRes = await ElMessageBox.prompt(
                                    t('mall.playxOrder.ship_shipping_company_prompt'),
                                    t('mall.playxOrder.ship'),
                                    {
                                        confirmButtonText: t('Confirm'),
                                        cancelButtonText: t('Cancel'),
                                    }
                                )

                                const shippingNo = shippingNoRes.value
                                const shippingCompany = shippingCompanyRes.value

                                await createAxios(
                                    {
                                        url: '/admin/mall.PlayxOrder/ship',
                                        method: 'post',
                                        data: {
                                            id: row.id,
                                            shipping_company: shippingCompany,
                                            shipping_no: shippingNo,
                                        },
                                    },
                                    {
                                        showSuccessMessage: true,
                                    }
                                )
                                await baTable.getData()
                            } catch {
                                // 用户取消弹窗：不做任何提示，避免控制台报错
                            }
                        },
                    },
                    {
                        render: 'tipButton',
                        name: 'reject',
                        title: 'mall.playxOrder.reject',
                        text: '',
                        type: 'danger',
                        icon: 'fa fa-times',
                        class: 'table-row-reject',
                        display: (row: TableRow) => row.type === 'PHYSICAL' && row.status === 'PENDING',
                        click: async (row: TableRow) => {
                            try {
                                const res = await ElMessageBox.prompt(t('mall.playxOrder.reject_reason_prompt'), t('mall.playxOrder.reject'), {
                                    confirmButtonText: t('Confirm'),
                                    cancelButtonText: t('Cancel'),
                                })
                                await createAxios(
                                    {
                                        url: '/admin/mall.PlayxOrder/reject',
                                        method: 'post',
                                        data: {
                                            id: row.id,
                                            reject_reason: res.value,
                                        },
                                    },
                                    {
                                        showSuccessMessage: true,
                                    }
                                )
                                await baTable.getData()
                            } catch {
                                // 用户取消：不提示
                            }
                        },
                    },
                ],
                operator: false,
            },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: {},
    },
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getData()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss"></style>

