<!DOCTYPE html>
<html lang="zh">
<head>
    <title>首页</title>
    {% include 'layout/head.html' %}
    <style>
        table {
            border: 1px solid black;
        }

        table tr > td {
            padding: 0;
            margin: 0;
            border: 1px solid black;
        }

        td.success {
            background: green;
            color: white;
        }

        td.warning {
            background: orangered;
            color: white;
        }

        #app[v-cloak] {
            display: none;
        }

        tr.table-header {
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
{% raw %}
<div id="app" v-cloak>
    <h1>TEST</h1>
    <hr>
    <h2>当前状态</h2>
    <table class="current-status-table">
        <tbody>
        <tr class="table-header">
            <td>系统</td>
            <td>{{ collector.basic.system.os }}</td>
        </tr>
        <tr>
            <td>FFMPEG状态</td>
            <td :class="collector.basic.exec.ffmpeg ? 'success' : 'warning'"></td>
        </tr>
        <tr>
            <td>弹幕工具状态</td>
            <td :class="collector.basic.exec.danmaku ? 'success' : 'warning'"></td>
        </tr>
        <tr>
            <td>当前录制状态</td>
            <td :class="collector.basic.living ? 'success' : 'warning'"></td>
        </tr>
        <tr>
            <td>当前压制状态</td>
            <td :class="collector.basic.encoding ? 'success' : 'warning'"></td>
        </tr>
        <tr>
            <td>当前上传状态</td>
            <td :class="collector.basic.uploading ? 'success' : 'warning'"></td>
        </tr>
        <tr>
            <td>上一个稿件名</td>
            <td>{{ current_workflow.name }}</td>
        </tr>
        </tbody>
    </table>
    <h2>配置状态</h2>
    <table class="current-config">
        <thead>
        <tr class="table-header">
            <td colspan="2">FFMPEG</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>命令</td>
            <td>{{ config.ffmpeg.exec }}</td>
        </tr>
        <tr>
            <td>HEVC</td>
            <td :class="{warning: !config.ffmpeg.hevc, success: config.ffmpeg.hevc}"></td>
        </tr>
        <tr>
            <td>VAAPI</td>
            <td :class="{warning: !config.ffmpeg.vaapi, success: config.ffmpeg.vaapi}"></td>
        </tr>
        <tr>
            <td>嘤伟达GPU</td>
            <td :class="{warning: !config.ffmpeg.nvidia_gpu, success: config.ffmpeg.nvidia_gpu}"></td>
        </tr>
        <tr>
            <td>嘤特尔GPU</td>
            <td :class="{warning: !config.ffmpeg.intel_gpu, success: config.ffmpeg.intel_gpu}"></td>
        </tr>
        <tr>
            <td>视频CRF</td>
            <td>{{ config.ffmpeg.crf }}</td>
        </tr>
        <tr>
            <td>GOP</td>
            <td>{{ config.ffmpeg.gop }}</td>
        </tr>
        </tbody>
    </table>
    <table class="current-config">
        <thead>
        <tr class="table-header">
            <td colspan="2">弹幕</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>命令</td>
            <td>{{ config.danmaku.exec }}</td>
        </tr>
        <tr>
            <td>DANMU2ASS</td>
            <td :class="{warning: !config.danmaku.use_danmu2ass, success: config.danmaku.use_danmu2ass}"></td>
        </tr>
        <tr>
            <td>DanmakuFactory</td>
            <td :class="{warning: !config.danmaku.use_danmakufactory, success: config.danmaku.use_danmakufactory}"></td>
        </tr>
        <tr>
            <td>滚动速度</td>
            <td>{{ config.danmaku.speed }}</td>
        </tr>
        <tr>
            <td>弹幕字体</td>
            <td>{{ config.danmaku.font }}</td>
        </tr>
        <tr>
            <td>字体大小</td>
            <td>{{ config.danmaku.font_size }}</td>
        </tr>
        <tr>
            <td>视频分辨率</td>
            <td>{{ config.danmaku.resolution }}</td>
        </tr>
        </tbody>
    </table>
    <table class="current-config">
        <thead>
        <tr class="table-header">
            <td colspan="2">片段</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>片段时长</td>
            <td>{{ config.clip.each_sec }}</td>
        </tr>
        <tr>
            <td>超出时长</td>
            <td>{{ config.clip.overflow_sec }}</td>
        </tr>
        </tbody>
    </table>
    <table class="current-config">
        <thead>
        <tr class="table-header">
            <td colspan="2">目录</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>当前目录</td>
            <td>~</td>
        </tr>
        <tr>
            <td><progress :value="collector.basic.disk.work.percent" max="100"></progress></td>
            <td>{{ collector.basic.disk.work.free }} / {{ collector.basic.disk.work.total }}</td>
        </tr>
        <tr>
            <td :class="{warning: !collector.basic.disk.bili.exist, success: collector.basic.disk.bili.exist}">B站录播姬目录</td>
            <td>{{ config.recorder.bili_dir }}</td>
        </tr>
        <tr>
            <td><progress :value="collector.basic.disk.bili.percent" max="100"></progress></td>
            <td :class="{warning: !collector.basic.disk.bili.exist}">{{ collector.basic.disk.bili.free }} / {{ collector.basic.disk.bili.total }}</td>
        </tr>
        <tr>
            <td :class="{warning: !collector.basic.disk.xigua.exist, success: collector.basic.disk.xigua.exist}">西瓜视频录播目录</td>
            <td>{{ config.recorder.xigua_dir }}</td>
        </tr>
        <tr>
            <td><progress :value="collector.basic.disk.xigua.percent" max="100"></progress></td>
            <td :class="{warning: !collector.basic.disk.xigua.exist}">{{ collector.basic.disk.xigua.free }} / {{ collector.basic.disk.xigua.total }}</td>
        </tr>
        <tr>
            <td :class="{warning: !collector.basic.disk.output.exist, success: collector.basic.disk.output.exist}">压制输出目录</td>
            <td>{{ config.recorder.output_dir }}</td>
        </tr>
        <tr>
            <td><progress :value="collector.basic.disk.output.percent" max="100"></progress></td>
            <td>{{ collector.basic.disk.output.free }} / {{ collector.basic.disk.output.total }}</td>
        </tr>
        </tbody>
    </table>
    <table class="upload-config">
        <thead>
        <tr class="table-header">
            <td colspan="2">上传配置<sup style="background: aliceblue">Beta</sup></td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>是否开启</td>
            <td :class="{warning: !config.video.enabled, success: config.video.enabled}"></td>
        </tr>
        <tr>
            <td>视频标题Pattern</td>
            <td>{{ config.video.title }}</td>
        </tr>
        <tr>
            <td>视频描述</td>
            <td style="white-space: pre-wrap;max-width: calc(100vw - 6em);width: 750px">{{ config.video.desc }}</td>
        </tr>
        <tr>
            <td>视频分区</td>
            <td>{{ config.video.tid }}</td>
        </tr>
        <tr>
            <td>视频标签</td>
            <td>{{ config.video.tags }}</td>
        </tr>
        <tr>
            <td>上传人</td>
            <td><a :href="'https://space.bilibili.com/'+collector.uploader.mid">{{ collector.uploader.mid }}</a></td>
        </tr>
        <tr>
            <td>登录时间</td>
            <td>{{ collector.uploader.login_at }}(于{{ collector.uploader.expires }}秒后过期)</td>
        </tr>

        </tbody>
    </table>
</div>
{% endraw %}
</body>
<script>
    Vue.devtools = true
    Vue.createApp({
        data() {
            return {
                collector: {
                    basic: {
                        exec: {
                            ffmpeg: false,
                            danmaku: false,
                        },
                        system: {
                            os: "",
                        },
                        disk: {
                            output: {
                                exist: false,
                                percent: 0,
                                free: "",
                                total: ""
                            },
                            work: {
                                exist: false,
                                percent: 0,
                                free: "",
                                total: ""
                            },
                            bili: {
                                exist: false,
                                percent: 0,
                                free: "",
                                total: ""
                            },
                            xigua: {
                                exist: false,
                                percent: 0,
                                free: "",
                                total: ""
                            }
                        },
                        living: false,
                        encoding: false,
                        uploading: false,
                    },
                    uploader: {
                        mid: 0,
                        expires: 0,
                        login_at: "",
                    },
                },
                config: {
                    danmaku: {
                        exec: "",
                        use_danmu2ass: false,
                        use_danmakufactory: false,
                        speed: 0,
                        font: "",
                        font_size: 0,
                        resolution: "",
                    },
                    video: {
                        enabled: false,
                        title: "",
                        desc: "",
                        tid: 0,
                        tags: "",
                    },
                    clip: {
                        each_sec: 0,
                        overflow_sec: 0,
                    },
                    ffmpeg: {
                        exec: "",
                        hevc: false,
                        nvidia_gpu: false,
                        intel_gpu: false,
                        vaapi: false,
                        crf: "",
                        gop: "",
                    },
                    recorder: {
                        bili_dir: "",
                        xigua_dir: "",
                    }
                },
                current_workflow: {
                    id: 0,
                    name: "",
                },
            }
        },
        created() {
            axios({
                url: "/api/collector/"
            }).then((response) => {
                this.collector.basic = response.data;
            })
            axios({
                url: "/api/biliuploader/"
            }).then((response) => {
                this.collector.uploader = response.data;
            })
            axios({
                url: "/api/bilirecorder/"
            }).then((response) => {
                this.current_workflow = response.data;
            })
            axios({
                url: "/api/config/"
            }).then((response) => {
                this.config = response.data;
            })
        },
    }).mount("#app")
</script>
</html>