////////////////////////////////////////////////////////////////////////////////////////
//Document Ready
////////////////////////////////////////////////////////////////////////////////////////
function execDocReady() {

	var pluginGroups = [
		[	"../reference/light-blue/lib/vendor/jquery.ui.widget.js",
			"../reference/light-blue/lib/vendor/http_blueimp.github.io_JavaScript-Templates_js_tmpl.js",
			"../reference/light-blue/lib/vendor/http_blueimp.github.io_JavaScript-Load-Image_js_load-image.js",
			"../reference/light-blue/lib/vendor/http_blueimp.github.io_JavaScript-Canvas-to-Blob_js_canvas-to-blob.js",
			"../reference/light-blue/lib/jquery.iframe-transport.js",
			"../reference/light-blue/lib/jquery.fileupload.js",
			"../reference/light-blue/lib/jquery.fileupload-fp.js",
			"../reference/light-blue/lib/jquery.fileupload-ui.js"],

		[	"../reference/jquery-plugins/select2-4.0.2/dist/css/select2_lightblue4.css",
			"../reference/jquery-plugins/lou-multi-select-0.9.12/css/multiselect-lightblue4.css",
			"../reference/jquery-plugins/multiple-select-1.5.2/dist/multiple-select-bluelight.css",
			"../reference/jquery-plugins/select2-4.0.2/dist/js/select2.min.js",
			"../reference/jquery-plugins/lou-multi-select-0.9.12/js/jquery.quicksearch.js",
			"../reference/jquery-plugins/lou-multi-select-0.9.12/js/jquery.multi-select.js",
			"../reference/jquery-plugins/multiple-select-1.5.2/dist/multiple-select.min.js"],

		[	"../reference/jquery-plugins/datetimepicker-2.5.20/build/jquery.datetimepicker.min.css",
			"../reference/light-blue/lib/bootstrap-datepicker.js",
			"../reference/jquery-plugins/datetimepicker-2.5.20/build/jquery.datetimepicker.full.min.js",
			"../reference/lightblue4/docs/lib/widgster/widgster.js",
			//d3 변경
			"../reference/jquery-plugins/d3-5.16.0/d3.min.js",
			"../reference/lightblue4/docs/lib/slimScroll/jquery.slimscroll.min.js",
			"../reference/jquery-plugins/timerStyles.js"],

		["../reference/jquery-plugins/dataTables-1.10.16/media/css/jquery.dataTables_lightblue4.css",
			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Responsive/css/responsive.dataTables_lightblue4.css",
			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Select/css/select.dataTables_lightblue4.css",
			"../reference/jquery-plugins/dataTables-1.10.16/media/js/jquery.dataTables.min.js",
			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.min.js",
			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Select/js/dataTables.select.min.js",
			"../reference/jquery-plugins/dataTables-1.10.16/extensions/RowGroup/js/dataTables.rowsGroup.min.js",
			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/dataTables.buttons.min.js",
			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/buttons.html5.js",
			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/buttons.print.js",
			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/jszip.min.js",
			"../reference/jquery-plugins/swiper-11.1.4/swiper-bundle.min.js",
			"../reference/jquery-plugins/swiper-11.1.4/swiper-bundle.min.css",
			"./js/common/swiperHelper.js",
			"./css/customSwiper.css"
		],
		[
		// Apache Echarts
            "../reference/jquery-plugins/echarts-5.4.3/dist/echarts.min.js"
		]
	];

	loadPluginGroupsParallelAndSequential(pluginGroups)
		.then(function() {

			console.log('모든 플러그인 로드 완료');

			//사이드 메뉴 처리
			$('.widget').widgster();
			//setSideMenu("sidebar_menu_product", "sidebar_menu_version_manage");

            // 탑 매뉴
            getTopMenuTime();


            // 일정 분석 차트 랜더
            renderWeaklyProgressChart();
            renderProgressOverviewChart();

            // 범위 분석
            renderOverviewChar();
            renderWeaklyStateChart();

            // 자원 분석
            renderResourceOverviewChart();
            renderWeaklyResourceChart();
		})
		.catch(function(error) {
			console.error('플러그인 로드 중 오류 발생');

			console.log(error);
		}
	);
}
function getTopMenuTime(){
    $.ajax({
        url: "/auth-user/api/arms/mail/report/top-menu/time",
        type: "GET",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        progress: true,
        statusCode: {
            200: function(data) {
                console.log("[mailReport :: getTimeTopMenu] :: => ");
                console.log(data);
                renderTopMenuTime(data);
            }
        }
    });

}

function renderTopMenuTime(data){
    var totalVersions = data.totalVersions;
    $('#totalVersions').text(totalVersions); // 생성된 버전 총 수

    var completedVersions = data.completedVersions;
    $('#completedVersions').text(completedVersions); // 지난 일정

    var ongoingVersions = data.ongoingVersions;
    $('#ongoingVersions').text(ongoingVersions); // 진행 중 일정

    var upcomingVersions = data.upcomingVersions;
    $('#upcomingVersions').text(upcomingVersions); // 남은 일정

    var earliestStart = data.earliestStart;
    $('#start_date').text(earliestStart); // 진행중 버전중 시작일

    var latestEnd = data.latestEnd;
    $('#end_date').text(latestEnd); // 진행중 버전중 시작일

    var daysElapsed = data.daysElapsed;
    $('#remaining_days').text("D-"+daysElapsed); // 경과된 일자

    var elapsedPercentage = data.elapsedPercentage
    $('#progressDateRate').text(elapsedPercentage+"%");

}

function renderWeaklyProgressChart(){
    var chartDom = $("#weakly-progress-chart")[0];
    var myChart = echarts.init(chartDom);

    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
            textStyle: {
                color: '#FFFFFF' // 범례 글자 색상
            }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: {
                color: '#FFFFFF' // x축 글자 색상
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#FFFFFF' // y축 글자 색상
            }
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
    };
    myChart.setOption(option);
}

function renderProgressOverviewChart(){

    var chartDom = $("#progress-overview-chart")[0];
    var myChart = echarts.init(chartDom);
    var option;

    const rawData = [
        [150, 302, 301, 334, 390, 330],
        [320, 132, 101, 134, 90, 230]
    ];
    const totalData = [];
    for (let i = 0; i < rawData[0].length; ++i) {
        let sum = 0;
        for (let j = 0; j < rawData.length; ++j) {
            sum += rawData[j][i];
        }
        totalData.push(sum);
    }

    const grid = {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    };
    const series = ['진척도'].map((name, sid) => {
        return {
            name,
            type: 'bar',
            stack: 'total',
            barWidth: '60%',
            label: {
                show: true,
                position: 'insideRight',
                formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
            },
            data: rawData[sid].map((d, did) =>
            totalData[did] <= 0 ? 0 : d / totalData[did])
        };
    });
    option = {
        legend: {
            textStyle: {
                    color: '#FFFFFF' // 레전드 글자 색상 (진척도 하얀색 표시)
            },
            data: ['진척도']
        },
        grid,
        xAxis: {
            type: 'value',
            axisLabel: {
                color: '#FFFFFF' // 각도 축 글자 색상
            }
        },
        yAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E', 'F'],
            axisLabel: {
                color: '#FFFFFF' // 각도 축 글자 색상
            }
        },
        series
    };
    myChart.setOption(option);
}

function renderOverviewChar(){
    var chartDom = $("#state-overview-chart")[0];
    var myChart = echarts.init(chartDom);
    var option = {
        angleAxis: {
            type: 'category',
            data: ['제품1', '제품2', '제품3', '제품4'], // 4개의 카테고리
            axisLabel: {
                color: '#FFFFFF' // 각도 축 글자 색상
            }
        },
        radiusAxis: {
            axisLabel: {
                color: '#FFFFFF' // 반지름 축 글자 색상
            }
        },
        polar: {
            center: ['50%', '55%'] // Polar의 중심 위치 조정
        },
        series: [
            {
                type: 'bar',
                data: [1, 2, 3, 4],
                coordinateSystem: 'polar',
                name: '열림',
                stack: 'a',
                emphasis: {
                    focus: 'series'
                }
            },
            {
                type: 'bar',
                data: [2, 4, 6, 1],
                coordinateSystem: 'polar',
                name: '진행중',
                stack: 'a',
                emphasis: {
                    focus: 'series'
                }
            },
            {
                type: 'bar',
                data: [1, 2, 3, 4],
                coordinateSystem: 'polar',
                name: '완료됨',
                stack: 'a',
                emphasis: {
                    focus: 'series'
                }
            },
            {
                type: 'bar',
                data: [1, 2, 3, 4],
                coordinateSystem: 'polar',
                name: '닫힘',
                stack: 'a',
                emphasis: {
                    focus: 'series'
                }
            }
        ],
        legend: {
            show: true,
            data: ['열림', '진행중', '완료됨', '닫힘'], // 범례 데이터와 시리즈 이름 일치
            textStyle: {
                color: '#FFFFFF' // 범례 글자 색상
            },
            left: 'center', // 범례를 중앙에 배치
            itemGap: 15 // 범례 항목 간의 간격 설정
        },
        tooltip: {
            trigger: 'item'
        }
    };

    myChart.setOption(option);
}

function renderWeaklyStateChart(){
    var chartDom = $("#weakly-state-chart")[0];
    var myChart = echarts.init(chartDom);
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Email',
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Search Engine',
          type: 'bar',
          data: [862, 1018, 964, 1026, 1679, 1600, 1570],
          emphasis: {
            focus: 'series'
          },
          markLine: {
            lineStyle: {
              type: 'dashed'
            },
            data: [[{ type: 'min' }, { type: 'max' }]]
          }
        },
        {
          name: 'Baidu',
          type: 'bar',
          barWidth: 5,
          stack: 'Search Engine',
          emphasis: {
            focus: 'series'
          },
          data: [620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
          name: 'Google',
          type: 'bar',
          stack: 'Search Engine',
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 290, 230, 220]
        },
        {
          name: 'Bing',
          type: 'bar',
          stack: 'Search Engine',
          emphasis: {
            focus: 'series'
          },
          data: [60, 72, 71, 74, 190, 130, 110]
        },
        {
          name: 'Others',
          type: 'bar',
          stack: 'Search Engine',
          emphasis: {
            focus: 'series'
          },
          data: [62, 82, 91, 84, 109, 110, 120]
        }
      ]
    };

    myChart.setOption(option);
}

function renderResourceOverviewChart(){
    var chartDom = $("#resource-overview-chart")[0];
    var myChart = echarts.init(chartDom);
    var option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center',
        textStyle: {
          color: '#ffffff' // 범례 글씨 흰색
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold',
              color: '#ffffff' // 강조 시 레이블 글씨 흰색
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    };
    myChart.setOption(option);
}

function renderWeaklyResourceChart() {
    var chartDom = $("#weekly-resource-chart")[0];
    var myChart = echarts.init(chartDom);

    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
            textStyle: {
                color: '#FFFFFF' // 범례 글자 색상
            }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: {
                color: '#FFFFFF' // x축 글자 색상
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#FFFFFF' // y축 글자 색상
            }
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
    };


    myChart.setOption(option);
}