<template>
    <Table url="/api/v1/parameters/business" rowKey="paramId" addBtn ref="table" :buttons="buttons">
        <template #drawer="drawer">
            <Form ref="form" v-bind="drawer" />
        </template>
        <template #search="{ query }">
            <MyFormModelItem :label="$t('language')">
                <Language v-model="query.paramLocale" />
            </MyFormModelItem>
            <MyFormModelItem :label="$t('paramter.moduleParameters')">
                <a-input v-model="query.paramModule" :placeholder="$t('input.placeholder')" />
            </MyFormModelItem>
            <MyFormModelItem :label="$t('paramter.parameterCoding')">
                <a-input v-model="query.paramCode" :placeholder="$t('input.placeholder')" />
            </MyFormModelItem>
            <MyFormModelItem :label="$t('business.parameterName')">
                <a-input v-model="query.paramName" :placeholder="$t('input.placeholder')" />
            </MyFormModelItem>
        </template>
        <a-table-column :title="$t('language')" data-index="paramLocale" />
        <a-table-column :title="$t('paramter.moduleParameters')" data-index="paramModule" />
        <a-table-column :title="$t('paramter.parameterCoding')" data-index="paramCode" />
        <a-table-column :title="$t('paramter.paramValue')" data-index="paramValue" />
        <a-table-column :title="$t('business.parameterName')" data-index="paramName" />
        <a-table-column :title="$t('table.remark')" data-index="remark" />
        <a-table-column :title="$t('order')" data-index="paramIndex" />
    </Table>
</template>

<script>
import Form from './form.vue';
import { Table, MoreItem } from '@/components/table';
import Language from './components/language.vue';

export default {
    components: { Form, MyFormModelItem: MoreItem, Table, Language },

    computed: {
        buttons() {
            return [
                { label: this.$t('table.edit'), click: this.edit },
                {
                    type: 'confirm',
                    url: (row) => `/api/v1/parameters/business/${row.paramId}`,
                    after: this.refreshTable,
                },
            ];
        },
    },
    methods: {
        refreshTable() {
            this.$refs['table']?.getData();
        },
        edit(row) {
            this.$refs['table']?.show({ row, type: 'edit', title: this.$t('table.edit') });
        },
    },
};
</script>
