<template>
    <my-card>
        <Table :request="Api.getAttributes" rowKey="attributeId" ref="table" :otherParams="tableParam">
            <!-- <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> -->
            <template #search>
                <a-row>
                    <a-col :span="12">
                        <a-button type="link" @click="onAddTableRow">新增</a-button>
                    </a-col>
                    <a-col :span="12" class="tw-text-right">
                        <a-input-search
                            v-model="attributeName"
                            :style="{ width: '80%' }"
                            placeholder="请输入搜索内容"
                            enter-button
                            allowClear
                            @search="onSearch"
                        />
                    </a-col>
                </a-row>
            </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>
        </Table>
    </my-card>
</template>

<script>
import Api from '@/api/oceanus';
import ActionButton from '@/components/action_button/index.vue';
import Table from '@/components/table/SimpleTable.vue';

export default {
    components: { ActionButton, Table },
    props: {
        param: Object,
    },
    watch: {
        param: {
            handler(val) {
                this.tableParam = { ...val };
                this.attributeName = '';
            },
            deep: true,
            immediate: true,
        },
    },
    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: {},
            attributeName: '',
            Api,
        };
    },
    methods: {
        onSearch(val) {
            this.tableParam = {
                ...this.tableParam,
                attributeName: val,
            };
        },
        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']?.refresh();
        },
    },
};
</script>
<style scoped>
</style>
