<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/asserts/index.css">
    <link rel="shortcut icon" href="/static/asserts/favicon.ico" type="image/x-icon"/>
    <title>后台管理-{{title}}</title>
    <meta name="description" content="{{description}}"/>
    <meta name="keywords" content="{{keywords}}"/>
    <meta name="generator" content="FileCodeBox"/>
    <meta name="template" content="Lan"/>
    <script src="/static/asserts/vue.min.js"></script>
    <script src="/static/asserts/index.js"></script>
    <style>
        .el-menu-demo {
            text-align: center;
        }

        body {
            background: #f5f5f5;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row v-if="login" :gutter="10">
        <el-col :span="24" style="text-align: center">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="2">分享文件管理</el-menu-item>
                <el-menu-item index="4">系统配置</el-menu-item>
            </el-menu>
        </el-col>
        <el-col v-if="activeIndex === '2'">
            <el-card style="height: 80vh;overflow: scroll;margin-bottom: 1rem">
                <el-empty v-if="files.length === 0" description="暂时还没有文件"></el-empty>
                <el-card v-for="file in files" :key="file.code">
                    <el-row>
                        <el-col :span="20">
                            <div style="cursor: pointer;text-align: left">
                                <div>取件码：${ file.code }</div>
                                <div>文件名：${ file.name }</div>
                                <div>次&nbsp;&nbsp; 数：${ file.count }</div>
                                <div>到&nbsp;&nbsp; 期：${ file.exp_time.slice(0,19) }</div>
                                <div v-if="file.name==='文本分享'">
                                    <span style="white-space: pre-line">内&nbsp;&nbsp; 容：${ file.text }</span>
                                </div>
                                <div v-else>
                                    <span>链&nbsp;&nbsp; 接：</span>
                                    <a :href="file.text" target="_blank"
                                       style="color: #1E9FFF;text-underline: none"
                                       type="primary">点击下载</a>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="danger" @click="deleteFile(file.code)">删除</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-card>
            <el-pagination
                    background
                    style="text-align: center"
                    layout="prev, pager, next, sizes"
                    :page-size="paginate.page_size"
                    @current-change="updatePage"
                    @size-change="updateSize"
                    :total="paginate.total"
            >
            </el-pagination>
        </el-col>
        <el-col v-if="activeIndex === '4'">
            <el-row>
                <el-col :span="4" style="height: 88vh;overflow: scroll;text-align: center" :gutter="10">
                    <el-card v-for="menu in menus" :key="menu.key">
                        <div style="cursor: pointer;" @click="updateTab=menu.key">${menu.name}</div>
                    </el-card>
                </el-col>
                <el-col :span="20">
                    <el-card style="height: 88vh;overflow: scroll">
                        <div v-if="updateTab=='INSTALL'">
                            <div>
                                <h1>FileCodeBox V${config.INSTALL}</h1>
                                <h2>Github：<a target="_blank"
                                              href="https://github.com/vastsa/FileCodeBox">FileCodeBox</a></h2>
                            </div>
                        </div>
                        <div v-else-if="updateTab=='BANNERS'">
                            <el-form ref="form" style="margin:1rem auto" :model="config" label-width="200px">
                                <el-form-item v-for="(banner,index) in config.BANNERS" :label="'Banner'+ (index+1)">
                                    <div style="display: inline-block">
                                        <el-input v-model="banner.text" placeholder="文本"></el-input>
                                        <el-input v-model="banner.url" placeholder="跳转链接"></el-input>
                                        <el-input v-model="banner.src" placeholder="图片路径"></el-input>
                                    </div>
                                    <div style="display: inline-block">
                                        <el-button type="danger" @click="deleteBanner(index)">删除</el-button>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <el-button size="mini" @click="addBanner" type="primary">新增Banner</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="updateConfig" type="primary">更新</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div v-else-if="updateTab=='WEBSITE'">
                            <el-form ref="form" style="margin:1rem auto" :model="config" label-width="200px">
                                <el-form-item label="后台密码">
                                    <el-input type="password" v-model="config.ADMIN_PASSWORD"
                                              placeholder="网站名称"></el-input>
                                </el-form-item>
                                <el-form-item label="网站名称">
                                    <el-input v-model="config.TITLE" placeholder="网站名称"></el-input>
                                </el-form-item>
                                <el-form-item label="网站描述">
                                    <el-input v-model="config.DESCRIPTION" placeholder="网站描述"></el-input>
                                </el-form-item>
                                <el-form-item label="网站关键词">
                                    <el-input v-model="config.KEYWORDS" placeholder="网站关键词"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-alert
                                            title="下列信息修改后需要手动重启系统"
                                            type="warning">
                                    </el-alert>
                                </el-form-item>
                                <el-form-item label="系统端口">
                                    <el-input v-model="config.PORT" placeholder="系统端口"></el-input>
                                </el-form-item>
                                <el-form-item label="后台地址">
                                    <el-input v-model="config.ADMIN_ADDRESS" placeholder="后台地址"></el-input>
                                </el-form-item>
                                <el-form-item label="存储引擎">
                                    <el-input v-model="config.STORAGE_ENGINE" placeholder="存储引擎"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="updateConfig" type="primary">更新</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div v-else-if="updateTab=='SHARE'">
                            <el-form ref="form" style="margin:1rem auto" :model="config" label-width="200px">
                                <el-form-item label="开启上传">
                                    <el-input v-model="config.ENABLE_UPLOAD" placeholder="开启上传"></el-input>
                                </el-form-item>
                                <el-form-item label="最长天数">
                                    <el-input v-model="config.MAX_DAYS" placeholder="最长允许保留多少天"></el-input>
                                </el-form-item>
                                <el-form-item label="删除过期间隔">
                                    <el-input v-model="config.DELETE_EXPIRE_FILES_INTERVAL"
                                              placeholder="删除过期文件的间隔（分钟）"></el-input>
                                </el-form-item>
                                <el-form-item label="上传大小限制">
                                    <small>单位:（bit),1mb=1 * 1024 * 1024</small>
                                    <el-input v-model="config.FILE_SIZE_LIMIT"
                                              placeholder="上传大小限制（bit）"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-alert
                                            title="下列信息修改后需要手动重启系统"
                                            type="warning">
                                    </el-alert>
                                </el-form-item>
                                <el-form-item label="口令错误限制">
                                    <small>每几分钟</small>
                                    <el-input v-model="config.ERROR_MINUTE"
                                              placeholder="错误次数过多后限制时间"></el-input>
                                    <small>允许错误几次</small>
                                    <el-input v-model="config.ERROR_COUNT" placeholder="允许错误次数"></el-input>
                                </el-form-item>
                                <el-form-item label="上传次数限制">
                                    <small>每几分钟</small>
                                    <el-input v-model="config.UPLOAD_MINUTE"
                                              placeholder="每几分钟"></el-input>
                                    <small>允许上传几次</small>
                                    <el-input v-model="config.UPLOAD_COUNT"
                                              placeholder="允许次数"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="updateConfig" type="primary">更新</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    <div v-else style="width: 250px;text-align: center;margin: 40vh auto">
        <el-input v-model="pwd" placeholder="请输入登录密码">
            <el-button slot="append" type="primary" @click="loginAdmin">登录</el-button>
        </el-input>
    </div>

</div>

</body>
<script src="/static/asserts/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        delimiters: ['${', '}'],
        data: function () {
            return {
                login: false,
                pwd: '',
                activeIndex: '2',
                config: {
                    banners: []
                },
                menus: [],
                updateTab: 'INSTALL',
                files: [],
                locals: [],
                paginate: {
                    page: 1,
                    size: 10,
                    total: 0,
                },
            };
        },
        mounted: function () {
            const pwd = localStorage.getItem('pwd');
            if (pwd) {
                login = true;
                this.pwd = pwd;
                this.loginAdmin();
                this.getLocalFiles();
            }
        },
        methods: {
            getConfig: function () {
                axios.get(window.location.href + '/config', {
                    headers: {
                        pwd: this.pwd
                    }
                }).then(res => {
                    this.config = res.data.data;
                    this.menus = res.data.menus;
                });
            },
            updateSize: function (value) {
                this.paginate.size = value;
                this.loginAdmin();
            },
            updatePage: function (value) {
                this.paginate.page = value;
                this.loginAdmin();
            },
            deleteBanner: function (index) {
                this.config.BANNERS.splice(index, 1);
            },
            addBanner: function () {
                this.config.BANNERS.push({
                    'url': '',
                    'src': '',
                    'text': '',
                })
            },
            updateConfig: function () {
                axios.patch('', this.config, {
                    'headers': {
                        'pwd': this.pwd,
                        'Content-Type': 'multipart/json'
                    }
                }).then(res => {
                    this.$message({
                        message: res.data.detail,
                        type: 'success'
                    });
                })
            },
            loginAdmin: function () {
                axios.post('', this.paginate, {
                    'headers': {
                        'pwd': this.pwd,
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    this.paginate = res.data.paginate;
                    this.files = res.data.data
                    this.login = true;
                    localStorage.setItem('pwd', this.pwd);
                    this.getConfig();
                }).catch(e => {
                    localStorage.clear()
                    this.$message({'message': e.response.data.detail, 'type': 'error'});
                });
            },
            handleSelect(key, keyPath) {
                this.activeIndex = key;
            },
            deleteFile: function (code) {
                axios.delete('?code=' + code, {'headers': {'pwd': this.pwd}}).then(res => {
                    this.files = this.files.filter(item => item.code !== code)
                    this.$message({
                        message: res.data.detail,
                        type: 'success'
                    });
                })
            },
            getLocalFiles: function () {
                axios.get(window.location.href + '/files', {
                    'headers': {
                        'pwd': this.pwd,
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    this.locals = res.data.data;
                })
            },
            shareFile: function (file) {
                axios.post(window.location.href + '/files', file, {
                    'headers': {
                        'pwd': this.pwd,
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    this.getLocalFiles()
                    this.$alert(`请在24小时内使用：${res.data.data.code}`, '分享成功', {
                        confirmButtonText: '确定',
                    });
                })

            }
        }
    })
</script>
</html>
