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:", date)
            init(date.year,date.month);
        }
    });
    
    

	init(year,month)
	setData(null)
	
});

//工程切换
function projectTab(event){
	 //修改所点工程样式
	 $("#projects>div").removeClass("projectsStyle");
	 $(event).addClass("projectsStyle")
	 
	 //获取时间
	 var date = $("#month").val();
	 var year;
	 var month;
	 if(date != ''){
		 //截取年
		 year = date.split("-")[0];
		 //截取月，并去0
		 month = Integer.parseInt(date.split("-")[1]);
	 }else{
		 layer.msg("日期获取错误", { icon: 0 });
		 return;
	 }
	 getView(year, month);
 }
 
function formatCurrentMonth() {
        var date = new Date();
        var month = date.getMonth() + 1; // 注意月份是从0开始的，所以加1
        return date.getFullYear() + '-' + (month < 10 ? '0' + month : month);
    }
/**
 * 初始化数据
 */
function init(chosenYear,chosenMonth){
    layui.use(['table'], function () {
		getView(chosenYear, chosenMonth)
		
        getTab(chosenMonth)
    })
}


function getTab(chosenMonth){
    tabList = [{id:'1',projectName:'xxx工程1'},{id:'2',projectName:'xxx工程2'},{id:'3',projectName:'xxx工程3'},{id:'4',projectName:'xxx工程4'}]
    // projectList
    $("#projects").empty()
    let html = ``
    for (let i = 0; i < tabList.length; i++) {
		var className = ""
		if(i == 0){
			className = "projectsStyle";
		}
		html += `<div class="${className}" onclick="projectTab(this)">
					<span id="${tabList[i].id}">${tabList[i].projectName}</span>
				</div>`
    }
    $("#projects").append(html);
}

function getView(chosenYear, chosenMonth){
	// ①已上传：展示修改、删除图标，上传日期不可选择，照片信息，杆塔号；颜色为“#52C1F5”；
	// ②未上传：展示上传图标，上传日期可选择，杆塔号，颜色为“#F56C6C”；
	// ③巡护段外：展示修改、删除图标，上传日期不可选择，照片信息，工程名称，杆塔号；颜色为“#FF9900”；
	// ④特巡/值守：展示修改、删除图标，上传日期不可选择，照片信息，备注；颜色为“#73A0FA”；
	// ⑤正在编辑：修改图标绿色背景，可重新上传照片、重新选择日期，编辑即边框闪烁；
	
	
	$("#inspectionTourContent").empty();
    viewList1 = [{name:"sss"},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'},{name:'#1'}]
    let html = ``;
	html += `<div style="width: 90%;height: 30px;font-weight: bold;">
				<span style="border: 3px solid #409EFF;width: 20px;height: 10px;margin-left: 2%;margin-right: 1%;"></span>正常巡视-第一次巡视
			</div>
			<div id="firstViewBox" style="width: 100%;min-height: 200px;margin-bottom: 20px;display: flex;flex-wrap: wrap;">`
    for (let i = 0;i < viewList1.length;i++) {
		html += `<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="" onclick="filePreView('${"s.jpg"}')">
					</div>
					<div class="viewFooter">
						<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;
						2024-03-15
					</div>
				</div>`
    }
	html += `</div>`;
	
	
    viewList2 = [{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'},{name:'#2'}]
	html += `<div style="width: 90%;height: 30px;font-weight: bold;">
				<span style="border: 3px solid #409EFF;width: 20px;height: 10px;margin-left: 2%;margin-right: 1%;"></span>正常巡视-第二次巡视
			</div>
			<div id="secondViewBox" style="width: 100%;min-height: 200px;margin-bottom: 20px;display: flex;flex-wrap: wrap;">`
    for (let j = 0;j < viewList2.length;j++) {
		 html += `<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="" onclick="filePreView('${"s.jpg"}')">
					 </div>
					 <div class="viewFooter">
						 <img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;
						 2024-03-15
					 </div>
				 </div>`
    }
	html += `</div>`;
	
	
	
    viewList3 = [{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'},{name:'#3'}]
	html += `<div style="width: 90%;height: 30px;font-weight: bold;">
				<span style="border: 3px solid #409EFF;width: 20px;height: 10px;margin-left: 2%;margin-right: 1%;"></span>特巡 / 值守
			</div>
			<div style="width: 94%;height: 150px;overflow: auto;margin-left: 1.8%;">
				<table id="isWorkList" class="layui-table" lay-skin="row" style="width:100%;"></table>
			</div>
			<div id="specialViewBox" style="width: 100%;min-height: 200px;margin-bottom: 20px;display: flex;flex-wrap: wrap;">`
    for (let j = 0;j < viewList3.length;j++) {
		html += `<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="" onclick="filePreView('${"s.jpg"}')">
					</div>
					<div class="viewFooter">
						<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;
						2024-03-15
					</div>
				</div>`
    }
	html += `</div>`;
    $("#inspectionTourContent").append(html);

	
    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
    });
}

//页面赋值
function setData(data){
	$("#username").text("张三");
	$("#phone").text("15856564578");
	$("#num").text("60");
	$("#oneNum").text("16");
	$("#twoNum").text("16");
	$("#otherNum").text("16");
}

//文件查看
//查看附件详情
function filePreView(url) {
    if(url != "" && url != null){
        var suffix = url.split(".")[1];
        if(suffix == "mp4"){
            localStorage.setItem("filePath", url);
            var height = '99%';
            var width = '70%';
            var index = parent.layer.open({
                title: ["查看", 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
                type: 2,
                content: '../../videoPlay.html',
                area: [width, height],
                maxmin: false
            });
        }else{
            // localStorage.setItem("filePath", url);
            // localStorage.setItem("fileName", fileName);
            // localStorage.setItem("fileTime", time);
            var height = '99%';
            var width = '70%';
            var index = parent.layer.open({
                title: ["查看", 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
                type: 2,
                content: '../../photoView.html',
                area: [width, height],
                maxmin: false
            });
        }
    }
}