<template>
    <div class="intellReport" :class="!theme ? 'themeDark' : 'themeLight'">
        <el-row :gutter="50" justify="space-evenly" :style="pageHeight">
            <el-col :span="9" class="warn-table">
                <existing @getExistingData="getData" :height="tableHeight" :theme="theme" />
            </el-col>
            <el-col :span="1" style="text-align: center;">
                <div :style="btnHeight">
                    <!-- <el-button type="primary" @click="onAddItem1">
                        <el-icon class="el-icon--right">
                            <ArrowRight />
                        </el-icon>
                    </el-button> -->
                    <img src="../../../assets/images/left.png" @click="onAddItem1" alt="">
                </div>
                <div :style="btnHeight">
                    <!-- <el-button type="primary" @click="onAddItem2">
                        <el-icon class="el-icon--right">
                            <ArrowRight />
                        </el-icon>
                    </el-button> -->
                    <img src="../../../assets/images/left.png" @click="onAddItem2" alt="">
                </div>
            </el-col>
            <el-col :span="13">
                <div class="listTop warn-table">
                    <div style="display: flex;justify-content: space-between;">
                        <p class="tableTit">脚本列表</p>
                        <el-button class="run-all-script" type="primary" :disabled="btnloading" @click="runAllScript">
                            全部运行
                        </el-button>
                    </div>
                    <el-table :data="tableData" :height="listHeight">
                        <el-table-column type="index" width="30" />
                        <el-table-column label="脚本名称">
                            <template #default="scope">
                                <el-button v-if="scope.row.scriptName !==''" type="warning" round>
                                    {{ scope.row.scriptName}}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="right">
                            <template #default="scope">
                                <el-button type="primary" :disabled="btnloading" @click="handleRun(scope.$index)">运行
                                </el-button>
                                <el-button type="danger" @click="handleDeleteList(scope.$index)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="listTop listBot warn-table">
                    <p class="tableTit">每天运行一次</p>
                    <el-table :data="tableData4" :height="listHeight">
                        <el-table-column label="时间" width="300">
                            <template #default="scope">
                                <el-time-select v-model="scope.row.time" start="00:05" step="00:05" end="23:55"
                                    placeholder="选择时间" />
                            </template>
                        </el-table-column>
                        <el-table-column label="脚本名称">
                            <template #default="scope">
                                <el-button v-if="scope.row.scriptName !==''" type="warning" round>
                                    {{ scope.row.scriptName}}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="right">
                            <template #default="scope">
                                <el-button type="primary" v-if="!scope.row.isRunning" @click="dayRun(scope.row)">运行
                                </el-button>
                                <el-button type="primary" v-else disabled>运行中
                                </el-button>
                                <el-button type="danger" @click="handleDeleteDayRun(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>

</template>
<script>
    import {
        run,
        dayRunScript,
        scriptTimedrunlist,
        deleteTimedrunScript
    } from '@/api/report';
    import existing from "../existing.vue";
    export default {
        components: {
            existing
        },
        data() {
            return {
                childCurrentRow: [],
                tableData: [],
                tableData4: [],
                timeValue: '',
                theme: null,
                tableHeight: document.documentElement.clientHeight - 145,
                listHeight: (document.documentElement.clientHeight - 210) / 2,
                btnloading: false
            }
        },
        watch: {
            '$store.state.theme': {
                handler: function (newVal, oldVal) {
                    this.theme = newVal
                },
                immediate: true
            }
        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 115 + 'px'
                }
            },
            btnHeight() {
                return {
                    'height': (document.documentElement.clientHeight - 160) / 4 + 'px',
                    'padding-top': (document.documentElement.clientHeight - 160) / 4 + 'px'
                }
            }
        },
        mounted() {
            this.getDayRunlist()
        },
        methods: {
            //获取每日运行列表数据
            getDayRunlist() {
                let that = this
                scriptTimedrunlist().then(datas => {
                    if (datas) {
                        that.tableData4 = datas.data
                    }
                })
            },
            onAddItem1() {
                this.tableData.push(this.childCurrentRow)
            },
            onAddItem2() {
                this.tableData4.push(this.childCurrentRow)
            },
            runAllScript() {
                this.btnloading = true
                run(this.tableData).then(res => {
                    console.log(res)
                    this.btnloading = false
                });
            },
            handleRun(index) {
                this.btnloading = true
                run(new Array(this.tableData[index])).then(res => {
                    console.log(res)
                    this.btnloading = false
                })
            },
            handleDeleteList(index) {
                this.tableData.splice(index, 1)
            },
            dayRun(row) {
                let that = this
                dayRunScript(row).then(res => {
                    if (res.code === 0) {
                        that.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        that.getDayRunlist()
                    }
                });
            },
            handleDeleteDayRun(index, row) {
                let that = this
                if (!row.time) {
                    that.tableData4.splice(index, 1)
                } else {
                    let params = {
                        id: row.id
                    }
                    deleteTimedrunScript(params).then(res => {
                        if (res.code === 0) {
                            that.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            that.getDayRunlist()
                        }
                    });
                }
            },
            getData(data) {
                console.log("data:", data)
                this.childCurrentRow = data
            }
        }
    }
</script>

<style scoped lang="less">
    .intellReport {
        .listTop {
            margin-bottom: 20px;

            .tableTit {
                line-height: 40px;
                margin-left: 10px;
            }
        }

        .run-all-script {
            position: relative;
            right: 10px;
            top: 10px;
        }
    }

    .themeDark {
        padding: 20px 0;
        background: #161f1e;
        border-radius: 10px;

        .tableTit {
            font-size: 16px;
            color: #f8f9ff;
        }
    }

    .themeLight {
        padding: 20px 0;
        background: #edeffb;
        border-radius: 10px;

        .listTop {
            background: #f8f9ff;

            .tableTit {
                font-size: 16px;
                color: #9093a6;
            }
        }

    }
</style>