<template>
    <div class="features-component" :style="{height: viewHeight + 'px'}">
        <div class="module-method ml-15 mr-15">
            <div class="module-lf">模块</div>
            <div class="method-rg clear-float">方法</div>
        </div>
        <div class="modules-main ml-15 mr-15">
            <div class="features-component-main" v-for="(item, itemIndex) in checkedList">
                <div class="main-lf">
                    <span>{{item.name}}</span>
                    <el-checkbox v-model="item.checked" @change="onModuleCheckedChange(item, itemIndex)"></el-checkbox>
                </div>
                <div class="main-rg clear-float">
                    <div class="main-rg-item" v-for="(data, index) in item.children">
                        <el-checkbox v-model="data.checked" @change="checkedChange(itemIndex, index)"></el-checkbox>
                        <span>{{data.name}}</span>
                    </div>
                </div>
            </div>
            <div class="submit">
                <el-button v-if="Authority.checkedAuthority('/system/role/addFunctionAuthority')" size="mini" type="primary" @click="submitClick">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                checkedList: [],
                idList: []
            }
        },
        methods: {
            // 获取功能权限列表数据
            getResourceList () {
                let query = {
                    roleId: this.roleTreeNodeClickValue.id
                };
                this.$store.dispatch('Role/getRoleFeatures', query).then((resData) => {
                    this.checkedList = _.cloneDeep(resData);
                })
            },
            // 触发模块选框改变事件
            onModuleCheckedChange (item, itemIndex) {
                if (!item.checked) {
                    this.checkedList.forEach((item, index) => {
                        if (index === itemIndex) {
                            if (this.checkedList[index].children !== undefined) {
                                this.checkedList[index].children.map(funItem => {
                                    funItem.checked = item.checked
                                })
                            }
                            // if (item.children.findIndex(target => target.checked === true) !== -1) {
                            //     this.$message.warning('当前模块拥有方法权限，不可取消模块权限！')
                            //     this.checkedList[index].checked = true
                            // }
                        }
                    })
                } else {
                    if (item.children !== null && item.children !== undefined) {
                        item.children.map(childrenItem => {
                            childrenItem.checked = true
                        })
                    }
                }
            },
            // 按钮选中事件
            checkedChange (itemIndex, rowIndex) {
                this.checkedList.forEach((item, index) => {
                    if (index === itemIndex) {
                        if (item.children.findIndex(target => target.checked === true) === -1) {
                            this.checkedList[index].checked = false;
                        } else {
                            this.checkedList[index].checked = true;
                        }
                    }
                });
            },
            // 提交事件
            submitClick () {
                if (this.checkedList.findIndex(target => target.checked === true) === -1) {
                    this.$message({
                        message: '请选择功能权限',
                        type: 'warning'
                    });
                } else {
                    let query = {
                        roleId: this.roleTreeNodeClickValue.id,
                        resourceId: this.checkedList
                    };
                    this.$store.dispatch('Role/submitFeatures', query).then((resData) => {
                        this.$message({
                            type: 'success',
                            message: '提交成功！'
                        });
                        // 刷新页面
                        this.getResourceList();
                    })
                }
            }
        },
        props: {
            viewHeight: {
                type: Number,
                required: true
            },
            roleTreeNodeClickValue: {
                type: Object,
                required: true
            }
        },
        watch: {
            roleTreeNodeClickValue (val) {
                this.getResourceList();
            }
        },
        mounted () {
        }
    }
</script>

<style lang="scss" scoped>
    @import '@/styles/System/Role/featuresAuthority.scss';
</style>
