<template>
    <div class="default-main ba-table-box zi-hua-dict-page">
        <el-alert type="info" :closable="false" show-icon>
            {{ t('config.ziHuaDictionary.desc') }}
        </el-alert>

        <div class="toolbar">
            <el-button v-if="canSave" type="primary" :loading="saving" :disabled="loading" @click="onSave">
                {{ t('config.ziHuaDictionary.btn_save') }}
            </el-button>
        </div>

        <el-table v-loading="loading" border stripe :data="items" row-key="no" max-height="640">
            <el-table-column prop="no" :label="t('config.ziHuaDictionary.no')" width="72" align="center" />
            <el-table-column :label="t('config.ziHuaDictionary.name')" min-width="120">
                <template #default="{ row }">
                    <el-input v-model="row.name" maxlength="32" show-word-limit />
                </template>
            </el-table-column>
            <el-table-column :label="t('config.ziHuaDictionary.category')" min-width="160">
                <template #default="{ row }">
                    <el-select v-model="row.category" style="width: 100%">
                        <el-option v-for="c in categories" :key="c" :label="categoryLabel(c)" :value="c" />
                    </el-select>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import createAxios from '/@/utils/axios'
import { auth } from '/@/utils/common'

defineOptions({
    name: 'config/ziHuaDictionary',
})

const { t } = useI18n()
const canSave = auth('save')

type Item = { no: number; name: string; category: string }

const loading = ref(false)
const saving = ref(false)
const items = ref<Item[]>([])
const categories = ref<string[]>(['zodiac', 'beast', 'fowl', 'vermin', 'divine'])

function categoryLabel(cat: string): string {
    return t('config.ziHuaDictionary.category_label.' + cat)
}

async function load() {
    loading.value = true
    try {
        const res = await createAxios({
            url: '/admin/config.ZiHuaDictionary/index',
            method: 'get',
        })
        if (res.code === 1 && res.data) {
            const list = res.data.items as Item[]
            items.value = Array.isArray(list) ? list : []
            if (Array.isArray(res.data.categories) && res.data.categories.length) {
                categories.value = res.data.categories as string[]
            }
        }
    } finally {
        loading.value = false
    }
}

async function onSave() {
    if (!auth('save')) {
        return
    }
    saving.value = true
    try {
        await createAxios({
            url: '/admin/config.ZiHuaDictionary/save',
            method: 'post',
            data: { items: items.value },
            showSuccessMessage: true,
        })
        await load()
    } finally {
        saving.value = false
    }
}

onMounted(() => {
    void load()
})
</script>

<style scoped lang="scss">
.zi-hua-dict-page {
    .toolbar {
        margin: 12px 0;
    }
}
</style>


