import {layuiObj} from "./index.js";
import {getCurrData} from "../../../public/js/timestamp.js";
import {getSchoolOptions} from "./schoolSearch.js"
import {signEventlist,getPersonClockType} from "./marker/schoolMarker.js";
import {brigade,stationurl} from "../../../public/js/url.js"; 

$("#clockInfoCount>div:nth-child(2)").on('click',function(){
    showSignListPage();
})
var clockHistoryList=[];
function showSignListPage(){
    layuiObj["layer"].open({
        type: 1,
        title: "打卡记录", //不显示标题栏
        // closeBtn: false,
        area: ['1000px', '530px'],
        id: new Date().getTime(), //设定一个id，防止重复弹出
        btnAlign: 'c',
     
        resize:false,
        // moveType: 0, //拖拽模式，0或者1
        content:`<div class="popclockBoxInfo popWindows">
            <div class="clockBoxInfo">
                
                <div class="clockBoxInfoContent">
                    <form class="layui-form" action="" id="clockHistoryForm" lay-filter="clockHistoryForm" >
                        <div class="layui-input-inline">
                            <select name="interest" lay-filter="clockHistorySelect" id="clockHistorySelect" lay-search></select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="clockHistoryStart" placeholder="请输入开始时间" value='${getCurrData()} 00:00:00'>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="clockHistoryEnd" placeholder="请输入结束时间" value='${getCurrData()} 23:59:59'>
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="clockHistoryBtn" style="height:38px !important;line-height:38px !important;">查询</button>
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" id="clockHistoryKeyPointBtn" style="height:38px !important;line-height:38px !important;">重点单位</button>
                        </div>
                    </form>
                    <div class="clockSignList">
                        <table class="layui-hide" id="clockSignTable" lay-filter="clockSignTable"></table>
                    </div>
                </div>
            </div>
        </div>`,
        success:function(){
            renderClockFrom();
            clockSelectEvent();
        }
    })
    
}


function renderClockFrom(){
    $("#clockHistorySelect").html(getSchoolOptions());
    layuiObj.layuiForm.render("select","clockHistoryForm");
    $("#clockHistorySelect").siblings("div.layui-form-select").find("div.layui-select-title").find("input").attr("onfocus","this.select()");

    layuiObj.laydate.render({
        elem: '#clockHistoryStart',
        type: 'datetime',
    });
    layuiObj.laydate.render({
        elem: '#clockHistoryEnd',
        type: 'datetime',
    });
}

function clockSelectEvent(){
    var obj={
        "start":getCurrData()+" 00:00:00",
        "end":getCurrData()+" 23:59:59",
    }
    initClockSignData(obj);
    $("#clockHistoryBtn").on('click',(e)=>{ 
        var data=createSelectClockData()
        initClockSignData(data)
    })
    $("#clockHistoryKeyPointBtn").on('click',(e)=>{
        var data=createSelectClockData();
        data["level"]=30;
        if("station" in data){
            delete data["station"];
        }
        initClockSignData(data)
    })
}

//查询重点单位
function createSelectClockData(){
    var start=$("#clockHistoryStart").val();
    var end=$("#clockHistoryEnd").val();
    var station=$("#clockHistorySelect").find("option:selected").val();
    var data={
        "start":start,
        "end":end
    }
    if(station!="000"){
        data["station"]=station
    }
    return data;
}

function initClockSignData(obj){
    var data={
        "brigade":brigade,
        "year":-1,
        "month":-1,
        "day":-1,
        ...obj
    }
    signEventlist(data).then(res=>{
        clockHistoryList=[];
        var code=res["data"]["code"];
        if(code==0){
            var data=res["data"]["data"];
            clockHistoryList=data;
        }
        showClockTable();
    })
}

function showClockTable(){
    layuiObj.layuitable.render({
        elem:'#clockSignTable',
        data:clockHistoryList,
        toolbar: '#toolbarDemo', // 重点，可默认，也可自己设置按钮
        defaultToolbar: ['filter', 'exports'], // exports为导出按钮
        cols: [[
            {field:'borough', width:"15%", title: '派出所'},
            {field:'detachment', width:"15%", title: '警务区'},
            {field:'station', width:"20%", title: '学校名称'},
            {field:'personName', width:"10%", title: '打卡人员'},
            {field:'personType', width:"10%", title: '人员类型',templet : function(data) {
                return getPersonClockType(data["personType"]);
            }},
            {field:'signTimestamp', width:"20%", title: '打卡时间'},
            {field:'detail', width:"10%", title: '详情',event:'detail',templet : function(data) {
                return `<button type="button" class="layui-btn layui-btn-normal">详情</button>`
            }},
        ]],
        limit:Number.MAX_VALUE // 数据表格默认全部显示
    });
    layuiObj.layuitable.on('tool(clockSignTable)', function (obj) {
        var obj=obj["data"];
        showSchoolClockInfo(obj)
    })
}

function showSchoolClockInfo(item){
    var imgs=""; 
    var div="";
    var imgUrlArr=[];
    var borough=item["borough"]
    var detachment=item["detachment"]
    var station=item["station"];
    var personName=item["personName"];
    var personType=getPersonClockType(item["personType"]);
    var signTimestamp=item["signTimestamp"];
    div+=`<div class="schoolStyle_pop_info">
        <p><span>派出所: </span><span>${borough}</span></p>
        <p><span>警务区: </span><span>${detachment}</span></p>
        <p><span>学校名称: </span><span>${station}</span></p>
        <p><span>打卡人员: </span><span>${personName}</span></p>
        <p><span>人员类型: </span><span>${personType}</span></p>
        <p><span>打卡时间: </span><span>${signTimestamp}</span></p>
    </div>`
    if(item["imageUrls"]!=null&&item["imageUrls"].length>0){
        var imgUrl=JSON.parse(item["imageUrls"]);
        for(var i=0;i<imgUrl.length;i++){
            var url=stationurl+imgUrl[i];
            imgUrlArr.push(url);
            imgs+=`<div class="schoolStyle_pop_img"><img src="${url}" id='hiddenDangerImg${url}' alt="无图片" style="height:260px;"></div>`
        }
    }else{
        imgs+=`<div class="schoolStyle_pop_img"><img src="/" alt="无图片" id='hiddenDangerImg${url}'></div>`
    }
    div+=imgs;
    popSchoolClockDetail(div,imgUrlArr)
}

function popSchoolClockDetail(div,imgUrlArr){
    layuiObj.layer.open({
        type: 1,
        title: "详情", //不显示标题栏
        area: ['auto', '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; id='hiddenDangerImg'">
            ${div}
        </div>`,
        success: function(layero){
            for(var i=0;i<imgUrlArr.length;i++){
                new Viewer(document.getElementById(`hiddenDangerImg${imgUrlArr[i]}`),{
                    url: 'data-original'
                });
            }
        }
    });
}

export {showSchoolClockInfo}