<template>
    <div>
        <group :title="listTitle === ''?'':`${listTitle}（${list.length}）`" class="cellgroup-ctn">
            <cell v-for="(item, index) of list" :key="index" :title="item.folder_name" @click.native="folderClick(item)">
                <i slot="icon" class="iconfont">&#xe166;</i>
                <div slot="after-title" class="descript">
                    我上传了{{ item.file_count }}个文档
                </div>
            </cell>
        </group>
    </div>
</template>

<script>
import { Group, Cell } from 'vux'
export default {
    name: 'FolderList',
    props: {
        listTitle: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    components: {
        Group,
        Cell
    },
    data () {
        return {
        }
    },
    methods: {
        folderClick (item) {
            this.$emit('folderClick', item)
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .cellgroup-ctn {

    .weui-cells__title {
        margin-bottom: 10px;
        font-size: 15px;
    }
    .weui-cells{
        margin-top: 0;
        padding-left: 20px;
        &:before, &:after{
            border: none;
        }
        .weui-cell {
            align-items: flex-start;
            padding-top: 15px;
            padding-bottom: 12px;
            padding-left: 0;
            &:before {
                border-top: none;
            }
            border-bottom: 0.02rem solid #F2F2F2;
            .iconfont {
                display:block;
                margin-right: 10px;
                margin-top: -5px;
                font-size: 30px;
            }
            .vux-cell-bd {
                .vux-label {
                    font-size: 16px;
                    font-weight: bold;
                }
                .descript {
                    font-size: 14px;
                    color: rgb(128, 128, 128);
                    margin-top: 6px;
                }
            }
        }
    }

}
</style>
