<template>
    <pre>
        <code class="typescript" v-html="code"></code>
    </pre>
</template>

<script>
    import axios from "axios"
    export default {
        name: "GitCode",
        props:{
            project: {
                type: String,
                default: '/web/persagy-web'
            },
            raw: {
                type: String,
                default: '/raw/master'
            },
            fileUrl: {
                type: String,
                default: '/persagy-web-big/src/items/SIconTextItem.ts '
            },
            type: {
                type: String,
                default: 'js'
            }
        },
        data(){
            return{
                baseUrl: '/git',
                username: 'lbsl',
                password: '20200829',
                code:''
            }
        },
        created() {
            this.init()
        },
        computed:{
          requestUrl(){
              return this.baseUrl + this.project + this.raw + this.fileUrl;
          }
        },
        methods: {
            init(){
                axios({
                    method: "get",
                    url: this.requestUrl,
                    headers: {
                        'Authorization': "Basic " + btoa(this.username + ":" + this.password)
                    }
                }).then(res => {
                    import("prismjs/prism").then(Prism => {
                        this.Prism = Prism;
                        console.log(this.Prism.languages);
                        this.code = this.Prism.highlight(
                            res.data,//想要高亮的内容
                            this.Prism.languages[this.type],
                            this.type
                        );
                    });
                })
            }
        }
    }
</script>

<style scoped>

</style>
