<template>
    <details class="custom-block details custom-code">
        <summary>查看源代码：{{ fileUrl }}</summary>
        <div style="max-height: 800px;overflow: auto">
        <pre class="line-numbers">
    <code class="language-typescript" v-html="code"></code>
        </pre>
        </div>
    </details>
</template>

<script lang="ts">
    import axios from "axios"
    import { Component, Prop, Vue } from "vue-property-decorator";
    @Component
    export default class GitCode extends Vue {
        @Prop({
            type: String,
            required: false,
            default: '/web/persagy-web'
        }) project !: string;
        @Prop({
            type: String,
            required: false,
            default: '/raw/master'
        }) raw !: string;
        @Prop({
            type: String,
            required: false,
            default: '/persagy-web-big/src/items/SIconTextItem.ts'
        }) fileUrl !: string;
        @Prop({
            type: String,
            required: false,
            default: 'typescript'
        }) type !: string;
        baseUrl: string = '/gogs';
        code: string = '';
        created() {
            this.init()
        };
        get requestUrl(){
            return this.baseUrl + this.project + this.raw + this.fileUrl;
        };
        init(){
            axios({
                method: "get",
                url: this.requestUrl
            }).then(res => {
                this.code = res.data;
                this.$nextTick(()=>{
                    // 此处选择器 只选择当前组件的pre code,否则影响组件外 代码区域 格式
                    document.querySelectorAll(".custom-code pre code").forEach(block => {
                        // @ts-ignore
                        Prism.highlightElement(block)
                    });
                });
            })
        }
    }
</script>
