var table,form,layer,laydate,element;
var currentDate = new Date();
var tabList=[];
var month = currentDate.getMonth() + 1;//当前第几月
var year = currentDate.getFullYear();
layui.use(['form','layer','table','laydate','element'], function () {
    table = layui.table;
    form = layui.form;
    layer = layui.layer;
    laydate = layui.laydate;
    element = layui.element;
    
    // 渲染时间选择器
    laydate.render({
        elem:'#month', //指定元素  元素选择器
        type:'month',  //选择时间类型 可选值:year(年) month(年月)  date(年月日)  time(时分秒)  datetime(年月日时分秒)
        trigger:'click',
        format: 'yyyy-MM',
        btns:['now','confirm'], //选择框右下角显示的按钮 清除-现在-确定
        value: formatCurrentMonth(), // 如果你想预设当前日期为选中状态
        done: function (value, date) {//时间回调
            console.log(date)
            init(date.year,date.month);
        }
    });
    
    function formatCurrentMonth() {
        var date = new Date();
        var month = date.getMonth() + 1; // 注意月份是从0开始的，所以加1
        return date.getFullYear() + '-' + (month < 10 ? '0' + month : month);
    }

    //监听Tab切换，以改变地址hash值
    // element.on('tab(projectTab)', function(data){
    //     console.log(data)
    //     console.log(tabList[data.index])
    //     // tabIndex = data.index;
    //     getView()
    // });
});
 
 
function setData(data){
	$("#username").text(data.data.userName);
	$("#tel").text(data.data.tel);
	
	$("#allMake").text(data.data.allMake);
	$("#oneMake").text(data.data.oneMake);
	$("#twoMake").text(data.data.twoMake);
	$("#special").text(data.data.special);
	$("#makeMonth").val(data.data.makeMonth);
	
	getView(data)
}

/**
 * 初始化数据
 */
function init(chosenYear,chosenMonth){
    layui.use(['table'], function () {
        let table = layui.table; 
        let daysInMonth = new Date(chosenYear, chosenMonth, 0).getDate();
        console.log(daysInMonth)

        let tableData = [{isWork:['7.1','7.3','7.6','7.8']}]
        let cols = []
        for (let k = 1; k <= daysInMonth; k++) {
            let str = chosenMonth+'.'+k;
            let obj = {field:'isWork', title: str,align: 'center',width:70,
                templet: function(d){
                    if(d.isWork.includes(d.LAY_COL.title)){
                        return `<i class="layui-icon" style="color: red;">&#xe605;</i> `
                    }else{
                        return `<apan></apan>`
                    }
                }}
            cols.push(obj)
        }
        table.render({
            elem: '#isWorkList',
            // url: "/sys/achievement",
            // where: obj,
            skin: 'line', // 表格样式
            cols: [cols],
            data: tableData
        });
        // getTab(chosenMonth)
    })
}


// function getTab(chosenMonth){
//     console.log(chosenMonth)
//     tabList = [{id:'1',projectName:'xxx工程'},{id:'2',projectName:'xxx工程'},{id:'3',projectName:'xxx工程'},{id:'4',projectName:'xxx工程'}]
//     // projectList
//     $("#projectList").html('')
//     let html = ``
//     for (let k = 0; k < tabList.length; k++) {
//         if(k==0){
//             html+= '<li class="layui-this" style="margin-left:20px;">'+ tabList[0].projectName +'</li>';
//         }else{
//             html+= '<li>'+ tabList[k].projectName +'</li>';
//         }
//     }
//     $("#projectList").append(html);
//     getView()
// }

function getView(data){
	var oneMakeList = data.data.oneMakeList;
    $("#firstViewBox").html('');
    let html1 = ``;
    for (let i = 0;i < oneMakeList.length;i++) {
		var color;
		var proNameHtml;
		var height;
		var imgHeight;
		if(oneMakeList[i].makeType == "0"){
			//巡视计划内
			color = "#52C1F5";
			proNameHtml = ""
			height = "220px"
			imgHeight = "210px";
		}else{
			//巡视计划外
			color = "#FF9900";
			proNameHtml = `
				<div class="viewFooter">
				    <i class="layui-icon">&#xe637;</i>
				    ${ oneMakeList[i].proName }
				</div>
			`;
			height = "196px";
			imgHeight = "186px";
		}
        html1+= `<div class="viewBox">
                <div class="viewHeader" style="background-color: ${color};">
                    <img src="../../../image/dataIcon3.png" alt="">
                    <span>${oneMakeList[i].gtName}</span>
                </div>
                <div class="viewContent" style="height: ${ height }">
                    <img src="../../../image/viewImg.jpg" style="height: ${ imgHeight }" alt="">
                </div>
                <div class="viewFooter">
                    <i class="layui-icon">&#xe637;</i>
                    2024-03-15
                </div>
				${ proNameHtml }
            </div>`;
    }
    $("#firstViewBox").append(html1);

    var twoMakeList = data.data.twoMakeList;
    $("#secondViewBox").html('');
    let html2 = ``;
    for (let i = 0;i < twoMakeList.length;i++) {
        var color;
        var proNameHtml;
		var height;
		var imgHeight;
        if(oneMakeList[i].makeType == "0"){
        	//巡视计划内
        	color = "#52C1F5";
        	proNameHtml = "";
        	height = "220px";
			imgHeight = "210px";
        }else{
        	//巡视计划外
        	color = "#FF9900";
        	proNameHtml = `
        		<div class="viewFooter">
        		    <i class="layui-icon">&#xe637;</i>
        		    ${ twoMakeList[i].proName }
        		</div>
        	`;
        	height = "196px";
			imgHeight = "186px";
        }
        html2+= `<div class="viewBox">
                <div class="viewHeader" style="background-color: ${color};">
                    <img src="../../../image/dataIcon3.png" alt="">
                    <span>${twoMakeList[i].gtName}</span>
                </div>
                <div class="viewContent" style="height: ${ height }">
                    <img src="../../../image/viewImg.jpg" style="height: ${ imgHeight }" alt="">
                </div>
                <div class="viewFooter">
                    <i class="layui-icon">&#xe637;</i>
                    2024-03-15
                </div>
        		${ proNameHtml }
            </div>`;
    }
    $("#secondViewBox").append(html2);

    spMakeList = data.data.spMakeList;
    $("#specialViewBox").html('');
    let html3 = ``;
    for (let i = 0;i < spMakeList.length;i++) {
        var color;
        var proNameHtml;
        var height;
        var imgHeight;
        html2+= `<div class="viewBox">
                <div class="viewHeader" style="background-color: #73A0FA;">
                    <img src="../../../image/dataIcon3.png" alt="">
                    <span>${spMakeList[i].gtName}</span>
                </div>
                <div class="viewContent" style="height: 220px">
                    <img src="../../../image/viewImg.jpg" style="height: 210px" alt="">
                </div>
                <div class="viewFooter">
                    <i class="layui-icon">&#xe637;</i>
                    2024-03-15
                </div>
        		${ proNameHtml }
            </div>`;
    }
    $("#specialViewBox").append(html3);

    
}