<%inherit file="/base_index.html"/>
<%block name='content'>
<style>
    .colorSucStyle {
        color: #44b549;

    }

    .colorErrStyle {
        color: orangered;
    }

    .lable_color {
        color: rgba(0, 0, 0, 0.70);
    }
</style>
<div class="tab-content mb20">
    <div id="scanTask">
        <div class="scanTask" v-cloak>
            <el-tabs style=" padding-left: 20px;">
                <el-tab-pane label="">
                    <div class="tab-pane fade active in">
                        <div class="panel panel-default table7_demo king-table7-demo3" style="border:none;padding: 20px 40px;">
                            <div class="panel-body">
                                <div class="king-wrapper clearfix">
                                    <el-form>
                                        <el-form-item label="">
                                            <el-row style="border-bottom: 2px dashed darkgray;padding: 10px">
                                                <el-col style="padding-bottom: 10px">
                                                    <span style="font-weight:600;font-size:15.6px;">事件导出、同步与新建:</span>
                                                </el-col>
                                                <el-col align="left">
                                                    <el-date-picker
                                                            v-model="dateoutinfo"
                                                            type="daterange"
                                                            style="margin-right: 20px;padding: 0 15px;width: 270px"
                                                            start-placeholder="开始日期"
                                                            end-placeholder="结束日期">
                                                    </el-date-picker>
                                                    <el-button type="primary" size="medium" plain
                                                               @click="dateout()">选择日期导出
                                                    </el-button>
                                                    <el-button type="primary" size="medium" plain
                                                               @click="checkedColums()">选择事件导出
                                                    </el-button>
                                                    <el-button type="primary" size="medium"
                                                               @click="syncTask()" style="float:right">同步
                                                    </el-button>
                                                    <el-button type="primary" size="medium" style="float:right"
                                                               @click="createNewTask()">新建
                                                    </el-button>
                                                </el-col>
                                            </el-row>
                                            <el-row style="padding: 10px;">
                                                <el-col>
                                                    <div>
                                                        <span style="font-weight:600;font-size:15.6px;">事件查询:</span>
                                                    </div>
                                                    <div style="padding-bottom: 15px;padding-top: 10px">
                                                    <el-form-item label="处理人" style="display:inline-block;" label-width="70px">
                                                        <el-input style="width:140px;" v-model="formLine.relate_me"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="优先级" style="display:inline-block; " label-width="130px">
                                                        <el-select style="width:100px;" clearable v-model="formLine.priority" >
                                                            <el-option v-for="item in priorityOp"
                                                                       :key="item.value"
                                                                       :label="item.label"
                                                                       :value="item.label">
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item label="事件一级分类" label-width="160px" style="display:inline-block; ">
                                                        <el-select style="width:145px;" clearable v-model="formLine.event_first_cat" >
                                                            <el-option v-for="item in eventFirstCatOp"
                                                                       :key="item.value"
                                                                       :label="item.label"
                                                                       :value="item.label"></el-option>
                                                        </el-select>
                                                    </el-form-item>

                                                    <el-form-item label="全局事件搜索" style="display:inline-block; " label-width="160px">
                                                        <el-input style="width:160px;" v-model="formLine.all_fields"></el-input>
                                                    </el-form-item>
                                                    <el-popover placement="top-start"
                                                        title="支持全局搜索字段"
                                                        width="200"
                                                        trigger="hover"
                                                        content="事件摘要，故障系统名称，受影响系统名称，现象">
                                                        <i class="el-icon-question" slot="reference"
                                                           style="margin-left: 5px"></i>
                                                    </el-popover>
                                                    </div>
                                                    <div>
                                                        <el-form-item label="事件编号" style="display:inline-block;" label-width="70px">
                                                            <el-input style="width:140px;" v-model="formLine.event_number">
                                                            </el-input>
                                                        </el-form-item>
                                                        <el-form-item label="查询服务器硬件事件" style="display:inline-block; " label-width="215px">
                                                        <template>
                                                            <el-checkbox v-model="formLine.hardware"></el-checkbox>
                                                        </template>
                                                    </el-form-item>
                                                        <el-form-item label="事件发生时间" label-width="160px" style="display:inline-block; ">
                                                        <el-date-picker
                                                            v-model="formLine.event_hap_time"
                                                            type="daterange"
                                                            style="margin-right: 20px;padding: 0 15px;width: 300px"
                                                            start-placeholder="开始日期"
                                                            end-placeholder="结束日期">
                                                        </el-date-picker>
                                                    </el-form-item>
                                                    </div>
                                                    <div style="padding-top: 15px">
                                                        <el-form-item label="事件状态" label-width="70px" style="display:inline-block;">
                                                        <el-select style="width:140px;" clearable v-model="formLine.event_state">
                                                            <el-option v-for="item in eventStateOp"
                                                                       :key="item.value"
                                                                       :label="item.label"
                                                                       :value="item.label">
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                        <el-form-item label="事件标签" label-width="145px" style="display:inline-block; ">
                                                        <el-select style="width:145px;" clearable v-model="formLine.event_label"
                                                        multiple filterable>
                                                            <el-option v-for="item in labelList"
                                                                       :key="item.value"
                                                                       :label="item.label"
                                                                       :value="item.label">
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                        <el-button size="medium" id="search" type="primary"
                                                                   @click="emptySearch()" plain
                                                                   style="display:inline-block; margin-left:100px;">清空查询条件
                                                        </el-button>
                                                        <el-button size="medium" id="search" type="primary"
                                                                   @click="searchList()"
                                                                   style="display:inline-block; margin-left:20px;">查询
                                                        </el-button>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </div>
                            <div style="height:100%;min-height: 500px">
                                <el-table :data="taskData" border
                                          style="width: 100%"  v-loading="loading"
                                          element-loading-text="拼命加载中"
                                          element-loading-spinner="el-icon-loading"
                                          element-loading-background="rgba(0, 0, 0, 0.8)"
                                          ref="table" @select="handleSelectionChange"
                                          @select-all="handleSelectionChange"
                                          stripe
                                          :header-cell-style="{background:'#409EFF',color:'white'}"
                                            >

                                    <el-table-column type="selection" width="35"></el-table-column>
                                    <el-table-column width="300" prop="event_number" label="事件编号" header-align="center" align="left"></el-table-column>
                                    <el-table-column prop="summary" label="摘要" header-align="center" align="left" show-overflow-tooltip></el-table-column>
                                    <el-table-column width="130" prop="priority" label="优先级" align="center"></el-table-column>
                                    <el-table-column width="130" prop="analy_state" label="状态" align="center"></el-table-column>
                                    <el-table-column width="130" prop="assignee" label="处理人" align="center"></el-table-column>
                                    <el-table-column width="130" label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button @click="readRow(scope.row)" type="text" size="small"
                                                       v-if="scope.row.assignee==user">编辑
                                            </el-button>
                                            <el-button @click="readRow(scope.row)" type="text" size="small"
                                                       v-if="scope.row.assignee!=user">查看
                                            </el-button>
                                            <el-button type="text" @click="deleteRow(scope.row)" size="small"
                                                       v-if="scope.row.assignee==user">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>

                            <div class="block" style="height: 35px; padding-top: 15px">
                                <el-pagination
                                        @current-change="handleCurrentChange"
                                        :current-page="currentPage"
                                        :page-size="pageSize"
                                        layout="total, prev, pager, next, jumper"
                                        :total="total">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <script type="text/javascript">


        var keyArray = {

            relateJudge: [
                {
                    label: '选择',
                    value: '1',
                },
                {
                    label: '不选',
                    value: '2',
                }

            ],
//影响程度
            eventState: [
                {
                    label: '已分析',
                    value: '1',

                },
                {
                    label: '未分析',
                    value: '2',

                },

            ],
            hardwareop: [
                {
                    label: '是',
                    value: '1',

                },
                {
                    label: '否',
                    value: '2',

                },

            ],
            //优先级
            priority: [
                {
                    label: '1级',
                    value: '1',

                },
                {
                    label: '2级',
                    value: '2',

                },
                {
                    label: '3级',
                    value: '3',

                },
                {
                    label: '4级',
                    value: '4',

                },
                {
                    label: '5级',
                    value: '5',

                },

            ],
            eventFirstCa: [
                {
                    label: '安全',
                    value: '1',

                },
                {
                    label: '桌面运维',
                    value: '2',

                },
                {
                    label: '网络',
                    value: '3',

                },
                {
                    label: 'IT基础架构软件',
                    value: '4',

                },
                {
                    label: 'IT基础架构硬件',
                    value: '5',

                },
                {
                    label: '机房环境',
                    value: '6',
                },
                {
                    label: '应用系统',
                    value: '7',
                },
            ]

        }
        var formatToId = function (item, itemArray) {
            for (let i of itemArray) {
                if (item == i.label) {
                    return i.value
                    break;
                }
            }
        }
        var formatToText = function (item, itemArray) {
            for (let i of itemArray) {
                if (item == i.value) {
                    return i.label
                    break;
                }
            }
        }

        var vm = new Vue({
            el: "#scanTask",
            data() {
                return {
                    labelList: [],
                    dateoutflag: false,
                    dateoutinfo: "",
                    user: '',
                    priorityOp: keyArray.priority,
                    eventStateOp: keyArray.eventState,
                    relateOp: keyArray.relateJudge,
                    eventFirstCatOp: keyArray.eventFirstCa,
                    hardwareop: keyArray.hardwareop,
                    formLine: {
                        //impact_degree:"", //影响度
                        priority: "",//优先级
                        relate_me: '',//与我相关
                        event_state: "",//事件分析状态
                        event_first_cat: "",
                        event_hap_time: "",
                        hardware: '',
                        event_number: '',
                        all_fields: '',
                        event_label: "",
                    },
                    displayStatus: '',
                    taskData: [],
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    storage: '',
                    deleteState: '',
                    editData: [],
                    loading: false,
                    selectData: []
                }
            },
            mounted() {
                this.setmainuser();
                this.getTaskList();
                this.getLabel()
            },


            methods: {
                //查询
                searchList() {
                    this.currentPage = 1;
                    this.count = 0
                    this.getTaskList()
                },

                //获取任务列表
                getTaskList(fn) {
                    this.loading = true;
                    let vm = this;
                    let newdata = {
                        currentPage: vm.currentPage,
                        pageSize: vm.pageSize,
                        data: vm.formLine
                    };
                    axios.post('${SITE_URL}condition_search/', newdata).then(res => {
                            vm.total = res.results.count;
                            vm.taskData = res.results.results;
                            vm.loading = false;

                            if (!!fn) {
                                fn()
                            }
                        }, err => {
                            vm.loading = false;
                            vm.$message(
                                {
                                    type: 'error',
                                    message: "数据显示失败!"
                                }
                            )
                        },
                        storage = this.formLine.priority)
                },

                getLabel(){
                    axios.get('${SITE_URL}get_label/').then(res => {
                        this.labelList=res.data
                    })
                },

                setmainuser() {
                    axios.get('${SITE_URL}getuser/').then(res => {
                        res = res.data
                        this.user = res
                    })
                },

                //新建模板
                createNewTask() {
                    window.localStorage.removeItem("event_number")
                    window.location.href = "${SITE_URL}event_edit"
                },

                //编辑模板
                readRow(row) {
                    let data = {event_number: row.event_number};
                    axios.post("${SITE_URL}event_edit_display/", data).then(res => {
                        window.localStorage.setItem("event_number", JSON.stringify(res.results));
                        window.location.href = "${SITE_URL}event_edit"
                    })
                },

                //同步执行
                syncTask() {
                    window.location.href = "${SITE_URL}sync"
                },

                handleSelectionChange(selection) {
                    this.selectData[this.currentPage] = [];
                    selection.map((item, index) => {
                        this.selectData[this.currentPage].push(item.event_number)
                    })
                },

                handleCurPageChange() {
                    let arr = [];
                    if (!!this.selectData[this.currentPage]) {
                        this.selectData[this.currentPage].map(item => {
                            arr = arr.concat(this.taskData.filter(item2 => {
                                return item2.event_number == item
                            }))
                        })
                    }
                    this.toggleSelection(arr)
                },

                toggleSelection(rows) {
                    this.$nextTick(() => {
                        if (rows) {
                            rows.forEach(row => {
                                this.$refs.table.toggleRowSelection(row)
                            })
                        } else {
                            this.$refs.table.clearSelection();
                        }
                    })
                },


                //删除
                deleteRow(row) {
                    let vm = this;
                    this.selectContent = row;
                    if (row.data_src == 1) {
                        this.$message('当前选中记录为同步数据，不可删除！！！');
                        return false
                    }
                    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let id = row.event_number;
                        this.sureDelete(id)
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                sureDelete(id) {
                    let vm = this
                    let data = {event_number: id}
                    axios.post('${SITE_URL}delete_event/', data).then(res => {
                        vm.deleteState = res.data.deleteState
                        console.log(vm.deleteState)
                        if (vm.deleteState == '0') {
                            vm.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            vm.getTaskList()
                        } else {
                            vm.$message({
                                type: 'error',
                                message: '该事件处理人与目前登录人不符，无法删除!'
                            });
                        }
                    }, err => {
                        vm.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    })

                },

                //清除事件搜索条件
                emptySearch(){
                    this.formLine.relate_me = '';
                    this.formLine.priority = '';
                    this.formLine.event_first_cat = '';
                    this.formLine.event_hap_time = '';
                    this.formLine.event_state = '';
                    this.formLine.hardware = '';
                    this.formLine.event_number = '';
                    this.formLine.all_fields = '';
                    this.formLine.event_label = '';
                },

                //选择事件导出文件
                async checkedColums() {
                    let eventList = [];
                    let vm = this;
                    for (let i in this.selectData) {
                        eventList = eventList.concat(this.selectData[i])
                    }
                    if (eventList.length == 0) {
                        vm.$message({
                            type: 'error',
                            message: '请选择需要导出的事件'
                        });
                    } else {
                        await this.check(eventList);
                        vm.$message({
                                    type: 'success',
                                    message: '下载成功'
                                });
                        this.download()

                    }
                },
                check(eventList){
                    return new Promise((resolve,reject)=>{
                        axios.post("${SITE_URL}event_out/", {eventList: eventList}).then(res => {
                            if (res.data == 1) {
                                resolve('ok')
                            }
                        });
                    })
                },

                // 选择日期导出文件
                async dateout() {
                    if (this.dateoutinfo == null || this.dateoutinfo.length == 0) {
                        vm.$message({
                            type: 'error',
                            message: '请选择时间'
                        });
                    } else {
                        console.log('进入按时间导出1')
                        await this.checkk();
                        console.log(this.dateoutflag)
                        if (this.dateoutflag == true){
                            vm.$message({
                                    type: 'success',
                                    message: '下载成功'
                                });
                            this.download()
                        } else {
                            vm.$message({
                                    type: 'error',
                                    message: '该时间段内没有事件发生'
                                });
                        }

                    }
                },
                checkk(){
                    return new Promise((resolve,reject)=>{
                        axios.post("${SITE_URL}event_out/", this.dateoutinfo).then(res => {
                            if (res.data == 1) {
                                resolve('ok')
                                console.log('时间段内有事件2')
                                this.dateoutflag = true
                            } else {
                                resolve('ok')
                                console.log('时间段内无事件2')
                                this.dateoutflag = false
                            }
                        })
                    })
                },

                download() {
                        window.location.href = "${SITE_URL}download";
                },

                handleCurrentChange(val) {
                    console.log("当前页" + val);
                    if (this.currentPage != val) {
                        this.currentPage = val
                        this.getTaskList(() => {
                            this.handleCurPageChange()
                        })
                    }
                },


            },

        })


    </script>
</%block>
