<template>
    <div class="container">
        <div class="title_top">
            <div class="title_name" @click="handleHome">
                {{ this.$dictLabel('node_title6') }}
            </div>
        </div>

        <leftNav selNavId="1" />

        
        <div class="task_box">
            <div class="task_head">
                <div class="text_gradual task_name">{{ title }}</div>
                <div class="task_add" @click="handleAdd"></div>
            </div>
            <div class="table_box" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.6)">
                <el-table :data="dataList" height="100%" stripe style="width: 100%">
                    <el-table-column prop="title" label="任务名称" align="center">
                    </el-table-column>
                    <el-table-column prop="createTime" label="建档时间" align="center">
                    </el-table-column>
                    <!-- <el-table-column prop="address" label="数据标题" align="center">
                    </el-table-column> -->
                    <el-table-column label="操作" align="center">
                        <template slot-scope="{ row }">
                            <el-button class="but_1" size="small" @click="handleInducts(row)">导入数据</el-button>
                            <el-button class="but_2" size="small" @click="handledoc(row)">生成文档</el-button>
                            <el-button class="but_3" size="small" @click="handleDel(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>


        <el-dialog custom-class="" title="任务名称" :visible.sync="open">
            <div class="dia_box">
                <el-input placeholder="请输入任务名称" v-model="form.title" />
                <div class="but_save" @click="submitForm" v-loading="saveloading"
                    element-loading-background="#FFFFFF60"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { taskList, taskAdd, remove } from "@/api/bigScreen/api.js";
export default {
    name: 'Task',
    props: {

    },
    components: {

    },
    data(){
        return {
            title: '',
            open: false,
            loading: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: '',
            },
            total: 0,
            dataList: [],
            form: {
                type: '1',
                title: '',
                scene: '',
            },
            saveloading: false,

        }
    },
    created() {
        console.log(this.$route.query);
        
        this.title = this.$route.query.name
        this.queryParams.type = this.$route.query.type
        this.getList();

    },
    methods: {
        //  获取数据列表
        async getList() {
            this.loading = true
            let res = await taskList(this.queryParams)
            if (res.code == 0) {
                this.dataList = res.rows
                this.total = res.total
                this.loading = false
            }

        },
        //  新建任务
        handleAdd(){
            this.form = {
                type: '1',
                title: '',
                scene: '',
            }
            this.open = true
        },
        //  提交表单
        async submitForm(formName) {
            this.saveloading = true
            let res = await taskAdd(this.form)
            if (res.code == 0) {
                this.saveloading = false
                if (this.form.id != undefined) {
                    this.$modal.msgSuccess("修改成功");
                } else {
                    this.$modal.msgSuccess("新增成功");
                }
                this.open = false
                this.getList();
            }
            // this.$refs[formName].validate(async (valid) => {
            //     if (valid) {
            //     } else {
            //         return false;
            //     }
            // });
        },
        //  导入数据
        handleInducts(row) {
            // this.$router.push('/inducts')
            this.$cache.session.set('graphData', row.images)
            this.$router.push({ path: '/inducts', query: { id: row.id } });
        },
        //  生成文档
        handledoc(row) {
            // this.$router.push('/deduced')
            this.$router.push({ path: '/deduced', query: { id: row.id } });
        },
        /** 删除按钮操作 */
        handleDel(row) {
            this.$modal.confirm('是否确认删除名称为"' + row.title + '"的数据项？').then(()=> {
                return remove({ ids: row.id})
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess("删除成功")
            }).catch(() => {})
        },
        handleHome() {
            this.$router.push('/home')
        }
    }
}
</script>

<style lang="scss" scoped>
.container{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 30px 0 90px;
    display: flex;
    align-items: center;
    justify-content: center; 
    overflow: hidden;

    // .text_gradual{
    //     background: linear-gradient(to bottom, #ffffff, #8af3ff); /* 渐变颜色 */
    //     background-clip: text;
    //     -webkit-background-clip: text;
    //     color: transparent; /* 使文字透明，以显示背景渐变 */
    //     // color: #8af3ff;
    //     font-weight: bold;
    //     text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* 白色发光 */
    // }
    .task_box{
        margin-top: 30px;
        width: 1755px;
        height: 88%;
        .task_head{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            .task_name{
                font-weight: bold;
                font-size: 20px;
            }
            
            .task_add{
                width: 162px;
                height: 54px;
                background-image: url('~@/assets/bigScreen/task/but_add.png');
                background-repeat: no-repeat;
                background-position: -48px -43px;
                background-size: 260px 140px;
                cursor: pointer;
            }
        }
        .table_box{
            width: 100%;
            // height: 600px;
            height: calc(100% - 130px);
            ::v-deep .el-table{
                font-size: 16px;
                background-color: transparent;
                .el-table__header-wrapper tr{
                    height: 60px;
                    background-color: transparent;
                    background-image: url('~@/assets/bigScreen/task/img_1.png');
                    background-repeat: no-repeat;
                    background-position: -20px -15px;
                    background-size: 1795px 90px;
                    th{
                        height: 60px;
                        font-size: 16px;
                        background-color: transparent;
                        border: none;
                        color: #FFFFFF90;
                    }
                }
                .el-table__body-wrapper{
                    tr {
                        height: 60px;
                        background-color: #091c43;
                        td{
                            height: 60px;
                            background-color: transparent;
                            border: none;
                            color: #FFFFFF;
                        }
                    }
                    .el-table__row--striped{
                        background-color: #0b2c58;
                    }
                }
                .but_1{
                    background-color: transparent;
                    border: 1px solid #76d3ff;
                    color: #76d3ff;
                    font-size: 14px;
                }
                .but_2{
                    background-color: #76d3ff;
                    border: 1px solid #76d3ff;
                    color: #000000;
                    font-size: 14px;
                }
                .but_3{
                    background-color: #69ffdd;
                    border: 1px solid #69ffdd;
                    color: #000000;
                    font-size: 14px;
                }
            }
            .el-table::before{
                width: 0;
                height: 0;
            }
        }
    }

    ::v-deep .el-dialog{
        margin-top: 25vh !important;
        background-color: transparent;
        width: 992px;
        height: 366px;
        background-image: url('~@/assets/bigScreen/task/img_bg_1.png');
        background-repeat: no-repeat;
        background-position: -18px -18px;
        background-size: 1028px 402px;
        .el-dialog__header{
            padding: 30px;
            padding-bottom: 10px;
            .el-dialog__title{
                background: linear-gradient(to bottom, #ffffff, #8af3ff); /* 渐变颜色 */
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent; /* 使文字透明，以显示背景渐变 */
                // color: #8af3ff;
                font-weight: bold;
                font-size: 18px;
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* 白色发光 */
                letter-spacing: 0.1em;
            }
            .el-dialog__headerbtn {
                top: 30px;
                right: 30px;
                .el-dialog__close{
                    font-weight: 700;
                    font-size: 18px;
                    color: #50a4fd;
                }
            }
        }
        .el-dialog__body{
            padding-left: 30px;
            padding-right: 30px;
        }
        .dia_box{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .el-input__inner{
                height: 72px;
                background-color: #123054;
                border-color: #123054;
                color: #FFFFFF;
                font-size: 18px;
            }
        }
        .but_save{
            margin-top: 50px;
            width: 180px;
            height: 59px;
            background-image: url('~@/assets/bigScreen/task/but_sub.png');
            background-repeat: no-repeat;
            background-position: -40px -40px;
            background-size: 260px 140px;
            cursor: pointer;
        }
    }
}
</style>