<template>
    <my-table
        :style="{ marginTop: 0 }"
        url="/oceanus/api/v1/categories/attributes"
        :tableParam="{ categoryId: tableParam.categoryId }"
        rowKey="key"
        ref="table"
        :formatData="formatData"
    >
        <template v-if="tableParam.categoryId !== 1" #search="{ query }">
            <my-form-item label="账号" :colAttr="{ span: 12 }">
                <a-input placeholder="Basic usage" v-model="query.attributeName" />
            </my-form-item>
        </template>
        <template v-if="tableParam.categoryId !== 1" #buttons>
            <a-button type="primary" @click="onAddTableRow">新增</a-button>
        </template>

        <a-table-column title="属性名称">
            <template #default="row">
                <a-input v-if="row.editable" v-model="row.attributeName" />
                <span v-else>
                    {{ row.attributeName }}
                </span>
            </template>
        </a-table-column>
        <a-table-column title="操作" :width="180">
            <template #default="row">
                <ActionButton v-if="row.editable" :buttons="editButtons" :row="row" />
                <ActionButton v-else :buttons="buttons" :row="row" />
            </template>
        </a-table-column>
    </my-table>
</template>

<script>
import Api from '@/api/oceanus';
import { formatObj } from '@/utils';
import ActionButton from '@/components/action_button/index.vue';

export default {
    components: { ActionButton },
    props: {
        param: Object,
    },
    watch: {
        param(val) {
            this.tableParam = val;
        },
    },
    data() {
        return {
            buttons: [
                {
                    label: '编辑',
                    click: this.onEditTableRow,
                },
                {
                    type: 'confirm',
                    url: (row) => `/oceanus/api/v1/categories/attributes/${row.attributeId}`,
                    after: () => this.refreshTable(),
                },
                {
                    label: '置顶',
                    click: async (row) => {
                        const { attributeId, categoryId } = row;
                        try {
                            await Api.movementAttributes({ attributeId, categoryId, moveType: 'TOP' });
                            this.refreshTable();
                            this.$message.success('置顶成功!');
                        } catch (e) {
                            this.$message.warning('置顶失败!');
                        }
                    },
                },
                {
                    label: '置底',
                    click: async (row) => {
                        const { attributeId, categoryId } = row;
                        try {
                            await Api.movementAttributes({ attributeId, categoryId, moveType: 'BOTTOM' });
                            this.refreshTable();
                            this.$message.success('置顶成功!');
                        } catch (e) {
                            this.$message.warning('置顶失败!');
                        }
                    },
                },
            ],
            editButtons: [
                {
                    label: '确定',
                    click: this.onSubmitTableRow,
                },
                {
                    type: 'confirm',
                    label: '取消',
                    title: '确认是否取消?',
                    onOk: this.onCancelTableRow,
                },
            ],
            tableParam: {},
        };
    },
    methods: {
        async formatData(data) {
            const newData = await formatObj(data.records, { key: 'attributeId' });
            return newData;
        },
        onAddTableRow() {
            const data = this.$refs['table']?.getTableData();
            const isEdit = data.find((i) => i.action === 'add');
            if (isEdit) return;
            const obj = {
                editable: true,
                key: +new Date(),
                attributeName: '',
                action: 'add',
                categoryId: this.tableParam.categoryId,
                viewIndex: 1,
            };
            this.$refs['table']?.setTableData([obj, ...data]);
        },
        onCancelTableRow(row) {
            const data = this.$refs['table']?.getTableData();
            if (row.action === 'add') {
                const newData = data.filter((i) => i.key !== row.key);
                this.$refs['table']?.setTableData(newData);
            }
            if (row.action === 'edit') {
                const newData = data.map((i) => {
                    const data = { ...i };
                    if (i.key === row.key) {
                        data.editable = false;
                        delete data.action;
                    }
                    return data;
                });
                this.$refs['table']?.setTableData(newData);
            }
        },
        async onSubmitTableRow(row) {
            if (row.attributeName === '') {
                return this.$message.warning('请输入属性名称!');
            } else {
                try {
                    if (row.action === 'add') {
                        await Api.addAttributes(row);
                    }
                    if (row.action === 'edit') {
                        await Api.updateAttributes(row);
                    }
                    this.refreshTable();
                    this.$message.success('提交成功!');
                } catch (e) {
                    this.$message.warning('保存失败!');
                }
            }
        },
        onEditTableRow(row) {
            const data = this.$refs['table']?.getTableData();
            const newData = data.map((i) => {
                const oData = { ...i };
                if (i.key === row.key) {
                    oData.editable = true;
                    oData.action = 'edit';
                }
                return oData;
            });
            this.$refs['table']?.setTableData(newData);
        },
        refreshTable() {
            this.$refs['table']?.reset();
        },
    },
};
</script>
<style scoped>
</style>
