<template>
    <div class="side_view">
        <p class="side_icon mab20">
            <i class="icon-jiahao mar20" @click="addMajor"></i>
            <!-- <i class="icon-delete"></i> -->
        </p>
        <div class="side_tree" v-for="(item,index) in data" :key="index">
            <div class="item" @click.stop="open(item,1)">
                    <!-- <i :class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" class="icon-shixiangyoujiantou-"></i> -->
                <img
                    v-if="item.children&&item.children.length!=0"
                    :class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}"
                    src="../../assets/img/icon-xiangyou.png"
                    alt
                />
                <i v-else class="empty"></i>
                <i :class="item.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="fircheckitem(item)"></i>
                <span>{{item.label}}</span>
                <svg t="1604370117041" class="icon edit ft" @click.stop="editMajor(item)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" width="16" height="16"><path d="M511.979 30.125c-266.13 0-481.871 215.741-481.871 481.871s215.741 481.871 481.871 481.871S993.85 778.126 993.85 511.996 778.109 30.125 511.979 30.125zM459.644 693.015c-15.876 18.135-22.818 22.486-44.972 30.657-34.111 12.787-96.687 36.27-137.374 51.515-7.706 3.056-36.735 1.495-24.578-27.036 13.784-39.757 34.045-98.414 45.636-131.894 8.436-23.615 11.758-29.76 28.73-45.603l175.271-175.271 124.055 124.088C626.413 519.471 508.469 642.264 459.644 693.015zM653.084 492.867 528.996 368.779l26.605-26.605 124.088 124.121L653.084 492.867zM759.469 386.482l-53.176 53.209L582.205 315.569l53.209-53.176c19.596-19.596 51.316-19.596 70.912 0l53.209 53.176C779.065 335.166 779.065 366.919 759.469 386.482z" p-id="9030" fill="#9076ff"></path></svg>
                <i class="el-icon-circle-plus ft" @click.stop="addDepartment(item)"></i>
                <i class="icon-delete ft" @click.stop="delMajor(item,index)"></i>
            </div>

            <div v-show="item.ifVisible" v-if="item.children&&item.children.length!=0">
                <div v-for="(item1,index1) in item.children" :key="index1">
                    <div class="item2" @click.stop="open(item1,2)">
                        <i :class="item1.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="twocheckitem(item1)"></i>
                        <span>{{item1.label}}</span>
                        <svg t="1604370117041" class="icon edit ft" @click.stop="editDepartment(item1)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" width="16" height="16"><path d="M511.979 30.125c-266.13 0-481.871 215.741-481.871 481.871s215.741 481.871 481.871 481.871S993.85 778.126 993.85 511.996 778.109 30.125 511.979 30.125zM459.644 693.015c-15.876 18.135-22.818 22.486-44.972 30.657-34.111 12.787-96.687 36.27-137.374 51.515-7.706 3.056-36.735 1.495-24.578-27.036 13.784-39.757 34.045-98.414 45.636-131.894 8.436-23.615 11.758-29.76 28.73-45.603l175.271-175.271 124.055 124.088C626.413 519.471 508.469 642.264 459.644 693.015zM653.084 492.867 528.996 368.779l26.605-26.605 124.088 124.121L653.084 492.867zM759.469 386.482l-53.176 53.209L582.205 315.569l53.209-53.176c19.596-19.596 51.316-19.596 70.912 0l53.209 53.176C779.065 335.166 779.065 366.919 759.469 386.482z" p-id="9030" fill="#9076ff"></path></svg>
                        <i class="icon-delete ft" @click.stop="delDepartment(item1,index1)"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
Array.prototype.removeByValue = function (val) {
    for (var i = 0; i < this.length; i++) {
        if (JSON.stringify(this[i]).indexOf(JSON.stringify(val)) != -1) {
            this.splice(i, 1);
            break;
        }
    }
};
export default {
    data() {
        return {
            chooseList: []
        };
    },
    watch: {
        chooseList(n, o) {
            this.$emit('chooseNode', n);
        }
    },

    props: {
        data: {
            type: Array
        }
    },
    methods: {
        //点击节点时伸展或收缩列表
        open(item,type) {
            item.ifVisible = !item.ifVisible;
            type == 1 ? this.$emit('fircheckitem',item) : this.$emit('twocheckitem',item)
        },

        //选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，removeByvalue函数定义在main.js中
        choose(item) {
            item.ifVisible = !item.ifVisible;
            if (item.ifVisible) {
                this.chooseList.push(item);
            } else {
                this.chooseList.removeByValue(item);
            }
        },
        fircheckitem(item){
            this.$emit('fircheckitem',item);
        },
        twocheckitem(item){
            this.$emit('twocheckitem',item);
        },
        // 专业
        addMajor(){
             this.$emit('addMajor');
        },
        editMajor(item){
            this.$emit('editMajor',item);
        },
        delMajor(item,index){
            this.$emit('delMajor',item,index);
        },
        // 年级
        addDepartment(item){
            this.$emit('addDepartment',item);
        },
        editDepartment(item){
            this.$emit('editDepartment',item);
        },
        delDepart(item,index){
            this.$emit('delDepart',item,index);
        },
        // 班级
        addClass(item){
            this.$emit('addClass',item);
        },
        editDepartment(item){
            this.$emit('editDepartment',item);
        },
        delDepartment(item,index){
            this.$emit('delDepartment',item,index);
        },
        //判断数组中是否包含某个对象
        isHasObj(arr, val) {
            var flag = 0; //1为有 0为没有
            for (var i = 0; i < arr.length; i++) {
                if (JSON.stringify(arr[i]).indexOf(JSON.stringify(val)) != -1) {
                    flag = 1;
                }
            }
            if (flag == 1) {
                return true;
            } else {
                return false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
$insideColor: rgba(245, 242, 255, 0.8); //内部节点的边框颜色
$outColor: rgba(255, 255, 255, 0.8); //外部节点的边框颜色

//混合代码,提取item共同样式
@mixin public {
    cursor: pointer;  
    font-size: 18px;
    color: #333333;
    display: flex;
    align-items: center;
        img {
            height: 20px;
            width: 20px;
            margin-left: 10px;
        }
}

.main {
    width: 100%;
}

.item {
    @include public;
    width: 100%;
    padding: 15px 0;
    background:rgba(255,255,255,1);
    box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19);
    border-radius:10px;
    text-align: left;
    margin-top: 20px;
}
.item:first{
    margin-top: 0;
}
.item .empty{
    width: 20px;
}
.edit{
    width: 16px !important;
    height: 16px !important;
    margin-left: 10px;
}
.item2 {
    @include public;
    margin-top: 20px;
    margin-left:60px
}
.item2:hover{
    color: #9278FF;
}

//清除ul,li的默认样式
ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

// 使三角形旋转动画
.arrowTransform {
    transition: 0.4s;
    transform-origin: center;
    transform: rotateZ(0deg);
}
.arrowTransformReturn {
    transition: 0.4s;
    transform-origin: center;
    transform: rotateZ(90deg);
}

//复选框样式
.checkBox {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    margin-left: 10px;
    margin-right: 10px;
    border: 2px solid rgba(146, 120, 255, 1);
}

//当点击复选框时候切换背景图片
.isActive {
    background: url('../../assets/img/icon-yigouxuan.png');
    background-size: 14px 14px; /*按比例缩放*/
}

.side_view{
    // height: 800px;
    padding: 40px 20px;
    background-color: #fff;
    box-shadow:-2px 0px 57px 0px rgba(192,189,216,0.39);
    i {
        color: #9278FF;
    }
}
.side_icon{
    text-align: right;
}
.side_icon i{
    cursor:pointer;
    font-size: 20px;
}
.side_tree{
    width: 100%;
    font-size: 14px;
    color: #333;
    i{
        margin-left: 10px;
    }
    span{
        margin-left: 5px;
        font-size: 14px;
    }
}
</style>