import { layuiObj,schoolThreeColorAlarmList,getThreeColorAlarmReq} from "../../pages/cmddispatch/js/index.js";
import { stationurl } from "../../public/js/url.js";
import { 
    getThreeColorWarningTitle,
    getPersonProvideDiv,
    getThingProvideDiv,
    getSkillProvideDiv,
    getHeartProvideDiv,
    getSystemProvideDiv,
    getPreventionCaseDiv
 } from "../cmddispatch/getText/threeColorWarning.js";

function showThreeColorAlarm(){
    layuiObj.layer.open({
        type: 1,
        title: '三色预警', //不显示标题栏
        area: ['1360px', '600px'],
        shade: 0.6,
        id:new Date().getTime(), //设定一个id，防止重复弹出
        btnAlign: 'c',
        moveType: 1, //拖拽模式，0或者1
        content: `<div style="padding:10px;color:#fff;background:#032357;height:calc(100% - 20px);overflow-y:auto;">
            <div class="threeColorAlarmInfo">
                <form class="layui-form" action="" id="threeColorAlarmForm" lay-filter="threeColorAlarmForm" >
                    <div class="layui-input-inline">
                        <select name="interest" lay-filter="threeColorAlarmSelect" id="threeColorAlarmSelect" lay-search></select>
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn" id="threeColorAlarmBtn" style="height:38px !important;line-height:38px !important;">查询</button>
                    </div>
                </form>
            </div>
            <div class="staffSignSelectContent threeColorAlarmContent">
                <table class="layui-hide" id="threeColorAlarmTable" lay-filter="threeColorAlarmTable"></table>
            </div>
        </div>`,
        success: function(layero){
            getThreeColorAlarmReq().then(res=>{
                threeColorAlarmFromRender();  
                showThreeColorAlarmContent(schoolThreeColorAlarmList)
                initBoroughSelect()
            })
        }
    });
}

function initBoroughSelect(){
    var boroughArr=[];
    for(var i=0;i<schoolThreeColorAlarmList.length;i++){
        var borough=schoolThreeColorAlarmList[i]["borough"];
        if(boroughArr.indexOf(borough)==-1){
            boroughArr.push(borough);
        }
    }
    var options=`<option value="000">请选择派出所</option>`;
    boroughArr.forEach(item=>{
        options+=`<option value="${item}">${item}</option>`
    })
    $("#threeColorAlarmSelect").html(options);
    layuiObj.layuiForm.render("select","threeColorAlarmForm");
    $("#threeColorAlarmSelect").siblings("div.layui-form-select").find("div.layui-select-title").find("input").attr("onfocus","this.select()");
}

function threeColorAlarmFromRender(){
    $("#threeColorAlarmBtn").on('click',function(e){
        e.preventDefault();
        var borough=$("#threeColorAlarmSelect").find("option:selected").val();
        if(borough=="000"){
            showThreeColorAlarmContent(schoolThreeColorAlarmList);
        }else{
            var arr=[];
            for(var i=0;i<schoolThreeColorAlarmList.length;i++){
                if(schoolThreeColorAlarmList[i]["borough"]==borough){
                    arr.push(schoolThreeColorAlarmList[i]);
                }
            }
            showThreeColorAlarmContent(arr)
        }
    })
}

function getThreeColorBtnLevel(type,value){
    var className="";
    switch(type){
        case "scoreTotal"://总分
            if(value>80){
                className="layui-btn-normal";
            }else{
                className="layui-btn-danger";
            }
            break;
        case "scoreHuman"://人防(20)分
            if((value/20)*100>80){
                className="layui-btn-normal";
            }else{
                className="layui-btn-danger";
            }
            break;
        case "scoreDevices"://物防(20)分
            if((value/20)*100>80){
                className="layui-btn-normal";
            }else{
                className="layui-btn-danger";
            }
            break;
        case "scoreTech"://技防(30)分
            if((value/30)*100>80){
                className="layui-btn-normal";
            }else{
                className="layui-btn-danger";
            }
            break;
        case "scoreDesire"://心防(10)分
            if((value/10)*100>80){
                className="layui-btn-normal";
            }else{
                className="layui-btn-danger";
            }
            break;

        case "scoreScheme"://制度防(20)分
            if((value/20)*100>80){
                className="layui-btn-normal";
            }else{
                className="layui-btn-danger";
            }
            break;
        default:
            break;

    }
    return `<button type="button" class="layui-btn ${className}">${value}</button>`;
}

function getScoreTotalImg(value){
    if(value>80){
        var img="<img src='./pages/cmddispatch/image/colorGreen.png' >";
    }else if(value>60){
        var img="<img src='./pages/cmddispatch/image/colorYellow.png' >";
    }else{
        var img="<img src='./pages/cmddispatch/image/colorRed.png' >";
    }
    return  img;
}

function showThreeColorAlarmContent(data){
    layuiObj.layuitable.render({
        elem:'#threeColorAlarmTable',
        data:data,
        cols: [[
            {field:'station', width:"14%", title: '学校名称'},
            {field:'scoreTotal', width:"8%", title: '安全等级',templet : function(data) {// 替换数据
                return `<div>${getScoreTotalImg(data["scoreTotal"])}</div>`;
            }
            },
            {field:'scoreTotal', width:"7%", title: '总分',event:"7",templet : function(data) {// 替换数据
                return getThreeColorBtnLevel('scoreTotal',data["scoreTotal"]);
            }},
            {field:'scoreHuman', width:"11%", title: '人防(20)分',event:"1",templet : function(data) {// 替换数据
                return getThreeColorBtnLevel('scoreHuman',data["scoreHuman"]);
            }},
            {field:'scoreDevices', width:"11%", title: '物防(20)分',event:"2",templet : function(data) {// 替换数据
                return getThreeColorBtnLevel('scoreDevices',data["scoreDevices"]);
            }},
            {field:'scoreTech', width:"11%", title: '技防(30)分',event:"3",templet : function(data) {// 替换数据
                return getThreeColorBtnLevel('scoreTech',data["scoreTech"]);
            }},
            {field:'scoreDesire', width:"11%", title: '心防(10)分',event:"4",templet : function(data) {// 替换数据
                return getThreeColorBtnLevel('scoreDesire',data["scoreDesire"]);
            }},
            {field:'scoreScheme', width:"11%", title: '制度防(20)分',event:"5",templet : function(data) {// 替换数据
                return getThreeColorBtnLevel('scoreScheme',data["scoreScheme"]);
            }},
            {field:'scoreCase', width:"8%", title: '防范案事件',event:"6",templet : function(data) {// 替换数据
                return `<button type="button" class="layui-btn layui-btn-normal">${data["scoreCase"]}</button>`;
            }},
        ]],
        limit:Number.MAX_VALUE, // 数据表格默认全部显示
        done:function(res, curr, count){
            var data = res.data;//返回的json中data数据
            // console.log(data)
        }
    });
    layuiObj.layuitable.on('tool(threeColorAlarmTable)', function(obj){      
        var event=obj["event"];
        var data=obj["data"]
        threeAlarmScorePage(event,data);
    })
}

function getThreeColorDetail(data){
    var data={
        "station":data["station"]
    }
    var loginurl=stationurl+"/iotserver/school/color_detail/getdetail";
    return axios({
        method: 'post',
        url:loginurl,
        data: data
    })
}

function updateThreeColorValue(){
    currentThreeColorDetail["guarderCount"]=currentThreeColorDetail["guarderCount"]/10;
    currentThreeColorDetail["guarderCert"]=currentThreeColorDetail["guarderCert"]/10;
    currentThreeColorDetail["guarderOverAge"]=currentThreeColorDetail["guarderOverAge"]/10;
    currentThreeColorDetail["peakGuarderArmed"]=currentThreeColorDetail["peakGuarderArmed"]/10;
    currentThreeColorDetail["peakProtectScheme"]=currentThreeColorDetail["peakProtectScheme"]/10;
    currentThreeColorDetail["peakStaff"]=currentThreeColorDetail["peakStaff"]/10;
    currentThreeColorDetail["zoneClosed"]=currentThreeColorDetail["zoneClosed"]/10;
    currentThreeColorDetail["equipCount"]=currentThreeColorDetail["equipCount"]/10;
    currentThreeColorDetail["collision"]=currentThreeColorDetail["collision"]/10;
    currentThreeColorDetail["ipcCover"]=currentThreeColorDetail["ipcCover"]/10;
    currentThreeColorDetail["alarmSystem"]=currentThreeColorDetail["alarmSystem"]/10;
    currentThreeColorDetail["ipcGate"]=currentThreeColorDetail["ipcGate"]/10;
    currentThreeColorDetail["ipcRecord"]=currentThreeColorDetail["ipcRecord"]/10;
    currentThreeColorDetail["lawEducation"]=currentThreeColorDetail["lawEducation"]/10;
    currentThreeColorDetail["conflict"]=currentThreeColorDetail["conflict"]/10;
    currentThreeColorDetail["guarderScheme"]=currentThreeColorDetail["guarderScheme"]/10;
    currentThreeColorDetail["buildingScheme"]=currentThreeColorDetail["buildingScheme"]/10;
    currentThreeColorDetail["fireScheme"]=currentThreeColorDetail["fireScheme"]/10;
    currentThreeColorDetail["dangerousScheme"]=currentThreeColorDetail["dangerousScheme"]/10;
    currentThreeColorDetail["conflictScheme"]=currentThreeColorDetail["conflictScheme"]/10;
    currentThreeColorDetail["guarderPMIScheme"]=currentThreeColorDetail["guarderPMIScheme"]/10;
    currentThreeColorDetail["securityServiceScheme"]=currentThreeColorDetail["securityServiceScheme"]/10;
    currentThreeColorDetail["criminalCase"]=currentThreeColorDetail["criminalCase"]/10;
}

var currentThreeColorDetail=null;
async function threeAlarmScorePage(event,data){
    var threeColorRes=await getThreeColorDetail(data);
    var  threeColorDetail=threeColorRes.data.data;
    currentThreeColorDetail=threeColorDetail;
    updateThreeColorValue();//把回来的数据除以10


    switch(event){
        case "1":
            showPersonProvidePopPage(data);
            break;
        case "2":
            showThingProvidePopPage(data);
            break;
        case "3":
            showSkillProvidePopPage(data);
            break;
        case "4":
            showHeartProvidePopPage(data);
            break;
        case "5":
            showSystemProvidePopPage(data);
            break;
        case "6":
            showPreventionCasePopPage(data);
            break;
        default:
            break;
    }
}

function showPersonProvidePopPage(data){
    layuiObj.layer.open({
        type: 1,
        title:`${data["station"]}-人防`, //不显示标题栏
        area: ['900px', '600px'],
        shade: 0.6,
        id:new Date().getTime(), //设定一个id，防止重复弹出
        btnAlign: 'c',
        moveType: 1, //拖拽模式，0或者1
        content: `<div style="padding:10px;color:#fff;background:#032357;height:calc(100% - 20px);overflow-y:auto;">
            <div class="threeColorAlarmInfoBox">
                ${getThreeColorWarningTitle()}
                ${getPersonProvideDiv(currentThreeColorDetail)}
            </div>    
      
        </div>`,
        success: function(layero){
           
        }
    })
}

function showThingProvidePopPage(data){
    layuiObj.layer.open({
        type: 1,
        title:`${data["station"]}-物防`, //不显示标题栏
        area: ['900px', 'auto'],
        shade: 0.6,
        id:new Date().getTime(), //设定一个id，防止重复弹出
        btnAlign: 'c',
        moveType: 1, //拖拽模式，0或者1
        content: `<div style="padding:10px;color:#fff;background:#032357;height:calc(100% - 20px);overflow-y:auto;">
            <div class="threeColorAlarmInfoBox">
                ${getThreeColorWarningTitle()}
                ${getThingProvideDiv(currentThreeColorDetail)}
            </div>    
      
        </div>`,
        success: function(layero){
           
        }
    })
}

function showSkillProvidePopPage(data){
    layuiObj.layer.open({
        type: 1,
        title:`${data["station"]}-技防`, //不显示标题栏
        area: ['900px', 'auto'],
        shade: 0.6,
        id:new Date().getTime(), //设定一个id，防止重复弹出
        btnAlign: 'c',
        moveType: 1, //拖拽模式，0或者1
        content: `<div style="padding:10px;color:#fff;background:#032357;height:calc(100% - 20px);overflow-y:auto;">
            <div class="threeColorAlarmInfoBox">
                ${getThreeColorWarningTitle()}
                ${getSkillProvideDiv(currentThreeColorDetail)}
            </div>    
      
        </div>`,
        success: function(layero){
           
        }
    })
}

function showHeartProvidePopPage(data){
    layuiObj.layer.open({
        type: 1,
        title:`${data["station"]}-心防`, //不显示标题栏
        area: ['900px', 'auto'],
        shade: 0.6,
        id:new Date().getTime(), //设定一个id，防止重复弹出
        btnAlign: 'c',
        moveType: 1, //拖拽模式，0或者1
        content: `<div style="padding:10px;color:#fff;background:#032357;height:calc(100% - 20px);overflow-y:auto;">
            <div class="threeColorAlarmInfoBox">
                ${getThreeColorWarningTitle()}
                ${getHeartProvideDiv(currentThreeColorDetail)}
            </div>    
      
        </div>`,
        success: function(layero){
           
        }
    })
}

function showSystemProvidePopPage(data){
    layuiObj.layer.open({
        type: 1,
        title:`${data["station"]}-制度防`, //不显示标题栏
        area: ['900px', '600px'],
        shade: 0.6,
        id:new Date().getTime(), //设定一个id，防止重复弹出
        btnAlign: 'c',
        moveType: 1, //拖拽模式，0或者1
        content: `<div style="padding:10px;color:#fff;background:#032357;height:calc(100% - 20px);overflow-y:auto;">
            <div class="threeColorAlarmInfoBox">
                ${getThreeColorWarningTitle()}
                ${getSystemProvideDiv(currentThreeColorDetail)}
            </div>    
      
        </div>`,
        success: function(layero){
           
        }
    })
}

function showPreventionCasePopPage(data){
    layuiObj.layer.open({
        type: 1,
        title:`${data["station"]}-防范案事件`, //不显示标题栏
        area: ['900px', 'auto'],
        shade: 0.6,
        id:new Date().getTime(), //设定一个id，防止重复弹出
        btnAlign: 'c',
        moveType: 1, //拖拽模式，0或者1
        content: `<div style="padding:10px;color:#fff;background:#032357;height:calc(100% - 20px);overflow-y:auto;">
            <div class="threeColorAlarmInfoBox">
                ${getThreeColorWarningTitle()}
                ${getPreventionCaseDiv(currentThreeColorDetail)}
            </div>    
      
        </div>`,
        success: function(layero){
           
        }
    })
}

export {showThreeColorAlarm}