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

    }

    .colorErrStyle {
        color: orangered;
    }

    .lable_color {
        color: rgba(0, 0, 0, 0.70);
    }

    .important .el-form-item__label {
        color: red;
        font-weight: bolder;

    }

    .normal .el-form-item__label {
        color: #333333;
        font-weight: bolder;
    }


</style>
<div class="tab-content mb20">

    <div id="alarmEdit">
        <div class="alarmEdit" v-cloak>
            <div style=" padding: 20px;">
                <el-form label-width="90px" :model="formLine" ::disabled="showStatus">
                    <div class="bk-panel">
                        <div>
                            <el-form-item label="故障预警级别:" label-width="200px" class="normal"
                                          style="display:inline-block;">
                                <el-select v-model="formLine.alarm_type" clearable style="width:200px;"
                                           :disabled="editStatus">
                                    <el-option v-for="item in eventTypeOp"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.label"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="预警系统:" label-width="200px" class="normal"
                                          style="display:inline-block;">
                                <el-select v-model="formLine.alarm_system" clearable multiple filterable style="width:200px;"
                                           :disabled="editStatus">
                                    <el-option v-for="item in systemListCmdb"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.label">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="bk-panel" style="padding-bottom: 10px; padding-top: 25px">
                        <el-form-item label="预警时间:" label-width="200px" class="normal"
                                      style="display:inline-block; ">
                            <el-date-picker v-model="formLine.alarm_time" type="datetime"
                                            placeholder="必填" style="width:200px;" value-format="yyyy-MM-dd HH:mm:ss" :disabled="editStatus">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="恢复时间:" label-width="200px" class="normal" style="display:inline-block; ">
                            <el-date-picker
                                    v-model="formLine.recover_time"
                                    type="datetime" style="width:200px;" value-format="yyyy-MM-dd HH:mm:ss" :disabled="editStatus">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="处置时长:" label-width="200px" class="normal" style="display:inline-block; ">
                            <span>{{ getSubDate()}}</span>
                        </el-form-item>
                    </div>

                    <el-form-item label="故障预警摘要:" label-width="200px" class="normal"
                                  style="display:inline-block;">
                        <el-input v-model="formLine.alarm_summary" type="textarea" :rows="2" placeholder="必填"
                                  style="width:605px"
                                  :disabled="editStatus"></el-input>
                    </el-form-item>

                    <el-form-item label="是否需要干预:" class="normal" label-width="200px">
                        <el-radio-group style="margin-left: 5px;" @change="changeAuto"
                                        v-model="formLine.if_interpose">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="处置过程:" label-width="200px" class="normal"
                                  style="display:inline-block;">
                        <el-input v-model="formLine.solve_process" type="textarea" :rows="5" placeholder="必填"
                                  style="width:605px"
                                  :disabled="editStatus"></el-input>
                    </el-form-item>

                    <el-form-item label="是否为工作日:" class="normal" label-width="200px">
                        <el-radio-group style="margin-left: 5px;" @change="changeAuto"
                                        v-model="formLine.if_workday">
                            <el-radio :label="3">是</el-radio>
                            <el-radio :label="4">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="是否自动化处理:" class="normal" label-width="200px">
                        <el-radio-group style="margin-left: 5px;" @change="changeAuto" v-model="formLine.if_auto">
                            <el-radio :label="5">已自动化</el-radio>
                            <el-radio :label="6">已自动化(非一体化平台)</el-radio>
                            <el-radio :label="7" style="margin-left: 47px">未自动化</el-radio>
                            <el-radio :label="10" style="margin-left: 47px">不可自动化</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="系统所属名称:" label-width="200px" class="normal"
                                  style="display:inline-block" v-if="autochange">
                        <el-select v-model="formLine.auto_sysname" filterable clearable style="width: 275px"
                                   @change="project_team_autosys">
                            <el-option v-for="item in autosysOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="自动化方案:" label-width="200px" class="normal"
                                  style="display:inline-block" v-if="autochange">
                        <el-select style="width:275px;" v-model="formLine.auto_name" filterable clearable>
                            <el-option v-for="item in computedAutosysOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.label"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="非一体化:" label-width="200px" class="normal"
                                  v-if="notbkauto">
                        <el-input v-model="formLine.other_autoname" style="width:605px"
                                  placeholder="请输入其他平台自动化名称"></el-input>
                    </el-form-item>
                    <el-form-item label="不可自动化原因" label-width="120px" class="normal" v-if="cantauto">
                        <el-input v-model="formLine.cantautoinfo"
                                  placeholder="请输入该事件不可由自动化任务解决的原因"></el-input>
                    </el-form-item>

                    <el-form-item label="未自动化" label-width="120px" class="normal" v-if="notautoyet">
                        <el-input v-model="formLine.notautoyetinfo"
                                  placeholder="请输入该事件纳入自动化计划"></el-input>
                    </el-form-item>

                    <el-form-item label="监控类别:" label-width="200px" class="normal">
                        <el-select v-model="formLine.monitor_name" clearable  filterable style="width:200px;"
                                   :disabled="editStatus">
                            <el-option v-for="item in monitor_info"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="告警是否来自一体化平台:" class="normal" label-width="200px">
                        <el-radio-group style="margin-left: 5px;" v-model="formLine.if_icube" >
                            <el-radio :label="8">是</el-radio>
                            <el-radio :label="9">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <el-row style="margin-top: 10px">
                    <el-col :offset="30" :span="20">
                        <el-button size="small" type="primary" @click="returnn" style="margin-left: 800px">返回
                        </el-button>
                        <el-button size="small" type="primary" @click="submit"
                                   v-if="formLine.dealer==user || !formLine.dealer">提交
                        </el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var unique = function (array) {
            let obj = {};
            return array.filter(function (item, index, array) {
                return obj.hasOwnProperty(item.bk_host_innerip) ? false : (obj[item.bk_host_innerip] = true)
            })
        };

        var keyArray = {
            alarmType: [
                {label: '日志告警', value: '2'},
                {label: '指标告警', value: '1'},
                {label: '日志和指标告警', value: '0'},
            ],
            influenceLevel: [
                {label: '低', value: '1'},
                {label: '中', value: '2'},
                {label: '高', value: '3'}
            ],
            //事件类型
            eventType: [
                {label: '严重', value: '1'},
                {label: '主要', value: '2'},
                {label: '次要', value: '2'},
            ]
        };
        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: "#alarmEdit",
            data() {
                return {
                    taskData2: {
                        slectValue: "",
                        tabelData: [],
                        description: '',
                        options: [],
                        tabelshowData: []
                    },
                    systemListCmdb:[],
                    errorMachine: [],
                    machineBiz: "",
                    machineListFlag: 1,
                    machineList: [],
                    NodeMachineList: [],
                    currentPage2: 1,
                    dialogContent: 'machine',
                    alarmchange: false,
                    notbkalarm: false,
                    havemonitor: false,
                    notmonitor: false,
                    autochange: false,
                    notbkauto: false,
                    cantauto: false,
                    notautoyet: false,
                    newlabel: "",
                    dellabel: "",
                    addlabelshow: false,
                    dellabelshow: false,
                    dellabelname: "",
                    configureData: [],
                    defaultProps: {
                        children: 'children',
                        label: 'label',
                        required: false
                    },
                    loading: false,
                    centerDialogVisible: false,
                    user: '',
                    popshow: false,
                    auto_radio: '',
                    activeName: "first",
                    activeClass: '',
                    options: [],
                    autotaskOptions: [],
                    autosysOptions: [],
                    monitor_info: [],
                    partAlarmList: [],// 具体指标
                    preliminaryAnalysisOptions: [],//事件初步原因列表
                    systemList: [],
                    labelList: [],
                    eventTypeOp: keyArray.eventType,
                    urgency_degreeOp: keyArray.influenceLevel,
                    programOp: keyArray.programLevel,
                    alarmTotalOp: keyArray.alarmTotalType,
                    priorityOp: keyArray.priority,
                    report_source: keyArray.ReportSource,
                    alarmTypeOp: keyArray.alarmType,
                    selectData: [],
                    gridData: [],
                    alarmDisplay: [],
                    formLine: {
                        alarm_type:'',
                        alarm_system:[],
                        alarm_time:'',
                        recover_time:'',
                        alarm_summary:'',
                        if_interpose:'',
                        solve_process:'',
                        if_workday:'',
                        if_auto:'',
                        auto_sysname:'',
                        auto_name:'',
                        other_autoname:'',
                        cantautoinfo: '',
                        notautoyetinfo: '',
                        monitor_name:'',
                        if_icube:'',
                    },
                    editStatus: false,
                    dealerStatus: true,
                    showStatus: '',
                    type: '',
                    checking_one: '1',
                    checking_two: ''
                }

            },

            mounted() {
                let vm = this;
                let data = window.localStorage.getItem('alarm_info')?JSON.parse(window.localStorage.getItem('alarm_info')):'';
                if (!!data) {
                    this.type = "edit"
                    if (data.show_src == 1) {
                        this.showStatus = true
                    } else {
                        this.showStatus = false
                    }
                    //data.urgency_degree = formatToId(data.urgency_degree, keyArray.influenceLevel)
                    //data.priority = formatToId(data.priority, keyArray.priority)
                    //data.event_type = formatToId(data.event_type, keyArray.eventType)
                    this.formLine = data;
                } else {
                    this.type = "new";
                    //this.editStatus = false;
                    //this.showStatus = false;
                    //this.activeClass = "activeClass"
                }
                this.getuser();
                this.getAutoList();
                this.getPrimaryList();
                //this.getSystem();
                this.getAlarmTitle();
                this.system_cmdb()
                if (data.if_auto == '5') {
                        this.autochange = true;
                        this.notbkauto = false;
                        this.cantauto = false;
                        this.notautoyet = false
                    } else if (data.if_auto == '6') {
                        this.autochange = false;
                        this.notbkauto = true;
                        this.cantauto = false;
                        this.notautoyet = false
                    } else if (data.if_auto == '7') {
                        this.autochange = false;
                        this.notbkauto = false;
                        this.cantauto = false;
                        this.notautoyet = true
                    } else if (data.if_auto == '10') {
                        this.autochange = false;
                        this.notbkauto = false;
                        this.cantauto = true;
                        this.notautoyet = false
                    }
            },

            computed: {
                //计算具体指标

                computedAutosysOptions() {
                    for (let i of this.autotaskOptions) {
                        if (i.value == this.formLine.auto_sysname) {
                            return i.label
                            break;
                        }
                    }
                }

            },


            methods: {
                getSubDate() {
                    let result = "无"
                    if (this.formLine.recover_time && this.formLine.alarm_time) {
                        let date1 = new Date(this.formLine.recover_time)
                        let date2 = new Date(this.formLine.alarm_time)
                        let dateDiff = date1.getTime() - date2.getTime();//时间差的毫秒数
                        let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
                        let leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
                        let hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数//计算相差分钟数
                        let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
                        let minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数//计算相差秒数
                        let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
                        let seconds = Math.round(leave3 / 1000)
                        result = dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
                    }
                    return result;
                },
                system_cmdb(){
                    axios.get('${SITE_URL}system_cmdb/').then(res => {
                        res = res.data;
                        this.systemListCmdb = res
                    })
                },
                dellabeldialog(e, label) {
                    e = e || window.event
                    e.stopPropagation()
                    this.dellabelshow = true
                    this.dellabelname = label
                },
                changeAlarm(value) {
                    this.formLine.failure_analysis.notbkalarminfo = ''
                    this.formLine.failure_analysis.havemonitorinfo = ''
                    this.formLine.failure_analysis.notmonitorinfo = ''
                    this.alarmDisplay = ''
                    if (value == '1') {
                        this.alarmchange = true
                        this.notbkalarm = false
                        this.havemonitor = false
                        this.notmonitor = false
                    } else if (value == '7') {
                        this.alarmchange = false
                        this.notbkalarm = true
                        this.havemonitor = false
                        this.notmonitor = false
                    } else if (value == '2') {
                        this.alarmchange = false
                        this.notbkalarm = false
                        this.havemonitor = true
                        this.notmonitor = false
                    } else if (value == '3') {
                        this.alarmchange = false
                        this.notbkalarm = false
                        this.havemonitor = false
                        this.notmonitor = true
                    }
                },


                // 自动化单选切换组件
                changeAuto(value) {
                    this.formLine.other_autoname = '';
                    this.formLine.cantautoinfo = '';
                    this.formLine.notautoyetinfo = '';
                    this.formLine.auto_sysname = '';
                    this.formLine.auto_name = '';
                    if (value == '5') {
                        this.autochange = true
                        this.notbkauto = false
                        this.cantauto = false
                        this.notautoyet = false
                    } else if (value == '6') {
                        this.autochange = false
                        this.notbkauto = true
                        this.cantauto = false
                        this.notautoyet = false
                    } else if (value == '7') {
                        this.autochange = false
                        this.notbkauto = false
                        this.cantauto = true
                        this.notautoyet = false
                    } else if (value == '10') {
                        this.autochange = false
                        this.notbkauto = false
                        this.cantauto = false
                        this.notautoyet = true
                    }
                },

                handleSelectionChange(selection) {
                    this.selectData[0] = []
                    selection.map((item, index) => {
                        this.selectData[0].push({
                            alarm_info: item.alarm_info,
                            alarm_title: item.alarm_title,
                            alarm_time: item.alarm_time
                        })
                    })
                },
                chooseErrorMachine() {
                    this.machineList = []
                    newKeys = this.$refs.tree.getCheckedKeys(true)
                    const removeDuplicateItems = arr => [...new Set(arr)];
                    newKeys = removeDuplicateItems(newKeys)
                    this.NodeMachineList = unique(this.NodeMachineList)
                    for (let i of newKeys) {
                        this.NodeMachineList.map(item => {
                            if (item.bk_host_innerip == i) {
                                this.machineList.push(item)
                            }
                        })
                    }
                    let errorMachineList = []
                    for (var i = 0; i < newKeys.length; i++) {
                        errorMachineList.push({machine_ip: newKeys[i]})
                    }
                    this.formLine.failure_analysis.actual_phenomenon = errorMachineList
                    this.centerDialogVisible = false
                },

                project_team_change() {
                    if (this.formLine.second_category && this.formLine.third_category) {
                        this.formLine.second_category = ''
                        this.formLine.third_category = ''
                    }
                    if (this.formLine.second_category) {
                        this.formLine.second_category = ''
                    }
                    if (this.formLine.failure_cause_preliminary_analysis) {
                        this.formLine.failure_cause_preliminary_analysis = ''
                    }
                },

                project_team_change2() {
                    if (this.formLine.third_category) {
                        this.formLine.third_category = ''
                    }
                },

                project2() {
                    if (this.formLine.failure_analysis.detail_alarm) {
                        this.formLine.failure_analysis.detail_alarm = ''
                    }
                },

                project_team_autosys() {
                    if (this.formLine.auto_name) {
                        this.formLine.auto_name = ''
                    }
                },


                //获取自动化平台
                getAutoList() {
                    axios.get('${SITE_URL}auto/').then(res => {
                        res = res.data
                        this.autotaskOptions = res.job_list
                        this.autosysOptions = res.plat_form
                    })

                },
                getAlarmTitle() {
                    axios.get('${SITE_URL}getalarminfo/').then(res => {
                        this.monitor_info = res.data
                    })
                },
                //获取初步分析列表
                getPrimaryList() {
                    axios.get('${SITE_URL}firstcate_analysis/').then(res => {
                        res = res.data
                        this.preliminaryAnalysisOptions = res[1]
                    })
                },
                getSystem() {
                    axios.get('${SITE_URL}system/').then(res => {
                        res = res.data
                        this.systemList = res
                    })
                },

                sureDelete(id) {
                    let vm = this
                    let data = {item: id, event_number: this.formLine.event_number}
                    axios.post('${SITE_URL}delete_search/', data).then((res) => {
                        vm.alarmDisplay = []
                        vm.alarmDisplay = res.data
                        vm.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                },


                //单个选中
                checked(data) {
                    let dataNodes = this.$refs.tree.getNode(data.id)
                    if (dataNodes.level == 2 && dataNodes.checked) {
                        this.getNodeMachineChild(data)
                    }

                },

                //配置平台checkBox选中状态触发
                checkedChange(data) {
                    //事件过滤防止选中触发请求
                    //required为已经求过的
                    if (data.required) {
                        return false
                    } else {
                        if (data.children == null && data.children == undefined) {
                            return false
                        }
                    }
                    //在dom渲染完成后进行选中节点的获取
                    this.$nextTick(() => {
                        //配置平台
                        //获取所选中的节点
                        let nodes = this.$refs.tree.getCheckedNodes()
                        let node
                        //对选中的节点进行遍历
                        for (let i of nodes) {
                            node = ""
                            //得到Node节点的状态
                            node = this.$refs.tree.getNode(i.id)
                            //当且仅当节点为选中状态和节点的层级为2，且节点的childeren节点长度为0时请求
                            if (node.checked && node.level == 2 && node.childNodes.length == 0 && !node.data.required) {
                                //请求节点下的ip数据
                                this.getNodeMachineChild(i)
                            }
                        }
                    })
                },

                handleSelectionChange2(selection) {
                    this.selectData[this.currentPage2] = [];
                    selection.map((item, index) => {
                        this.selectData[this.currentPage2].push(item.bk_host_innerip)
                    })
                },
                handleCurPageChange2() {
                    let arr = [];
                    if (!!this.selectData[this.currentPage2]) {
                        this.selectData[this.currentPage2].map(item => {
                            arr = arr.concat(this.taskData2.tabelshowData.filter(item2 => {
                                return item2.bk_host_innerip == item
                            }))
                        })
                    }
                    this.toggleSelection(arr)
                },


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


                handleCurrentChange0(val) {
                    if (this.currentPage0 != val) {
                        this.currentPage0 = val
                    }
                    if (val == 1) {
                        this.tabelshowData = this.machineList.slice(0, this.pageSize0)
                    } else {
                        let prev = (this.pageSize0) * (val - 1),
                            next = ((this.pageSize0) * val)
                        this.tabelshowData = []
                        this.tabelshowData = this.machineList.slice(prev, next)
                    }
                },

                handleCurrentChange1(val) {
                    if (this.currentPage1 != val) {
                        this.currentPage1 = val
                    }
                    if (val == 1) {
                        this.tabelshowData = this.machineList.slice(0, this.pageSize1)
                    } else {
                        let prev = (this.pageSize1) * (val - 1),
                            next = ((this.pageSize1) * val)
                        this.tabelshowData = []
                        this.tabelshowData = this.machineList.slice(prev, next)
                    }
                },
                handleCurrentChange2(val) {
                    if (this.currentPage2 != val) {
                        this.currentPage2 = val
                    }
                    if (val == 1) {
                        this.taskData2.tabelshowData = this.taskData2.tabelData.slice(0, this.pageSize2)
                    } else {
                        let prev = (this.pageSize2) * (val - 1),
                            next = ((this.pageSize2) * val)
                        this.taskData2.tabelshowData = []
                        this.taskData2.tabelshowData = this.taskData2.tabelData.slice(prev, next)
                    }
                    setTimeout(() => {
                        this.handleCurPageChange2()
                    }, 50);
                },

                pophide() {
                    this.popshow = false
                },
                getuser() {
                    axios.get('${SITE_URL}getuser/').then(res => {
                        res = res.data;
                        this.user = res
                    })
                },
                returnn() {
                    window.history.go(-1)
                },

                submit() {
                    if (this.type == "edit") {
                        axios.post('${SITE_URL}edit_alarm/', {'info':this.formLine,'number':window.localStorage.getItem("alarm_number")}).then(res => {
                            if(res.code==0){
                                this.$message({
                                type: 'success',
                                message: res.message
                                });
                            //this.dellabelshow = false
                            //this.getLabel()
                            }else{
                                this.$message({
                                type: 'error',
                                message: res.message
                                 });
                                this.dellabelshow = false
                            }
                        });
                        window.history.go(-1)
                    } else {
                        console.log('新建');
                        axios.post('${SITE_URL}create_alarm/', this.formLine).then(res => {
                            if(res.code==0){
                                this.$message({
                                type: 'success',
                                message: res.message
                                });
                                window.location.href = "${SITE_URL}error_alarm"
                            }else{
                                this.$message({
                                type: 'error',
                                message: res.message
                                 });
                            }

                        })
                    }
                },
            }
        })


    </script>


</%block>
