{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务管理</title>
    {% include 'admin/includes/css-part.html' %}
    <link rel="stylesheet" href="https://unpkg.com/umy-ui/lib/theme-chalk/index.css">
    <style>
        /* 用来设置当前页面element全局table 选中某行时的背景色*/
        .el-table__body tr.current-row > td {
            background-color: #69A8EA !important;
            color: #fff;
        }

        /* 用来设置当前页面element全局table 鼠标滑过某行时的背景色*/
        .el-table__body .el-table__row.hover-row td {
            background-color: #aaaaaa !important;
        }
    </style>
</head>
<body>

<div id="app">
    <el-tabs type="border-card" @tab-click="handleTabClick">
        <el-tab-pane
                v-for="downloader in downloaders"
                :label="downloader.name"
                {#                :name="downloader.id"#}
                :id="downloader.id">
            <div>
                <el-dropdown split-button type="primary" size="mini">
                    查看
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>继续</el-dropdown-item>
                        <el-dropdown-item>暂停</el-dropdown-item>
                        <el-dropdown-item>强制继续</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                        <el-dropdown-item>限速</el-dropdown-item>
                        <el-dropdown-item>分类</el-dropdown-item>
                        <el-dropdown-item>更改路径</el-dropdown-item>
                        <el-dropdown-item>自动管理</el-dropdown-item>
                        <el-dropdown-item>重新校验</el-dropdown-item>
                        <el-dropdown-item>复制链接</el-dropdown-item>
                        <el-dropdown-item>复制HASH</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button size="mini" type="warning" @click="clearTimer" v-if="refresh"> 暂停刷新</el-button>
                {#                <el-button size="mini" type="success" @click="handleRefresh" v-else="refresh"> 开始刷新</el-button>#}
                <el-dropdown split-button type="success" size="mini" v-else="refresh" @click="handleRefresh(10)"
                             @command="handleRefresh">
                    开始刷新
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-loading" command="5">5S</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-loading" command="15">15S</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-loading" command="30">30S</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-loading" command="60">60S</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <hr/>
            <u-table
                    ref="plTable"
                    row-height="55"
                    use-virtual
                    showBodyOverflow="title"
                    showHeaderOverflow="title"
                    @row-dblclick="handleRow"
                    @row-contextmenu="rtClick"
                    :data="torrents"
                    height="740"
                    size="mini"
                    border
                    stripe
                    highlight-current-row
                    {#                    show-summary#}
                    style="width: 100%">
                <u-table-column
                        fixed
                        type="selection">
                </u-table-column>
                <u-table-column type="index" fixed></u-table-column>
                {#                <u-table-column#}
                {#                        prop="name"#}
                {#                        fixed#}
                {#                        sortable#}
                {#                        show-overflow-tooltip="true"#}
                {#                        label="种子名称" max-width="380"#}
                {#                        min-width="220">#}
                {#                </u-table-column>#}
                {#                <u-table-column prop="size"#}
                {#                                sortable#}
                {#                                width="75"#}
                {#                                :formatter="handleSize"#}
                {#                                label="大小">#}
                {#                </u-table-column>#}
                {#                <u-table-column prop="downloaded" :formatter="handleSize"#}
                {#                                 label="已下载"></u-table-column>#}
                {#                <u-table-column prop="uploaded"#}
                {#                                :formatter="handleSize"#}
                {#                                sortable#}
                {#                                width="85"#}
                {#                                label="上传"></u-table-column>#}
                {#                <u-table-column prop="dlspeed"#}
                {#                                sortable#}
                {#                                width="95"#}
                {#                                label="下载速度"></u-table-column>#}
                {#                <u-table-column prop="upspeed"#}
                {#                                sortable#}
                {#                                width="95"#}
                {#                                label="上传速度"></u-table-column>#}
                {#                <u-table-column#}
                {#                        prop="progress"#}
                {#                        sortable#}
                {#                        width="90"#}
                {#                        label="进度">#}
                {#                    <template slot-scope="scope">#}
                {#                        <el-progress#}
                {#                                v-if="scope.row.progress==1"#}
                {#                                status="success"#}
                {#                                type="circle"#}
                {#                                width="20"#}
                {#                                :text-inside="true"#}
                {#                                :stroke-width="20"#}
                {#                                stroke-linecap="butt"#}
                {#                                :percentage="scope.row.progress * 100">#}
                {#                        </el-progress>#}
                {#                        <el-progress#}
                {#                                v-else="scope.row.progress==1"#}
                {#                                :text-inside="true"#}
                {#                                type="circle"#}
                {#                                width="20"#}
                {#                                :color="customColors"#}
                {#                                :stroke-width="18"#}
                {#                                :percentage="scope.row.progress * 100">#}
                {#                        </el-progress>#}
                {##}
                {#                    </template>#}
                {#                </u-table-column>#}
                {#                <u-table-column prop="save_path"#}
                {#                                 label="保存路径"></u-table-column>#}
                {#                <u-table-column prop="ratio"#}
                {#                                sortable#}
                {#                                width="85"#}
                {#                                 :formatter="handlePercent"#}
                {#                                label="分享率"></u-table-column>#}
                {#                <u-table-column prop="seeding_time"#}
                {#                                 label="做种时间"></u-table-column>#}
                {#                <u-table-column prop="state"#}
                {#                                sortable#}
                {#                                width="75"#}
                {#                                label="状态"></u-table-column>#}
                {#                <u-table-column prop="last_activity"#}
                {#                                sortable#}
                {#                                width="105"#}
                {#                                show-overflow-tooltip#}
                {#                                label="最后活动"></u-table-column>#}
                {#                <u-table-column prop="added_on"#}
                {#                                 label="添加时间"></u-table-column>#}
                {#                <u-table-column prop="category"#}
                {#                                sortable#}
                {#                                width="85"#}
                {#                                label="分类"></u-table-column>#}
                {#                <u-table-column prop="tracker"#}
                {#                                 label="Tracker"></u-table-column>#}
                {#                <u-table-column#}
                {#                        width="120"#}
                {#                        fixed="right"#}
                {#                        label="操作">#}
                {#                   #}
                {#                </u-table-column>#}
            </u-table>
        </el-tab-pane>
    </el-tabs>

    {#    <el-dialog title="任务详情" :visible.sync="dialogFormVisible">#}
    {#        <el-form :model="torrent">#}
    {#            <el-form-item label="种子名称">#}
    {#                <el-input v-model="torrent.name"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="大小">#}
    {#                <el-input v-model="torrent.size"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="已下载">#}
    {#                <el-input v-model="torrent.downloaded"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="已上传">#}
    {#                <el-input v-model="torrent.uploaded"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="下载速度">#}
    {#                <el-input v-model="torrent.dlspeed"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="上传速度">#}
    {#                <el-input v-model="torrent.upspeed"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="下载进度">#}
    {#                <el-input v-model="torrent.progress"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item#}
    {#                    :formatter="handleRatio"#}
    {#                    label="分享率">#}
    {#                <el-input v-model="torrent.ratio"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="做种时间">#}
    {#                <el-input v-model="torrent.seeding_time"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="当前状态">#}
    {#                <el-input v-model="torrent.state"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="最后活动">#}
    {#                <el-input v-model="torrent.last_activity"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="添加时间">#}
    {#                <el-input v-model="torrent.added_on"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="分类">#}
    {#                <el-input v-model="torrent.added_on"></el-input>#}
    {#            </el-form-item>#}
    {#            <el-form-item label="Tracker">#}
    {#                <el-input v-model="torrent.tracker"></el-input>#}
    {#            </el-form-item>#}
    {##}
    {#        </el-form>#}
    {#        <div slot="footer" class="dialog-footer">#}
    {#            <el-button @click="dialogFormVisible = false">取 消</el-button>#}
    {#            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>#}
    {#        </div>#}
    {#    </el-dialog>#}
</div>

{% include 'admin/includes/js-part.html' %}
<script src="https://unpkg.com/umy-ui@1.1.6/lib/index.js"></script>

<script src="{% static 'admin/simpleui-x/js/axios.min.js' %}"></script>
<script>
    const vm = new Vue({
        // 配置选项(option)
        // element: 指定用vue来管理页面中的哪个标签区域
        el: '#app',
        data: {
            {#downloaders: '',#}
            {#loading: false,#}
            torrents: [],
            {#dialogFormVisible: false,#}
            {#timer: {},#}
            {#interval: 5000,#}
            {#refresh: false,#}
            {#downloader_id: 0,#}
            {#torrent: {#}
            {#    name: '',#}
            {#    category: '',#}
            {#    size: '',#}
            {#    downloaded: '',#}
            {#    uploaded: '',#}
            {#    dlspeed: '',#}
            {#    upspeed: '',#}
            {#    progress: '',#}
            {#    ratio: '',#}
            {#    seeding_time: '',#}
            {#    state: '',#}
            {#    last_activity: '',#}
            {#    added_on: '',#}
            {#    tracker: '',            },#}
            {#customColors: [#}
            {#    {color: '#f56c6c', percentage: 20},#}
            {#    {color: '#e6a23c', percentage: 40},#}
            {#    {color: '#5cb87a', percentage: 60},#}
            {#    {color: '#1989fa', percentage: 80},#}
            {#    {color: '#6f7ad3', percentage: 100}#}
            {#]#}
        },
        beforeMount() {
        },
        mounted() {
            this.get_torrent_info_list()
        },
        // 清除定时器，不然页面会卡死
        beforeDestroy() {
            this.$once('hook:beforeDestroy',
                () => {
                    clearInterval(this.timer)
                    this.timer = null
                }
            )
        },
        watch: {},
        methods: {
            get_torrent_info_list() {
                axios.get(
                    "{% url "get_torrent_info_list" %}"
                ).then(res => {

                })
            },
            get_downloader() {
                axios.get(
                    "{% url "get_downloader" %}"
                ).then(res => {
                    this.loading = true
                    console.log('获取下载器列表成功', res.data)
                    if (res.data.code === 0) {
                        this.downloaders = res.data.data
                        this.downloader_id = this.downloaders[0].id
                        this.get_downloading(this.downloader_id)
                        console.log(this.torrents)
                        this.loading = false
                    } else {
                        this.loading = false
                        this.$message({
                            type: 'warning',
                            message: '获取下载器列表失败！'
                        });
                    }
                }).catch(res => {
                    console.log('获取下载器列表失败', res)
                    this.$message({
                        type: 'warning',
                        message: '获取下载器列表失败！' + res
                    });
                })
            },
            handleTabClick(tab, event) {
                const loading = this.$loading({
                    lock: true,//lock的修改符--默认是false
                    text: 'Loading',//显示在加载图标下方的加载文案
                    spinner: 'el-icon-loading',//自定义加载图标类名
                    background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
                    target: document.querySelector('#table')//loadin覆盖的dom元素节点
                });
                {#console.log(tab)#}
                console.log(tab.$attrs.id)
                this.loading = true
                {#this.torrents = []#}
                this.downloader_id = tab.$attrs.id
                this.get_downloading(this.downloader_id)
                loading.close()
            },
            get_downloading(downloader_id) {
                axios.get(
                    "{% url "downloading" %}",
                    {
                        params: {
                            id: downloader_id
                        }
                    }
                ).then(res => {

                    if (res.data.code === 0) {
                        console.log(res.data.data)
                        this.torrents = res.data.data
                    }
                })
            },
            // 执行格式化文件大小
            handleSize(row, column, cellValue, index) {
                return this.renderSize(cellValue)
            }
            ,
            // 格式化文件大小
            renderSize(value) {
                if (null == value || value == '') {
                    return "0";
                }
                var unitArr = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
                var index = 0;
                var srcsize = parseFloat(value);
                index = Math.floor(Math.log(srcsize) / Math.log(1024));
                var size = srcsize / Math.pow(1024, index);
                size = size.toFixed(2);//保留的小数位数
                return size + unitArr[index];
            }
            ,
            // 格式化进度
            handlePercent(row, column, cellValue, index) {
                return (cellValue * 100).toFixed(2) + '%'
            }
            ,
            // 格式化分享率
            handleRatio(row, column, cellValue, index) {
                return cellValue.toFixed(4)
            }
            ,
            // 双击任务事件
            handleRow(row, column, event) {
                console.log(row)
                this.torrent = row
                console.log(this.torrent)
                this.dialogFormVisible = true
                console.log(row.name)
                console.log(column)
                console.log(event)
            }
            ,
            // 阻止默认右键菜单弹出
            rtClick(row, column, event) {
                // 阻止默认右键菜单弹出
                event.preventDefault()
            }
            ,
            handleRefresh(command) {
                console.log(this.refresh)
                this.refresh = true
                this.interval = command * 1000
                this.$message({
                    type: 'success',
                    message: '下载任务将每' + command + '秒刷新一次，如需暂停，请点击按钮！'
                });
                this.timer = setInterval(() => {
                    this.get_downloading(this.downloader_id)
                }, this.interval)

            }
            ,
            clearTimer() {
                this.refresh = false
                console.log(this.refresh)
                this.$message({
                    type: 'warning',
                    message: '任务刷新已暂停！'
                });
                window.clearInterval(this.timer)
                this.timer = null
            }
        }
    });
</script>
</body>
</html>