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);
        }
    });
	
	$("#queryBt").click(function(){
		var keyword = $('#keyword').val();
		let json = {
		    "keyword": keyword
		}
		// 对表格进行重载。id 即 table表格的id
		table.reload('table', {
		    // //设定异步数据接口的额外参数
		    page:{curr : 1}
		    ,where: json
		})
	})
	
	//排序方式下拉选监听
	form.on('select(sortType)', function(data){
	    // data.value得到被选中的值
	    alert(data.value); // 输出：0, 1, 2, 3
	});
	
	
	
    $("#reset").click(function(){
    	$('#keyword').val('');
    	let json = {
    	    "keyword": ''
    	}
		// 对表格进行重载。id 即 table表格的id
    	table.reload('table', {
    	    // //设定异步数据接口的额外参数
    	    page:{curr : 1}
    	    ,where: json
    	})
    })
    

	init(year,month)
	setData(null)
	
	$("#displayType>div").click(function(){
		$("#displayType>div").removeClass("displayTypeDivClick");
		$(this).addClass("displayTypeDivClick");
		
		var text = $(this).text();
		if(text == "照片视图"){
			$("#inspectionTourContent").css("display", "")
			$("#inspectionTourList").css("display", "none")
		}
		if(text == "列表显示"){
			$("#inspectionTourContent").css("display", "none")
			$("#inspectionTourList").css("display", "")
			
			initTable();
		}
	})
});


// 静态数据
  var tableData = [
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
	{id: 1, name: 'N1', personOne: '张三', dayOne: '2024-03-12', personTwo: '张三', dayTwo: '2024-03-12'},
  ];
/**
 * 初始化表格数据
 */
function initTable(){
      // 渲染表格
  table.render({
    elem: '#table',
    // url: "/sys/achievement",
    page: true,
    skin: 'line', // 表格样式
    cols: [[
        {
            title: '序号',
            field: 'zizeng',
            align: 'center',
            type: 'numbers',
        },
        {field:'name', title: '杆塔名称',align: 'center'},
        {field:'personOne', title: '护线员第一次巡视',align: 'center'},
        {field:'dayOne', title: '巡视日期第一次巡视',align: 'center'},
        {field:'personTwo', title: '护线员第二次巡视',align: 'center'},
        {field:'dayTwo', title: '巡视日期第二次巡视',align: 'center'},
    ]],
    data: tableData
  });
     
}
 
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)
		
    })
}


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/userIcon.png" width="18">&nbsp;&nbsp;
						<span style="color: #333333;font-size:12px">张三</span>&nbsp;&nbsp;
						<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;
						<span style="color: #333333;font-size:12px">2024-03-15</span>
					</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/userIcon.png" width="18">&nbsp;&nbsp;
					 	<span style="color: #333333;font-size:12px">张三</span>&nbsp;&nbsp;
					 	<img src="../../../image/calendarIcon.png" width="18">&nbsp;&nbsp;
					 	<span style="color: #333333;font-size:12px">2024-03-15</span>
					 </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
            });
        }
    }
}