<template>
    <div class="authority">
        <p class="dialog-header">
            <span>角色权限</span>
        </p>
        <div>
            <p class="add">
                <span class="addVal">
                    <span>角色名称：</span>
                    <el-input v-model="nameVal" size="medium" :disabled="true"></el-input>
                </span>
            </p>
            <p class="add">
                <span>角色权限：</span>
                <span style="margin-left: 150px;">
                    <span class="selected" @click="selected('y')"><img src="./img/selectedH.png">全选</span>
                    <span class="selectedN" @click="selected('n')"><img src="./img/selectedNH.png">全不选</span>
                </span>
            </p>
            <p class="authorityList">
                <span v-for="(item,index) of authority" @click="clickList(index,item)"><img src="./img/clickN.png">{{item.name}}</span>
            </p>
        </div>
        <p class="line"></p>
        <p class="buttonClick">
            <span class="buttonCancl" @click="cancel">取消</span>
            <span class="buttonSave" @click="save">保存</span>
        </p>
    </div>
</template>

<script>
import $ from 'jquery';
export default {
    props: ['name','list'],
    data () {
        return {
            authority: [],
            allAuthority: [],
            nameVal: ''
        }
    },
    created() {
    },
    mounted(){
        this.$server.getfindAll().then((res) => { // 数据请求
            if (res.data.code === 200) {
                this.authority = res.data.data;
                this.init();
            }
        })
    },
    methods: {
        // 初始请求
        init() {
            if (this.list !== '') {
                this.nameVal = this.list.name;
                this.allAuthority = [];
                for (let item of this.list.authorities) {
                    this.allAuthority.push(item.id);
                }
                setTimeout(()=>{
                    for (let item of this.allAuthority) {
                        let val = '.authorityList>span:nth(' + (item - 1) + ')';
                        $(val).addClass('authorityListClick')
                    }
                },300)

            } else {
                this.nameVal = this.name;
            }
        },
        // 关闭弹框
        cancel() {
            this.$emit('on-cancel')
        },
        // 保存
        save() {
            console.log(this.nameVal,this.allAuthority);
            if (this.list === '') {
                let val = {
                    'authorityList': this.allAuthority,
                    'name': this.nameVal,
                }
                this.$server.postadd(val).then((res) => { // 数据请求
                    if (res.data.code === 200) {
                        this.$message.success('角色新增成功！');
                        this.cancel();
                    }
                })
            } else {
                let val = {
                    'authorityList': this.allAuthority,
                    'id': this.list.id,
                }
                this.$server.postupdate(val).then((res) => { // 数据请求
                    if (res.data.code === 200) {
                        this.$message.success('角色修改成功！');
                        this.cancel();
                    }
                })
            }

        },
        // 点击全选/全不选
        selected(val) {
            if (val === 'y') {
                $('.selected').addClass('selectedClick');
                $('.selectedN').removeClass('selectedNClick')
                $('.authorityList>span').addClass('authorityListClick');
                this.allAuthority = [];
                for (let item of this.authority) {
                    this.allAuthority.push(item.id)
                }
            } else {
                $('.selected').removeClass('selectedClick');
                $('.selectedN').addClass('selectedNClick')
                this.allAuthority = [];
                $('.authorityList>span').removeClass('authorityListClick')
            }
            console.log(this.allAuthority)
        },
        // 点击选择
        clickList(index,row) {
            $('.selectedN').removeClass('selectedNClick')
            let val = '.authorityList>span:nth(' + (index) + ')'
            if ($(val).hasClass('authorityListClick') === true) {
                $(val).removeClass('authorityListClick')
                this.allAuthority.splice(this.allAuthority.indexOf(row.id), 1)
            } else {
                $(val).addClass('authorityListClick')
                this.allAuthority.push(row.id)
            }
            console.log(this.allAuthority)
        }
    },
    components: {
    },
    watch: {
    }
}
</script>
<style scoped>
    .authority .add{
        display: inline-block;
        margin-left: 235px;
        margin-top: 40px;
    }
    .authority .add:nth-child(2){
        margin-top: 30px;
    }
    .authority .addVal{
        width: 280px;
        display: flex;
        font-size: 18px;
        color: #666;
        text-align: center;
    }
    .authority .addVal>span{
        width: 140px;
        display: inline-block;
        line-height: 34px;
    }
    .authority .addVal>>>.el-input__inner{
        border: 1px solid rgba(8,104,157,.3);
        border-radius: 2px;
        font-size: 18px;
        color: #333;
        height: 34px;
        line-height: 34px;
        width: 180px;
    }
    .authority .line{
        margin: 35px 30px 0 30px;
        height: 1px;
        background: rgba(72,119,230,0.2);
    }
    .authority .buttonClick{
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
    }
    .authority .selected, .authority .selectedN{
        color: #b6c9f5;
        cursor: pointer;
    }
    .authority .selectedN{
        margin-left: 30px;
    }
    .authority .selected:hover,.authority .selectedN:hover{
        color: #4877e6;
    }
    .authority .selected:hover>img{
        content: url("./img/selected.png");
    }
    .authority .selectedN:hover>img{
        content: url("./img/selectedN.png");
    }
    .authority .selectedClick, .authority .selectedNClick{
        color: #4877e6;
    }
    .authority .selectedClick>img{
        content: url("./img/selected.png");
    }
    .authority .selectedNClick>img{
        content: url("./img/selectedN.png");
    }
    .authority .authorityList{
        width: 280px;
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0 0 305px;
    }
    .authority .authorityList>span{
        margin-left: 25px;
        margin-top: 10px;
        display: inline-block;
        width: 100px;
        cursor: pointer;
    }
    .authority .authorityList>span>img{
        margin-right: 5px;
    }
    .authority .authorityListClick>img{
        content: url("./img/click.png");
    }
</style>
