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

        <TableHeader
            :buttons="['refresh', 'add', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('mall.pointsLog.quick_search_fields') })"
        >
            <el-button v-if="state.userAsset.id" v-blur class="table-header-operate">
                <span class="table-header-operate-text">
                    {{
                        state.userAsset.username +
                        ' (ID:' +
                        state.userAsset.id +
                        ') ' +
                        t('mall.pointsLog.available_points') +
                        ': ' +
                        state.userAsset.available_points
                    }}
                </span>
            </el-button>
        </TableHeader>

        <Table />
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { debounce } from 'lodash-es'
import { provide, reactive, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { getUserAsset, url } from '/@/api/backend/mall/pointsLog'
import { baTableApi } from '/@/api/common'
import MallPageIntro from '/@/components/mall/MallPageIntro.vue'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import PopupForm from './popupForm.vue'

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

interface UserAssetInfo {
    id?: number
    username?: string
    phone?: string
    playx_user_id?: string
    available_points?: number
}

const { t } = useI18n()
const route = useRoute()
const routeUserAssetId = route.query.user_asset_id
const defaultUserAssetId = typeof routeUserAssetId === 'string' ? routeUserAssetId : ''
const state = reactive<{ userAsset: UserAssetInfo }>({
    userAsset: {},
})

const baTable = new baTableClass(
    new baTableApi(url),
    {
        column: [
            { label: t('mall.pointsLog.id'), prop: 'id', align: 'center', operator: '=', width: 70 },
            { label: t('mall.pointsLog.user_asset_id'), prop: 'user_asset_id', align: 'center', operator: '=', width: 100 },
            {
                label: t('mall.pointsLog.playx_user_id'),
                prop: 'userAsset.playx_user_id',
                align: 'center',
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
            },
            {
                label: t('mall.pointsLog.username'),
                prop: 'userAsset.username',
                align: 'center',
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
            },
            { label: t('mall.pointsLog.score_value'), prop: 'score_value', align: 'center', operator: 'RANGE', sortable: 'custom' },
            { label: t('mall.pointsLog.before'), prop: 'before', align: 'center', operator: 'RANGE', sortable: 'custom' },
            { label: t('mall.pointsLog.after'), prop: 'after', align: 'center', operator: 'RANGE', sortable: 'custom' },
            {
                label: t('mall.pointsLog.memo'),
                prop: 'memo',
                align: 'center',
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
                showOverflowTooltip: true,
            },
            { label: t('mall.pointsLog.admin'), prop: 'admin.username', align: 'center', operator: 'LIKE' },
            {
                label: t('mall.pointsLog.create_time'),
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: 'RANGE',
                width: 160,
            },
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: {
            user_asset_id: defaultUserAssetId,
            score_value: 0,
        },
    }
)

const getUserAssetInfo = debounce((userAssetId: unknown) => {
    if ((typeof userAssetId !== 'string' && typeof userAssetId !== 'number') || userAssetId === '') {
        state.userAsset = {}
        return
    }

    getUserAsset(userAssetId).then((response) => {
        state.userAsset = response.data.userAsset
    })
}, 300)

baTable.after.onSubmit = () => {
    getUserAssetInfo(baTable.comSearch.form.user_asset_id)
}
baTable.after.onTableHeaderAction = ({ event }) => {
    if (event == 'refresh') {
        getUserAssetInfo(baTable.comSearch.form.user_asset_id)
    }
}

baTable.mount()
baTable.getData()
provide('baTable', baTable)

getUserAssetInfo(baTable.comSearch.form.user_asset_id)

watch(
    () => baTable.comSearch.form.user_asset_id,
    (newValue) => {
        baTable.form.defaultItems!.user_asset_id = newValue
        getUserAssetInfo(newValue)
    }
)
</script>

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