let table, layer, form;
let currentType = 1;
let currentBidCode = "";
let xData = [];
let yData_1 = [];
let yData_2 = [];
let pieData = [];
let pieData_1 = [];

// 将setCols函数提取到外部，使其可以被全局访问
function setCols(type) {
    if (type === 1) {
        return [
            { type: "numbers", title: "序号", width: "10%" },
            { field: "projectName", title: "项目名称", align: "center" },
            { field: "taskName", title: "作业任务名称", align: "center" },
            { field: "taskCode", title: "任务编号", align: "center" },
            { field: "planStartTime", title: "计划开始时间", align: "center" },
            { field: "planEndTime", title: "计划完成时间", align: "center" },
            {
                field: "actualStartTime",
                title: "实际开始时间",
                align: "center",
            },
            { field: "actualEndTime", title: "实际完成时间", align: "center" },
            { field: "processDiff", title: "进度偏差", align: "center" },
            { field: "completeEffort", title: "已完成工程量", align: "center" },
            { field: "totalEffort", title: "总工程量", align: "center" },
            { field: "delayActor", title: "延误因素分析", align: "center" },
            {
                field: "resourceMatchStatus",
                title: "资源匹配状态",
                align: "center",
            },
            {
                field: "keyPathFlag",
                title: "关键路径任务标识",
                align: "center",
            },
        ];
    }
    // 可以添加其他type的情况
    return []; // 默认返回空数组
}

layui.use(["layer", "table", "form"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;

    currentBidCode = parent.$("#bidPro").val();
    initTable(currentType, currentBidCode);

    $.ajaxSetup({
        beforeSend: function (xhr, options) {
            var originalSuccess = options.success;
            options.success = function (data, textStatus, jqXhr) {
                data = modifyResponseData(data);
                originalSuccess.apply(this, arguments);
            };
        },
    });
});

function changeData(that, type) {
    currentType = type;
    currentBidCode = parent.$("#bidPro").val();

    $(".ul-box li").each(function () {
        if ($(this).hasClass("check")) {
            $(this).removeClass("check").addClass("nocheck");
        }
    });

    $(that).removeClass("nocheck").addClass("check");

    if ($("#demo2").is(":visible")) {
        initTable(type, currentBidCode);
    }

    $("#right-table-box").removeAttr("style");
    $("#no-data-box").css({ display: "none" });
    $("#right-box").css({ display: "none" });
}

function initTable(type, bidCode) {
    if ($("#demo2").next(".layui-table-view").length > 0) {
        $("#demo2").next(".layui-table-view").remove();
    }

    const url = commonUrl + "screen/largeScreen/tb_project_progress_new/list";
    table.render({
        elem: "#demo2",
        url: url,
        skin: "line",
        page: true,
        height: "full-100",
        headers: {
            decrypt: "decrypt",
            Authorization: token,
        },
        where: {
            bidCode: bidCode,
            type: type,
        },
        response: {
            statusName: "code",
            statusCode: 200,
            countName: "count",
            dataName: "rows",
        },
        cols: [setCols(type)], // 现在可以正确访问setCols函数
        done: function (res, curr, count) {
            if (res.code !== 200 || !res.rows || res.rows.length === 0) {
                layer.msg("暂无数据", { icon: 2 });
            }
        },
        error: function () {
            layer.msg("数据加载失败", { icon: 2 });
        },
    });
}

$(".list-view").click(function () {
    if ($(this).hasClass("active")) return;

    $(".list-view").addClass("active");
    $(".chart-view").removeClass("active");

    $(".chart-box").hide();
    $("#demo2").show();
    initTable(currentType, currentBidCode);
});

$(".chart-view").click(function () {
    if ($(this).hasClass("active")) return;

    $(".list-view").removeClass("active");
    $(".chart-view").addClass("active");

    $("#demo2").hide();
    $("#demo2").next(".layui-table-view").remove();
    $(".chart-box").show();

    initLineChart();
    initPieChart();
});

// 初始化左侧双折线图
function initLineChart() {
    const leftChart = echarts.init(document.getElementById("left-chart"));

    const option = {
        textStyle: {
            color: "#fff",
        },
        title: {
            text: "进度偏差统计",
            textStyle: {
                // 标题文字样式
                color: "#fff", // 标题颜色
                fontSize: 18, // 可以同时设置其他样式
            },
        },
        tooltip: {
            trigger: "axis",
        },
        legend: {
            data: ["计划进度", "实际进度"],
            textStyle: {
                // 图例文字样式
                color: "#fff", // 图例文字颜色
            },
            itemStyle: {
                color: function (name) {
                    return name === "计划进度" ? "#5470C6" : "#FF0000";
                },
            },
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                name: "计划进度",
                type: "line",
                data: yData_1,
                smooth: false,
                lineStyle: {
                    color: "#5470C6",
                    width: 2,
                },
                itemStyle: {
                    color: "#5470C6",
                },
            },
            {
                name: "实际进度",
                type: "line",
                data: yData_2,
                smooth: false,
                lineStyle: {
                    color: "#FF0000", // 红色
                    width: 2,
                },
                itemStyle: {
                    color: "#FF0000",
                },
            },
        ],
    };

    leftChart.setOption(option);

    // 响应式调整
    window.addEventListener("resize", function () {
        leftChart.resize();
    });
}

// 初始化右侧饼图
function initPieChart() {
    const rightChart = echarts.init(document.getElementById("right-chart"));

    const option = {
        title: {
            text: "延误因素分布",
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 18,
            },
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} {b}: {c} ",
        },
        legend: {
            orient: "vertical", // 垂直排列
            right: 60, // 距离右侧 20px
            top: "center", // 垂直居中
            textStyle: {
                color: "#fff", // 图例文字颜色设为白色
            },
            data: ["大气影响", "设备判断延迟", "人员不足", "设计变更", "其他"],
        },
        series: [
            {
                name: "",
                type: "pie",
                radius: ["30%", "50%"], // 内半径 30%，外半径 60%，形成空心效果
                center: ["30%", "50%"], // 确保饼图居中
                avoidLabelOverlap: false,
                label: {
                    show: false, // 隐藏连接线末端的标签
                },
                labelLine: {
                    show: false, // 隐藏连接线
                },
                itemStyle: {
                    borderRadius: 5, // 每块扇形圆角效果
                    borderColor: "#000", // 边框颜色（用于间隙）
                    borderWidth: 1, // 边框宽度（1px 每边，形成 2px 间隙）
                },
                data: [
                    {
                        value: pieData_1[0],
                        name: "大气影响",
                        itemStyle: { color: "#67C23A" },
                    },
                    {
                        value: pieData_1[1],
                        name: "设备判断延迟",
                        itemStyle: { color: "#409EFF" },
                    },
                    {
                        value: pieData_1[2],
                        name: "人员不足",
                        itemStyle: { color: "#E6A23C" },
                    },
                    {
                        value: pieData_1[3],
                        name: "设计变更",
                        itemStyle: { color: "#909399" },
                    },
                    {
                        value: pieData_1[4],
                        name: "其他",
                        itemStyle: { color: "#F56C6C" },
                    },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
        ],
    };

    rightChart.setOption(option);

    // 响应式调整
    window.addEventListener("resize", function () {
        rightChart.resize();
    });
}

// 获取图表数据
function getChartData() {
    const url =
        commonUrl + "screen/largeScreen/tb_project_progress_new/list4chart";
    $.ajax({
        url: url,
        type: "get",
        headers: {
            authorization: sessionStorage.getItem("zhgd_token"),
        },
        success: function (data) {
            console.log(data, "图表数据1===折线图");

            if (data.rows && data.rows.length > 0) {
                // initPieChart(data.rows);

                const result = data.rows;

                result.forEach((item) => {
                    xData.push(item.month);
                    yData_1.push(item.monthValue || 0);
                    yData_2.push(item.monthValue2 || 0);
                });
            }
        },
    });
    const url2 =
        commonUrl + "screen/largeScreen//tb_project_progress_new/list4bing";
    $.ajax({
        url: url2,
        type: "get",
        headers: {
            authorization: sessionStorage.getItem("zhgd_token"),
        },
        success: function (data) {
            console.log(data, "图表数据2===饼图");

            if (data.rows && data.rows.length > 0) {
                const result = data.rows;

                result.forEach((item) => {
                    pieData.push(item.category);
                    pieData_1.push(item.monthValue || 0);
                });
            }
        },
    });
}

getChartData();