<template>
    <div class="ces-tree-list">
        <h2 class="ces-title">文章</h2>
        <el-tree
                :data="ArticleData"
                accordion
                highlight-current
                default-expand-all
                ref="tree"
                node-key="id"
                highlight-current
                :current-node-key="currentId"
                @node-click="basisListFn"
                empty-text="暂无数据"
                :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-circle-plus-outline" @click="() => append(data)"></i>

                        <i class="el-icon-view" 
                            @click="() => listHideFn(data)" 
                            :class="{ 'label-disabled': data.status === 2 && !data.hidden }"></i>

                        <i class="el-icon-delete" @click="() => remove(node, data)"></i>
                    </span>
                    <span :class="{ 'label-disabled': data.status === 2 }">{{ node.label }}</span>
                </el-tooltip>
            </span>
        </el-tree>
        <DialogTypeList :createForm="createForm"></DialogTypeList> 
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import axios from '../../../common/axios';
export default {
    name: "index",
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'abstract'
            },
            createForm: {
                createDialogType: false,
                type: 1,
                category: 1,
                parent_id: '',
                keywords: '',
                description: '',
                title: '',
                abstract: ''
            },
            currentId: this.$route.query.id
           
        };
    },
    methods: {
        append(data) {
            this.createForm.parent_id = data.id;
            this.createForm.createDialogType = true;
        },
        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: '已取消删除'
                });
            });
        },
        listHideFn(data) {
            let status = data.status === 2 ? 1 : 2;
            if (data.status === 2 && !data.hidden) {
                return false;
            }
            axios({
                method: 'post',
                url: '//api-ces-test.oasgames.com/api/item/hide-category',
                params: {
                    id: data.id,
                    parent_id: data.parentId,
                    status: status
                }
            }).then((response) => {
                window.location.reload();
            }).catch((error) => {
                console.log(error);
            });
        },
        basisListFn(data) {
            let routePath = '';
            if (this.$route.path !== '/article/BasicInformation' || this.$route.path !== '/article/ArticleList') {
                routePath = '/article/ArticleList';
                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('article', {
            detailRuleForm: 'articleTypeDetailChange',
            addArticleData: 'isArticleDataChange',
        }),
        ...mapMutations('utils', {
            isActiveChange: 'isActiveChange',
        })
    },
    computed: {
        ...mapGetters('article', { // 用mapGetters来获取article.js里面的getters
            ArticleData: 'isArticleData',
        })
    },
    updated () {
        this.$nextTick(function () {
            if (this.$route.query.id) {
                this.ArticleData.map((key, index) => {
                    if (key.id === this.$route.query.id) {
                        this.detailRuleForm(key);
                    }
                });
            }
        });
    },
    mounted() {
    }
};
</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>
