<template>
    <div class="doc-ctn flex-col" v-loading="loading">
        <div class="doc-header flex-justify-start">
            <i class="el-icon-education doc-logo ap-color-blue"/> <span style="font-size: 18px;">帮助文档</span>
        </div>
        <div class="doc-content flex-1">
            <div class="doc-title">
                {{ info.fdName }}
            </div>
            <div v-if="!isNull" class="doc-info" >
                <span>版本号：{{ info.fdVersion }} </span>
                <span style="margin-left: 20px">发布时间：{{ formatTime(info.fdTime) }}</span>
                <span style="margin-left: 20px">发布人：{{ info.fdPublishUserName }}</span>
            </div>
            <div class="ap-doc doc-html" v-html="info.fdText">
            </div>
            <div v-if="isNull" class="ap-color-yellow">
                当前功能未维护帮助文档！
            </div>
        </div>
    </div>
</template>

<script>

import {getHrefParams} from "ap-util/util/WindowUtil";
import {formatDate} from "ap-util/util/DateUtil"

export default {
    name: "Doc",
    data() {
        return {
            loading: false,
            isNull: false,
            text: "暂无内容",
            info: {}
        }
    },
    mounted() {
        this.getText();
    },
    methods: {
        getText() {
            let params = getHrefParams();
            let fid = params.fid;
            let versionId = params.vid;
            if (fid == null && versionId == null) {
                return;
            }

            let url;
            let id;
            if (fid != null) {
                url = "apm/doc/TSysDoc/getDocByFunctionId";
                id = fid;
            }else {
                 url = "apm/doc/TSysDoc/getDocByVersionId";
                 id = versionId;
            }
            this.isNull = false;
            this.loading = true;
            this.$request({
                url: url,
                method: 'post',
                data: {
                    id: id,
                }
            }).then(response => {
                this.info = response.data;
                if (response.data.fdTime == null) {
                    this.isNull = true;
                }
            }).finally(() => {
                this.loading = false;
            })
        },
        formatTime(str) {
            return formatDate(new Date(str), 'yyyy-MM-dd hh:mm:ss')
        }
    }
}
</script>

<style scoped>
.doc-ctn {
    height: 100%;
}

.doc-logo {
    font-size: 23px;
    margin-right: 10px;
}

.doc-header {
    color: #181818;
    font-weight: bold;
    font-size: 20px;
    padding: 8px 20px;
    border-bottom: 1px solid #cccccc;
}
.doc-content{
    padding: 0 10%;
    overflow: scroll
}
.doc-title {
    font-size: 32px;
    color: #181818;
    padding: 20px 0px 10px 0px;
}

.doc-info {
    color: #999;
    font-size: 13px;
    padding: 0px 0px 20px 0px;
}

.doc-desc-text {
    color: #828282;
}
.doc-version {
    padding: 0px 0px 10px 0px;
}
.doc-version-label {
    color: #373d41;
    font-weight: bold;
}

.doc-version-text {
    color: #3d76d3;
}

.doc-html {
    margin-top: 15px;
}
</style>