<template>
    <Table
        ref="TableRef"
        :request="Api.getEquipmentsAttributes"
        rowKey="instanceId"
        :otherParams="otherParams"
    >
        <template #search>
            <a-row>
                <a-col :span="12">
                    <a-button type="link" @click="onAddRow">新增</a-button>
                    <a-divider type="vertical" />
                    <a-dropdown>
                        <a-button type="link"> 过滤 <a-icon type="down" /> </a-button>
                        <a-menu slot="overlay">
                            <a-menu-item>
                                <a @click="() => onChangeAttributeType('ALL')">全部</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a @click="() => onChangeAttributeType('SYSTEM')">系统</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a @click="() => onChangeAttributeType('CUSTOM')">自定义</a>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </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="属性值">
            <template #default="row">
                <a-input v-if="row.editable" v-model="row.instanceValue" />
                <span v-else>
                    {{ row.instanceValue }}
                </span>
            </template>
        </a-table-column>
        <a-table-column title="属性类型" data-index="attributeTypeName" />
        <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>
</template>
<script>
import ActionButton from '@/components/action_button/index.vue';
import Api from '@/api/oceanus';
import Table from '@/components/table/SimpleTable.vue';

export default {
    components: { Table, ActionButton },
    props: {
        dataInfo: {
            type: Object,
            default: () => ({}),
        },
    },
    watch: {
        dataInfo: {
            handler(val) {
                const { equipmentId, categoryId } = val;
                this.otherParams = {
                    attributeType: 'ALL',
                    equipmentId,
                    categoryId,
                };
                this.attributeName = '';
            },
            deep: true,
            immediate: true,
        },
    },
    data() {
        return {
            Api,
            attributeName: '',
            otherParams: {},
            buttons: [
                {
                    label: '编辑',
                    click: this.onEditRow,
                },
                {
                    type: 'confirm',
                    url: (row) => ({
                        url: '/oceanus/api/v1/equipments/attributes',
                        method: 'del',
                        data: {
                            instanceIds: [row.instanceId],
                        },
                    }),
                    after: () => this.refreshTable(),
                    isHidden: (row) => {
                        return row.attributeType === 'SYSTEM';
                    },
                },
                {
                    label: '置顶',
                    click: async (row) => {
                        const { instanceId } = row;
                        try {
                            await Api.topEquipmentsAttributes({ instanceId });
                            this.refreshTable();
                            this.$message.success('置顶成功!');
                        } catch (e) {
                            this.$message.warning('置顶失败!');
                        }
                    },
                },
                {
                    label: '置底',
                    click: async (row) => {
                        const { instanceId } = row;
                        try {
                            await Api.bottomEquipmentsAttributes({ instanceId });
                            this.refreshTable();
                            this.$message.success('置顶成功!');
                        } catch (e) {
                            this.$message.warning('置顶失败!');
                        }
                    },
                },
            ],
            editButtons: [
                {
                    label: '确定',
                    click: this.onSubmitRow,
                },
                {
                    type: 'confirm',
                    label: '取消',
                    title: '确认是否取消?',
                    onOk: this.onCancelRow,
                },
            ],
        };
    },
    mounted() {},

    methods: {
        onChangeAttributeType(val) {
            this.otherParams = {
                ...this.otherParams,
                attributeType: val,
            };
        },
        onSearch(val) {
            this.otherParams = {
                ...this.otherParams,
                attributeName: val,
            };
        },
        onAddRow() {
            const data = this.$refs['TableRef']?.getTableData();
            const isEdit = data.find((i) => i.action === 'add');
            if (isEdit) return;
            const obj = {
                editable: true,
                key: +new Date(),
                attributeType: 'CUSTOM',
                attributeName: '',
                action: 'add',
                equipmentId: this.dataInfo.equipmentId,
                viewIndex: 0,
            };
            this.$refs['TableRef']?.setTableData([obj, ...data]);
        },
        async onSubmitRow(row) {
            if (row.attributeName === '' || row.instanceValue === '') {
                return this.$message.warning('请输入属性名称、属性值');
            } else {
                try {
                    if (row.action === 'add') {
                        await Api.addEquipmentsAttributes(row);
                    }
                    if (row.action === 'edit') {
                        await Api.updateEquipmentsAttributes(row);
                    }
                    this.refreshTable();
                    this.$message.success('提交成功!');
                } catch (e) {
                    this.$message.warning('保存失败!');
                }
            }
        },
        onEditRow(row) {
            const data = this.$refs['TableRef']?.getTableData();
            const newData = data.map((i) => {
                const oData = { ...i };
                if (i.key === row.key) {
                    oData.editable = true;
                    oData.action = 'edit';
                }
                return oData;
            });
            this.$refs['TableRef']?.setTableData(newData);
        },
        onCancelRow(row) {
            const data = this.$refs['TableRef']?.getTableData();
            if (row.action === 'add') {
                const newData = data.filter((i) => i.key !== row.key);
                this.$refs['TableRef']?.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['TableRef']?.setTableData(newData);
            }
        },
        refreshTable() {
            this.$refs['TableRef']?.refresh();
        },
    },
};
</script>
