<template>
    <div class="features-component" :style="{height: viewHeight + 'px'}">
        <div class="module-method">
            <div class="module-lf">模块</div>
            <div class="method-rg clear-float">方法</div>
        </div>
        <div class="modules-main">
            <div class="features-component-main" id="features-component-main" v-for="item in checkedList">
                <div class="main-lf">
                    <span>{{item.name}}</span>
                    <el-checkbox disabled v-model="item.checked"></el-checkbox>
                </div>
                <div class="main-rg clear-float">
                    <div class="main-rg-item" v-for="data in item.children">
                        <el-checkbox disabled v-model="data.checked"></el-checkbox>
                        <span>{{data.name}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                checkedList: [],
                viewHeight: 0,
                isIndeterminate: true
            }
        },
        methods: {
            getResourceList () {
                let query = {
                    userId: this.userId
                };
                this.$store.dispatch('UserView/getResourceList', query).then((resData) => {
                    this.checkedList = _.cloneDeep(resData);
                }).catch((response) => {
                    this.$message.error(response.message);
                });
            }
        },
        props: {
            userId: {
                required: true
            }
        },
        watch: {
            userId (val) {
                this.getResourceList();
            }
        },
        mounted () {
            setTimeout(() => {
                this.viewHeight = `${document.querySelector('.view-list-page').offsetHeight - 282}`;
            }, 0);
        }
    }
</script>

<style lang="scss" scoped>

    $border: 1px solid #d2d3d5;

   .features-component {
       width: 100%;
       position: relative;
       border: $border;
       background-color: #fff;

       .module-method {
           height: 38px;
           line-height: 38px;
           position: relative;
           border-bottom: $border;

           .module-lf {
               position: absolute;
               width: 200px;
               height: 100%;
               text-align: center;
               font-size: 14px;
               border-right: $border;
           }

           .method-rg {
               text-align: center;
               margin-left: 200px;
               font-size: 14px;
               height: 100%;
           }
       }

       .modules-main {
           overflow: auto;
           width: 100%;
           height: 90%;

           .features-component-main {
               position: relative;
               border-bottom: $border;
               border-right: $border;
               min-height: 38px;

               .main-lf {
                   position: absolute;
                   width: 200px;
                   height: 100%;
                   display: flex;
                   padding: 4px 0;
                   display: -webkit-flex;
                   align-items:center;
                   justify-content: flex-end;
                   font-size: 14px;
                   border-right: $border;

                   .el-checkbox {
                       margin: 0 15px 0 11px;
                   }
               }

               .main-rg {
                   margin-left: 200px;
                   font-size: 14px;
                   height: 100%;
                   padding: 4px 0;
                   align-items:center;

                   .main-rg-item {
                       width: 20%;
                       float: left;
                       min-height: 30px;
                       line-height: 30px;

                       .el-checkbox {
                           margin: 0 10px 0 15px;
                       }
                   }
               }
           }
       }
   }
</style>
