<template>
    <div>
        <i-page-header class="product_tabs" title="角色配置"></i-page-header>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <el-form ref="form" label-width="120px" label-position="left">
                <div v-for="(item,index) in data">
                    <el-card class="box-card" style=" margin-bottom: 10px;">
                        <div slot="header" class="clearfix">
                            <span>{{ item.title }}</span>
                            <el-button @click="tapSelect(index)" style="float: right; padding: 3px 0" type="text"> {{
                                checkAr[index] ? '取消' : '全选' }}
                            </el-button>
                        </div>
                        <div style=" margin-left: 20px;">
                            <div v-for="(item2,index2) in item.children">
                                <el-form-item :label="item2.title">
                                    <div class="fx-r">
                                        <div class="mr20" v-for="(item3,index3) in item2.children">
                                            <el-checkbox size="small" border v-model="checkData['check_' + item3.id]"
                                                         :label="item3.title"></el-checkbox>
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-form>
            <div class="role-foot fx-r fx-bc fx-ac">
                <el-button type="primary" @click="submit">立即设置</el-button>
            </div>


        </Card>
    </div>
</template>


<script>
    import IPageHeader from "../../../../layouts/system/page-header/index";
    import {SystemRoleStingList, SystemRoleStingSave} from "../../../../api/system/role";
    import PageCache from "../../../../utils/PageCache";

    var pageCache = null;
    export default {
        name: "seting",
        components: {IPageHeader},
        computed: {},
        data() {
            return {
                loading: false,
                data: [],
                checkData: {},
                id: 0,
                checkAr: []
            }
        },

        created() {
            //this.initView();
            pageCache = new PageCache(this);
        },

        mounted() {
            this.initView();
        },
        watch: {
            '$route'(to, from) {
                pageCache.routeView(to, (type, data) => {
                    if (type == 'update') {
                        this.initView();
                    }

                    if (type == 'cache') {
                        this.$forceUpdate();
                        Object.assign(this.$data, data);
                    }
                });
            }
        },

        methods: {
            initView: function () {
                this.id = this.$route.query.id || 0;
                SystemRoleStingList({id: this.id})
                    .then(res => {
                        this.loading = false;
                        if (res.code == 200) {
							console.log(res.data.data,'res.data.data');
                            this.data = res.data.data;
                            this.getCheckData(res.data.seting);
                            for (var i in this.data) {
                                this.checkAr[i] = false;
                            }
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        this.loading = false;
                        this.$utils.loadingClose();
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            /**
             * 提交数据
             */
            submit: function () {
                this.$utils.loading(this, "加载中...");
                SystemRoleStingSave({id: this.id, data: this.checkData})
                    .then(res => {
                        if (res.code == 200) {
                            this.$utils.loadingClose();
                            this.$message({
                                message: '恭喜你，修改成功',
                                type: 'success'
                            });
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err => {
                        this.$utils.loadingClose();
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            /**
             * 全选数据
             * @param index
             */
            tapSelect: function (index) {
                var bool = !this.checkAr[index];
                for (var i in this.data[index].children) {
                    for (var iv in this.data[index].children[i].children) {
                        var d = this.data[index].children[i].children[iv];
                        this.$set(this.checkData, 'check_' + d.id, bool);
                    }
                }
                this.checkAr[index] = bool;
            },


            getCheckData: function (seting) {
                var ck = {};
                for (var i in this.data) {
                    var data = this.data[i];
                    for (var j in data.children) {
                        var udata = data.children[j];
                        for (var m in udata.children) {
                            var id = udata.children[m].id;
                            ck['check_' + id] = this.findData(id, seting);
                        }
                    }
                }
                this.checkData = ck;
            },
            findData: function (id, seting) {
                for (var i in seting) {
                    if (i.replace("check_", "") == id) {
                        return true;
                    }
                }
                return false;
            }


        }
    }
</script>
<style scoped>
    .role-info {
        padding: 20px 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .role-foot {
        margin: 20px 0;
    }
</style>
