<template>
    <div>
        <my-card>
            <a-row :gutter="[16, 16]">
                <a-col :span="24">
                    <a-select
                        show-search
                        v-model="searchValue"
                        placeholder="input search text"
                        style="width: 100%"
                        :default-active-first-option="false"
                        :show-arrow="false"
                        :filter-option="false"
                        :not-found-content="null"
                        :options="dataSource"
                        @search="onSearch"
                        @change="onChange"
                    />
                </a-col>

                <a-col :span="24" class="tw-text-right">
                    <a-button-group>
                        <a-button type="primary" ghost @click="add">新增</a-button>
                        <a-button type="primary" ghost @click="edit">编辑</a-button>
                        <a-button type="primary" ghost @click="del">删除</a-button>
                    </a-button-group>
                </a-col>
            </a-row>
        </my-card>
        <my-card class="tw-mt-2.5">
            <a-row :gutter="[16, 16]">
                <a-col :span="24">
                    <a-tree
                        :treeData="treeObj.treeData || []"
                        :replaceFields="replaceFields"
                        :expandedKeys="expandedKeys"
                        :selectedKeys="selectedKeys"
                        @select="onSelect"
                        @expand="onExpand"
                    />
                </a-col>
            </a-row>
        </my-card>
        <TreeDrawer ref="TreeDrawer" :refresh="init" />
    </div>
</template>

<script>
import Api from '@/api/oceanus';
import { arrayToTree, formatObj } from '@/utils';
import TreeDrawer from './TreeDrawer.vue';

export default {
    components: { TreeDrawer },
    data() {
        return {
            searchValue: undefined,
            treeObj: {},
            replaceFields: { title: 'categoryName', key: 'categoryId', children: 'children' },
            selectedKeys: [],
            expandedKeys: [],
            dataSource: [],
            selectedObj: {},
        };
    },
    model: {
        prop: 'value',
        event: 'change',
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {
            const data = await Api.getOceanusTree();
            const expandedKeys = [];
            const treeObj = new arrayToTree({
                data: data,
                rootValue: -1,
                parentKey: 'parentCategoryId',
                key: 'categoryId',
            });
            treeObj.data.map((i) => {
                if (i.children) {
                    expandedKeys.push(i.categoryId);
                }
            });
            this.treeObj = treeObj;
            this.expandedKeys = expandedKeys;
            this.selectedKeys = [treeObj.treeData[0]?.categoryId];
            this.selectedObj = treeObj.treeData[0];
            this.$emit('change', { categoryId: treeObj.treeData[0].categoryId });
        },
        async onSearch(searchText) {
            const dataList = this.treeObj.data;
            const newData = dataList.filter((i) => i.categoryName.indexOf(searchText) != -1);
            this.dataSource = await formatObj(newData, { label: 'categoryName', value: 'categoryId' });
        },
        onChange(val) {
            const data = this.treeObj.data.find((i) => i.categoryId === val);
            delete data.children;
            this.selectedObj = data;
            this.selectedKeys = [val];
            this.searchValue = val;
            this.$emit('change', data);
        },
        onSelect(selectedKeys, { node }) {
            if (selectedKeys.length !== 0) {
                this.selectedKeys = selectedKeys;
                const cueData = node.$props.dataRef;
                this.selectedObj = cueData;
                this.searchValue = undefined;
                this.$emit('change', { categoryId: cueData.categoryId });
            }
        },
        onExpand(expandedKeys) {
            this.expandedKeys = expandedKeys;
        },
        async view(data = {}, type = 0) {
            this.$refs['TreeDrawer']?.open();
            this.$nextTick(() => {
                this.$refs['TreeDrawer'].setData({ ...data }, type);
            });
        },
        add() {
            const { categoryId } = this.selectedObj;
            this.view({ parentCategoryId: categoryId }, 0);
        },
        edit() {
            const data = this.selectedObj;
            delete data.children;
            this.view(data, 1);
        },
        async del() {
            const categoryId = this.selectedObj?.categoryId;
            if (!categoryId) return;
            try {
                await Api.delOceanusTree({ categoryId });
                this.$message.success('删除成功!');
                this.init();
            } catch (e) {
                this.$message.warning('删除失败!');
            }
        },
    },
};
</script>
<style scoped>
</style>
