<template>
    <div class="folder">
        <div class="input">
            <van-search v-model="value" placeholder="请输入搜索关键词" />
        </div>
        <div class="main">
            <!-- 文件夹列表 -->
            <div v-for="(item,i) in list" class="each_folder van-hairline--bottom" @click="clickFolder(item)">
                <div>
                    <span class="icon-107 icon107"></span>
                    <span class="folder_name">{{item.name}}</span>
                </div>
                <div class="updatetime">{{item.updatetime.substr(0,10)}}</div>
            </div>
            <!-- 文章列表 -->
            <div v-for="(item,i) in article_list" class="each_folder van-hairline--bottom" @click="clickArticle(item)">
                <div style="display:flex;justify-content:space-between;">
                    <span class="folder_name" style="margin:0;">{{item.title}}</span>
                    <span style="font-size:12px;color:#3396fb;">{{item.type==1?'富文本':'Markdown'}}</span>
                </div>
                <div class="updatetime">{{item.updatetime.substr(0,10)}}</div>
            </div>
            <van-loading v-show="show_loading" size="26" vertical color="#3396fb"/>
        </div>
    </div>
</template>

<script>
    import api from '../api/methods';
    export default {
        name: "folder_component",
        props:['path'],
        data(){
            return{
                value:'',
                list:[],  //文件夹列表
                article_list:[],  //文件列表
                parentid:'',  //父级id
                show_loading:false,
                page:1,
            }
        },
        created(){
            let id = this.$route.query.folderid?this.$route.query.folderid:'';
            this.folderList(id);
            if(id) this.articleList(id);
        },
        methods:{
            //获取文件夹列表
            folderList(id=''){
                this.show_loading = true;
                api.folderList({parentid:id}).then((data)=>{
                    if(data.err_code == 0){
                        this.list = data.data;
                    }
                    this.show_loading = false;
                })
            },
            //获取文件列表
            articleList(id=''){
                this.show_loading = true;
                let params = {
                    folderid:id,  //所属文件夹
                    pagenum:20,
                    current:this.page,
                };
                api.articleList(params).then((data)=>{
                    if(data.err_code == 0){
                        console.log(data,99)
                        this.article_list = data.data;
                    }
                    this.show_loading = false;
                })
            },
            //点击文件夹
            clickFolder(item){
                this.$router.push({path:this.path,query:{folderid:item.folderid}});
            },
            //点击文章
            clickArticle(item){
                if(item.type == 1) this.$router.push({path:'wangeditor',query:{docid:item.docid}});  //富文本
                else this.$router.push({path:'markdown',query:{docid:item.docid}});  //Markdown
            }
        }
    }
</script>

<style scoped lang="less">
    @basefont:50;
    .folder{
        height:100%;
        padding:0 30rem /@basefont;
        .input{
            height:100rem /@basefont;
            .van-search{
                padding:10px 0;
            }
        }
        .main{
            height:calc(100% - (110rem /@basefont));
            overflow:auto;
            padding:10rem /@basefont 0;
            .each_folder{
                font-size:32rem /@basefont;
                padding:25rem /@basefont 0;
                .folder_name{
                    font-weight:bolder;
                    color:#333333;
                    margin-left:20rem /@basefont;
                }
                .updatetime{
                    font-size:24rem /@basefont;
                    color:#cccccc;
                    margin-top:20rem /@basefont;
                }
            }
        }
    }
    .icon107{
        color:#F0E290;
    }
</style>