<template>
    <div class="url">
        <el-form-item label="视频地址">
            <div style="display: flex;width: 100%;">
                <el-input style="width: 100%;" v-model="form.name" />
                <el-button style="flex-shrink: 0;margin: 0 10px;" @click="getlist" type="primary">获取</el-button>
            </div>

        </el-form-item>
        <el-form-item label="第几集开始">
            <div style="display: flex;">
                <el-input v-model="form.start" />
                <el-button style="flex-shrink: 0;margin: 0 10px;" @click="setlist" type="primary">设置</el-button>
            </div>

        </el-form-item>
        <el-form-item label="下载保存地址">
            <div style="display: flex;">
                <el-input v-model="form.save" />
                <el-button style="flex-shrink: 0;margin: 0 10px;" @click="dow" type="primary">下载</el-button>
                <el-button style="flex-shrink: 0;margin: 0 10px;" @click="showmsg" type="primary">查看进度</el-button>
            </div>

        </el-form-item>
        <el-table ref="table" :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column label="title" prop="title">
            </el-table-column>
            <el-table-column label="url" prop="url" />
        </el-table>
        <el-dialog :fullscreen="true"  v-model="dialogVisible" title="Tips" width="30%" >
            <div style="width: 100%;height: 100%;overflow-y: auto;">
                <div v-for="i in msg">{{ i }}</div>
            </div>
           
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElLoading,ElMessage } from 'element-plus'
import axios from 'axios';
const dialogVisible = ref(false)
const form = ref({
    name: "https://v.qq.com/x/cover/mzc002007vp35qj.html",
    start: 1,
    save:"D:/dl"
})
const tableData = ref([])
const table = ref()
function getlist() {
    // let load = ElLoading.service()
    // window.getlist(form.value.name).then((res) => {
    //     console.log(res)
    //     tableData.value = res
    //     load.close()
    // })
    axios.get("http://127.0.0.1:3050/getQqList",{
        params: {url:form.value.name}
    }).then((r)=>{
        tableData.value = r.data
    })
}
function setlist() {
    table.value.clearSelection()
    for (let i = form.value.start - 1; i < tableData.value.length; i++) {
        console.log(i)
        table.value.toggleRowSelection(tableData.value[i], undefined)
    }
}
const msg = ref([])

async function dow() {
    dialogVisible.value = true
    let list = table.value.getSelectionRows()
    for(let i of list){
        await axios.get("http://127.0.0.1:3050/startDown",{
            params:i
        })
    }
    // dialogVisible.value = false
    ElMessage({
        showClose: true,
        message: '添加完成',
        type: 'success',
        duration:0
    })
}
const source = new EventSource(`http://127.0.0.1:3050/msg`);
source.onmessage = event => {
  // 挂到载体上面
  msg.value.unshift(event.data)
}
function showmsg(){
    dialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.url {}
</style>