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")
	 getView();
 }
 
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()
		
		
        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){
    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(){
	// ①已上传：展示修改、删除图标，上传日期不可选择，照片信息，杆塔号；颜色为“#52C1F5”；
	// ②未上传：展示上传图标，上传日期可选择，杆塔号，颜色为“#F56C6C”；
	// ③巡护段外：展示修改、删除图标，上传日期不可选择，照片信息，工程名称，杆塔号；颜色为“#FF9900”；
	// ④特巡/值守：展示修改、删除图标，上传日期不可选择，照片信息，备注；颜色为“#73A0FA”；
	// ⑤正在编辑：修改图标绿色背景，可重新上传照片、重新选择日期，编辑即边框闪烁；
	
	
	$("#inspectionTourContent").empty();
	//杆塔集合
    viewList1 = [{name:"正常巡视-第一次巡视"},{name:'#2'},{name:'#3'},{name:'#4'},{name:'#5'},{name:'#6'},{name:'#7'},{name:'#8'},{name:'#9'}]
	//照片集合
	var path = 'http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/c0a62f0b51924a4584ec0c8f011fc2af0074P3wTgy1h3gtizuzvfj30zk0zg7ad.jpg';
	photoList = [{name:'#2', path:path},{name:'#3', path:path},{name:'#4', path:path},{name:'#5', path:path},{name:'#6', path:path},]
	
    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>
				<span style="color:#666666">正常巡视-第一次巡视</span>
				<span style="color:#F56C6C">(负责的巡护区段杆塔)</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span style="color:#999999">注：若需上传负责区域之外的杆塔，请点击</span>
				<span style="color:#0000FF;cursor: pointer;" onclick="patrolOutsideAdd()">巡护段外上传>></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++) {	
		var name = viewList1[i].name.length>2?viewList1[i].name.substring(0,2) + '...': viewList1[i].name;
		html += `<div class="viewBox">
					<div style="width: 100%;height:100%">
						<div class="viewHeader">
							<img src="../../../image/tower_white.png" alt="">
							<span style="width: 33%;" title="${viewList1[i].name}">${name}</span>
							<img src="../../../image/edit_white.png" onclick="towerEdit(this)" style="cursor: pointer;width: 14px;height:16px"  alt="">
							<img src="../../../image/del_white.png" onclick="towerDel(this)" style="cursor: pointer;width: 14px;height:16px" alt="">
						</div>
						<div class="viewContent">`
							var flag = false;
							for (var j = 0; j < photoList.length; j++) {
								if(viewList1[i].name == photoList[j].name){
									//照片存在，直接显示
									html += `<img src="../../../image/viewImg.jpg" alt="" onclick="filePreView('${photoList[j].path}')">`
									flag = true;
									break;
								}
							}
							if(!flag){
								//照片不存在，显示上传照片按钮
								html += `<img src="../../../image/add2.png" style="width:150px;height:150px;border: 1px solid #E9E9E9;backgroubd:#F9F9F9;cursor: pointer;margin-top: 10px;" alt="" onclick="uploadPhoto()">
										<div style="color:#cccccc">上传图片</div>`
							}
							
							html += `<div style="display: none;align-items: center;justify-content: center;position: relative;top:-100%;width:100%;height:100%;z-index:99;background-color: rgba(0,0,0,.2)">
								<button class="layui-btn">
									<i class="layui-icon layui-icon-refresh-3"></i>
									重新上传
								</button>
							</div>
						</div>
						<div class="viewFooter">
							<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;
							2024-03-15
						</div>
					</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>
				<span style="color:#666666">正常巡视-第二次巡视</span>
				<span style="color:#F56C6C">(负责的巡护区段杆塔)</span>
			</div>
			<div id="secondViewBox" style="width: 100%;min-height: 200px;margin-bottom: 20px;display: flex;flex-wrap: wrap;">`
    for (let i = 0;i < viewList2.length;i++) {
		var name = viewList2[i].name.length>2?viewList2[i].name.substring(0,2) + '...': viewList2[i].name;
		html += `<div class="viewBox">
					<div style="width: 100%;height:100%">
						<div class="viewHeader">
							<img src="../../../image/tower_white.png" alt="">
							<span style="width: 33%;" title="${viewList2[i].name}">${name}</span>
							<img src="../../../image/edit_white.png" onclick="towerEdit(this)" style="cursor: pointer;width: 14px;height:16px"  alt="">
							<img src="../../../image/del_white.png" onclick="towerDel(this)" style="cursor: pointer;width: 14px;height:16px" alt="">
						</div>
						<div class="viewContent">
							<img src="../../../image/viewImg.jpg" alt="" onclick="filePreView('${"s.jpg"}')">
							<div style="display: none;align-items: center;justify-content: center;position: relative;top:-100%;width:100%;height:100%;z-index:99;background-color: rgba(0,0,0,.2)">
								<button class="layui-btn">
									<i class="layui-icon layui-icon-refresh-3"></i>
									重新上传
								</button>
							</div>
						</div>
						<div class="viewFooter">
							<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;
							2024-03-15
						</div>
					</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 i = 0;i < viewList3.length;i++) {
		var name = viewList3[i].name.length>2?viewList3[i].name.substring(0,2) + '...': viewList3[i].name;
		html += `<div class="viewBox">
					<div style="width: 100%;height:100%">
						<div class="viewHeader">
							<img src="../../../image/tower_white.png" alt="">
							<span style="width: 33%;" title="${viewList3[i].name}">${name}</span>
							<img src="../../../image/edit_white.png" onclick="towerEdit(this)" style="cursor: pointer;width: 14px;height:16px"  alt="">
							<img src="../../../image/del_white.png" onclick="towerDel(this)" style="cursor: pointer;width: 14px;height:16px" alt="">
						</div>
						<div class="viewContent">
							<img src="../../../image/viewImg.jpg" alt="" onclick="filePreView('${"s.jpg"}')">
							<div style="display: none;align-items: center;justify-content: center;position: relative;top:-100%;width:100%;height:100%;z-index:99;background-color: rgba(0,0,0,.2)">
								<button class="layui-btn">
									<i class="layui-icon layui-icon-refresh-3"></i>
									重新上传
								</button>
							</div>
						</div>
						<div class="viewFooter">
							<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;
							2024-03-15
						</div>
					</div>
					
				</div>`
    }
	html += `</div>`;
    $("#inspectionTourContent").append(html);

    
}

//页面赋值
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
            });
        }
    }
}

//杆塔信息编辑
function towerEdit(event){
	var color = $(event).css("background-color");
	//通过按钮样式判断按钮状态  
	if(color == "rgb(22, 186, 170)"){
		//此为编辑状态
		//呼吸灯效果
		$(event).parent().parent().removeClass("arrow_box");
		//修改按钮背景颜色
		$(event).css("background-color", "");
		//展示编辑按钮
		$(event).parent().next().children("div").css("display","none")
	}else{
		//常规状态
		//呼吸灯效果
		$(event).parent().parent().addClass("arrow_box");
		//修改按钮背景颜色
		$(event).css("background-color", "#16BAAA");
		//展示编辑按钮
		$(event).parent().next().children("div").css("display","flex")
	}
	
}
//杆塔信息删除
function towerDel(event){
	layer.confirm("确定删除吗？", function () {
	})
}

//正常巡视照片导入
function normalInspectionUpload(){
	let height = '99%';
	let width = '70%';
	var index = parent.layer.open({
	    title: ['正常巡视照片导入', 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
	    type: 2,
	    content: './normalInspectionUpload.html',
	    area: [width, height],
	    maxmin: false,
	    success: function (layero, index) {
	        // var myIframe = window[layero.find('iframe')[0]['name']];
	        // myIframe.hideSubmit();
	        // var fnc = myIframe.setData(data.data); //aaa()为子页面的方法
	
	    },
	});
}

//新增特巡结果
function specialPatrolAdd(){
	let height = '99%';
	let width = '60%';
	var index = parent.layer.open({
	    title: ['特巡结果上传', 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
	    type: 2,
	    content: './specialPatrolAdd.html',
	    area: [width, height],
	    maxmin: false,
	    success: function (layero, index) {
	        // var myIframe = window[layero.find('iframe')[0]['name']];
	        // myIframe.hideSubmit();
	        // var fnc = myIframe.setData(data.data); //aaa()为子页面的方法
	
	    },
	});
}

//巡护段外上传
function patrolOutsideAdd(){
	let height = '99%';
	let width = '60%';
	var index = parent.layer.open({
	    title: ['巡视结果上传-巡护范围之外的杆塔', 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
	    type: 2,
	    content: './patrolOutsideAdd.html',
	    area: [width, height],
	    maxmin: false,
	    success: function (layero, index) {
	        // var myIframe = window[layero.find('iframe')[0]['name']];
	        // myIframe.hideSubmit();
	        // var fnc = myIframe.setData(data.data); //aaa()为子页面的方法
	
	    },
	});
}

//上传单张巡视图片
function uploadPhoto(){
	let height = '70%';
	let width = '60%';
	var index = parent.layer.open({
	    title: ['上传巡视图片', 'color:#3B70A1;background-color:#E8ECEB;font-size:20px'],
	    type: 2,
	    content: './uploadPhoto.html',
	    area: [width, height],
	    maxmin: false,
	    success: function (layero, index) {
	        // var myIframe = window[layero.find('iframe')[0]['name']];
	        // myIframe.hideSubmit();
	        // var fnc = myIframe.setData(data.data); //aaa()为子页面的方法
	
	    },
	});
}