<template>
    <div class="markdown">
        <van-field v-model="title" input-align="center" class="doc_name"/>
        <!--<van-field v-model="content" input-align="center" class="doc_name"-->
                   <!--@input="convertText"/>-->
        <div v-html="html" class="main"></div>
        <div class="bottom">
            <van-button plain type="info" color="#cccccc" @click="cancel">取消</van-button>
            <van-button type="info" @click="sure">确定</van-button>
        </div>
    </div>
</template>

<script>
    import api from '../api/methods';
    import showdown from 'showdown';
    export default {
        name: "markdown",
        data(){
            return {
                title:'',
                content:'',  //内容
                converter:null,  //转化器
                html:'',  //格式化后内容
                mdjs:null,
            }
        },
        created(){
            this.docid = this.$route.query.docid;
            this.articleDetail(this.docid);
        },
        mounted() {
            //创建实例
            this.converter = new showdown.Converter({tables: true});
        },
        methods: {
            //获取文件详情
            articleDetail(docid){
                api.articleDetail({docid:docid}).then((data)=>{
                    console.log(data,999)
                    if(data.err_code == 0){
                        this.content = data.data.doc;
                        this.title = data.data.title;
                        this.convertText();
                    }
                })
            },
            //格式转化
            convertText() {
                this.html = this.converter.makeHtml(this.content);
            },
            cancel(){},
            sure(){},
        },
    }
</script>

<style scoped lang="less">
    @basefont:50;
    .markdown{
        height:100vh;
        width:100%;
        .doc_name{
            height:80rem /@basefont;
            color:#333333;
            font-size:36rem /@basefont;
        }
        .main{
            height:calc(100% - (200rem /@basefont));
            width:100%;
            word-break:break-word;
            overflow-y:auto;
            overflow-x:hidden;
            padding:20rem /@basefont;
            font-size:28rem /@basefont;
            box-sizing:border-box;
        }
        .bottom{
            height:120rem /@basefont;
            width:100%;
            position:fixed;
            bottom:0;
            background-color:white;
            display:flex;
            z-index:11;
            align-items:center;
            justify-content:space-around;
            padding:20rem /@basefont 0;
            box-sizing:border-box;
            box-shadow:0 -2px 5px #eeeeee;
            .van-button{
                width:40%;
            }
        }
    }
</style>