<template>
    <my-table
        url="/api/v1/parameters/business"
        rowKey="paramId"
        :addBtn="addBtn"
        ref="table"
        :scroll="{ x: true }"
    >
        <template #drawer>
            <Form ref="form" />
        </template>
        <template #search="{ query }">
            <MyFormModelItem label="语言">
                <a-select v-model="query.paramLocale" :options="langList" placeholder="请选择" />
            </MyFormModelItem>
            <MyFormModelItem label="参数模块">
                <a-input v-model="query.paramModule" placeholder="请输入" />
            </MyFormModelItem>
            <MyFormModelItem label="参数编码">
                <a-input v-model="query.paramCode" placeholder="请输入" />
            </MyFormModelItem>
            <MyFormModelItem label="参数名称">
                <a-input v-model="query.paramName" placeholder="请输入" />
            </MyFormModelItem>
        </template>
        <a-table-column title="语言" data-index="paramLocale" />
        <a-table-column title="参数模块" data-index="paramModule" />
        <a-table-column title="参数编码" data-index="paramCode" />
        <a-table-column title="参数值" data-index="paramValue" />
        <a-table-column title="参数名称" data-index="paramName" />
        <a-table-column title="说明" data-index="remark" />
        <a-table-column title="显示顺序" data-index="paramIndex" />
        <a-table-column title="操作" fixed="right">
            <template #default="row">
                <a @click="() => view(row, 1)">编辑</a>
                <a-divider type="vertical" />
                <PopconfirmDelete :url="`/api/v1/parameters/business/${row.paramId}`" :cb="refreshTable" />
            </template>
        </a-table-column>
    </my-table>
</template>
<script>
import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
import MyFormModelItem from '@/components/table/my_item.vue';
import { globalConfig } from '@/config';
import { formatObj } from '@/utils';
import Form from './form.vue';

export default {
    components: { Form, PopconfirmDelete, MyFormModelItem },
    data() {
        return {
            addBtn: { width: 600, onOk: () => this.$refs['form']?.submit() },
            langList: [],
        };
    },
    async mounted() {
        this.langList = await formatObj(globalConfig.langs, { value: 'key', label: 'name', key: 'key' });
    },
    methods: {
        refreshTable() {
            this.$refs['table']?.getData();
        },
        view(data, type) {
            this.$refs['table']?.show({ type });
            this.$nextTick(() => {
                this.$refs['form'].setData({ ...data }, type);
            });
        },
    },
};
</script>