<template>
    <div class="ces-tree-list">
        <h2 class="ces-title">轮播图</h2>
        <el-tree
                :data="mapData"
                accordion
                highlight-current
                default-expand-all
                ref="tree"
                node-key="id"
                @node-click="basisListFn"
                empty-text="暂无数据"
                highlight-current
                :current-node-key="currentId"
                :props="defaultProps">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <el-tooltip class="item" effect="light" placement="bottom-start" style=" border-color: #fff;">
                    <span slot="content">
                        <i class="el-icon-delete" @click="() => remove(node, data)"></i>
                    </span>
                    <span :class="{ 'label-disabled': node.status === 2 && !node.hidden }">{{ node.label }}</span>
                </el-tooltip>
            </span>
        </el-tree>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import axios from '../../../common/axios';
export default {
    name: "index",
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'abstract'
            },
            currentId: this.$route.query.id
        };
    },
    methods: {
        remove(node, data) {
            this.$confirm('您确定删除该类型吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    method: 'post',
                    url: '//api-ces-test.oasgames.com/api/item/delete',
                    params: {
                        id: data.id,
                        parent_id: data.parentId,
                        category: 1
                    }
                }).then((response) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                    this.$router.push({
                        path: '/'
                    });
                }).catch((error) => {
                    console.log(error);
                    this.$message({
                        type: 'error',
                        message: '该类型下有内容，删除失败。'
                    });
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        basisListFn(data) {
            let routePath = '';
            if (this.$route.path !== '/map/BasicInformation' || this.$route.path !== '/map/mapList') {
                routePath = '/map/mapList';
                this.isActiveChange(false);
            }
            else {
                this.isActiveChange(true);
            }
            this.detailRuleForm(data);
            this.$router.push({
                path: routePath,
                query: {
                    id: data.id,
                    parent_id: data.parentId,
                    breadcrumb: data.breadcrumb
                }
            });
        },
        ...mapMutations('map', {
            detailRuleForm: 'mapTypeDetailChange',
            addmapData: 'isMapDataChange',
        }),
        ...mapMutations('utils', {
            isActiveChange: 'isActiveChange',
        })
    },
    computed: {
        ...mapGetters('map', {
            mapData: 'isMapData',
        })
    },
    updated () {
        this.$nextTick(function () {
            if (this.$route.query.id) {
                this.mapData.map((key, index) => {
                    if (key.id === this.$route.query.id) {
                        this.detailRuleForm(key);
                    }
                });
            }
        });
    }
};
</script>

<style scoped>
    .custom-tree-node{
        font-size: 14px;
    }

    .el-icon-circle-plus-outline, .el-icon-edit-outline, .el-icon-view, .el-icon-delete{
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }
    .el-icon-circle-plus-outline,.el-icon-edit-outline, .el-icon-view{
        color: #409EFF;
    }
    .el-icon-delete{
        color: red;
    }
    .label-disabled{
        color: #999;
    }
</style>
