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 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(){
    viewList1 = [{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'}]
    $("#firstViewBox").html('');
    let html1 = ``;
    for (let i = 0;i < viewList1.length;i++) {
        html1+= `<div class="viewBox">
                <div class="viewHeader">
                    <img src="../../../image/dataIcon3.png" alt="">
                    <span>${viewList1[i].name}</span>
                </div>
                <div class="viewContent">
                    <img src="../../../image/viewImg.jpg" alt="">
                </div>
                <div class="viewFooter">
                    <i class="layui-icon">&#xe637;</i>
                    2024-03-15
                </div>
            </div>`;
    }
    $("#firstViewBox").append(html1);

    viewList2 = [{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'}]
    $("#secondViewBox").html('');
    let html2 = ``;
    for (let j = 0;j < viewList2.length;j++) {
        html2+= `<div class="viewBox">
                <div class="viewHeader">
                    <img src="../../../image/dataIcon3.png" alt="">
                    <span>${viewList2[j].name}</span>
                </div>
                <div class="viewContent">
                    <img src="../../../image/viewImg.jpg" alt="">
                </div>
                <div class="viewFooter">
                    <i class="layui-icon">&#xe637;</i>
                    2024-03-15
                </div>
            </div>`;
    }
    $("#secondViewBox").append(html2);

    viewList3 = [{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'}]
    $("#specialViewBox").html('');
    let html3 = ``;
    for (let j = 0;j < viewList3.length;j++) {
        html3+= `<div class="viewBox">
                <div class="viewHeader">
                    <img src="../../../image/dataIcon3.png" alt="">
                    <span>${viewList3[j].name}</span>
                </div>
                <div class="viewContent">
                    <img src="../../../image/viewImg.jpg" alt="">
                </div>
                <div class="viewFooter">
                    <i class="layui-icon">&#xe637;</i>
                    2024-03-15
                </div>
            </div>`;
    }
    $("#specialViewBox").append(html3);

    
}