Vue.component("data-focus", {
	data: function () {
		return {
			items: [
				{//範例
					message: '考試院-公務人員考試-五年到考率',
					url: "webMain.aspx?sys=220&funid=A200102&compmode=0,0&outkind=1&outmode=8&fldlst=111111111&codlst0=111&codlst1=undefined&cycle=4&ym=10100&ymt=11000",
					time: "2022-01-04",
					unit:'',
					key: 1
				},
			],
			itemsCarousel:[],
			title: "",
			unit: "",
			columnDefs: [],
			rowData: [],
			rowDataShow: [],
			urlGetRowData: [],
			eGridDiv: {},
			gridOptions: {},
			col: [],
			colShow: [],
			colShowHead: [],
			row: [],
			rowShowHead: [],
			rowCol: [],
			rowColShow: [],
			seriesChartTypes: [],

			circle_index: 0,
			time: null,
			isDown : false,
			move_div : null,
			m_down_x : null,
			m_move_x : null,
			dx : null,
			md_x : null,
			ndx : null,
			showmin:0,
			showmax:999,
		};
	},
	methods: {
		showAgGrid(id, chartTypein, lineString) {
			// let the grid know which columns and what data to use
			this.gridOptions = {
				defaultColDef: {
					sortable: true,
					resizable: true,
					// width: 100,
					enableRowGroup: true,
					enablePivot: true,
					enableValue: true,
					suppressMenu: true
				},
				rowSelection: 'multiple',
				columnDefs: this.columnDefs,
				rowData: this.rowData,
				// rowStyle: {justify-content: center },
				enableRangeSelection: true,
				allowContextMenuWithControlKey: true,
				groupDisplayType: 'singleColumn',
				groupDefaultExpanded: -1,
				pivotMode: true,
				suppressAggFuncInHeader: true,
				suppressExpandablePivotGroups: true,
				autoGroupColumnDef: {
					cellRendererParams: {
						suppressCount: true,
					},
				},
				columnHoverHighlight: true,
				chartThemes: ['ag-vivid'],
				enableCharts: true,
				popupParent: document.body,
				chartThemeOverrides: {
					column: {
						series: {
							strokeWidth: 2,
							fillOpacity: 0.8,
							tooltip: {
								renderer: vm.renderer,
							},
						},
					},
					bar: {
						series: {
							strokeWidth: 2,
							fillOpacity: 0.8,
							tooltip: {
								renderer: vm.renderer,
							},
						},
					},
					line: {
						series: {
							strokeWidth: 5,
							strokeOpacity: 0.8,
						},
					},
					customCombo: {
						series: {
							strokeWidth: 5,
							strokeOpacity: 0.8,
							tooltip: {
								renderer: vm.renderer,
							},
						},
					},
				},
				getChartToolbarItems:function getChartToolbarItems() {
                    return [];
                },
				onFirstDataRendered: function onFirstDataRendered(params) {
					const colIds = params.columnApi
						.getAllDisplayedColumns()
						.map(col => col.getColId());

					var left_line =[];
					var right_groupedColumn =[];
					var chartType = chartTypein;
					
                    var seriesChartTypes = [];

					if (chartType == 'columnLineCombo'){
                        seriesChartTypes = colIds.map(
                            col => {
                            if(col.includes(String(lineString))){
                                left_line.push(col);
                                return {colId: col, chartType: 'line', secondaryAxis: true }
                            }else{
                                right_groupedColumn.push(col);
                                return {colId: col, chartType: 'groupedColumn', secondaryAxis: true }
                            }
                        });
                        if (left_line.length == seriesChartTypes.length-1 || seriesChartTypes.length == right_groupedColumn.length){
                            if (left_line.length == seriesChartTypes.length-1){
                                chartType = 'line';
                            }
                            else {
                                chartType = 'groupedColumn';
                            }
                            seriesChartTypes = [];
                        }
                    }

					if (chartType == 'normalizedColumn' || chartType == 'normalizedBar'){
						console.log(chartType);
						params.api.createPivotChart({
							chartType: chartType,
							chartContainer: document.querySelector("#datalistgridChart"+id),
							chartThemeOverrides: {
								common: {
									legend: {
										enabled: true,
										position: 'bottom',
									}
								},
							},
							suppressChartRanges: false,
						});
					} else {
						if(chartType == ""){
							chartType = 'line';
						}
						params.api.createRangeChart({
							chartType: chartType,
							chartContainer: document.querySelector("#datalistgridChart"+id),
							chartThemeOverrides: {
								cartesian: {
									axes: {
										number: {
											min:0.00,
										},
									},
								},
								common: {
									legend: {
										enabled: true,
										position: 'bottom',
									}
								}
							},
							cellRange: {
								columns: colIds,
							},
							seriesChartTypes:seriesChartTypes,
							suppressChartRanges: false,
						});

					}
				},
			};
			this.eGridDiv = document.querySelector("#datalistgrid"+id);
			new agGrid.Grid(this.eGridDiv, this.gridOptions);
		},
		renderer(params){
			return {
				title: params.xValue,
				content: this.rowDataShow[params.yName][params.yValue],
			};
		},
		showChartRanges(key, url){

			$(".datalist").css("display",'none');

			$("#datalist"+key).css("display",'block');

		},
		getAllMessage() {
			dataJosn = this.getUrlMessageTreeData();
			dataJosnCarouse = this.getUrlMessageTreeCarouselData();
			this.putDataToList(dataJosn);
			this.putDataToCarouse(dataJosnCarouse);
			vm = this;
			setTimeout(() => {
				vm.getAgGridData();
			}, 1);
		},
		getUrlMessageTreeData() {
			let lurl = "webMain.aspx?sys=180&x=2068&x=2068&msgkind=18&json=1";
			return jQuery.parseJSON(getAjaxA(1, lurl, "")).sort((a,b)=>a.grpid-b.grpid);
		},
		getUrlMessageTreeCarouselData() {//輪播
			let lurl = "webMain.aspx?sys=180&x=2068&x=2068&msgkind=16&json=1";
			return jQuery.parseJSON(getAjaxA(1, lurl, "")).sort((a,b)=>a.grpid-b.grpid);
		},
		putDataToList(dataJosn) {
			var vm = this;
			this.items = [];
			var temparray = {};
			var count = 1;
			var title_name = "";
			dataJosn.forEach(function (data, key) {
				temparray = {};
				temparray.key = key+1;
				temparray.message = data.rmk1;
				temparray.url = data.content1.replace("funid2","funid").replace("sys=100","sys=220").replace("rr=","rrww=444")+"&cache=1";
				temparray.time= data.senduser;
				temparray.unit = '';
				temparray.grpid = data.grpid;
				temparray.showNumber = '';
				(vm.items).push(temparray);
			});
		},
		putDataToCarouse(dataJosn) {
			var vm = this;
			this.itemsCarousel = [];
			var temparrayCarousel = {};
			var count = 1;
			var title_name = "";
			JSONdata3 = [];
			JSONdata4 = [];
			dataJosn.forEach(function (data, key) {
				temparrayCarousel = {};
				temparrayCarousel.key = key+1;
				temparrayCarousel.message = data.rmk1;
				temparrayCarousel.url = data.content1.replace("funid2","funid").replace("sys=100","sys=220").replace("rr=","rrww=444")+"&cache=1";
				JSONdata3 = vm.getUrlBuildTreeData(temparrayCarousel.url);
				temparrayCarousel.number = JSONdata3.outdata[0][JSONdata3.orgdata[0].length-1];
				temparrayCarousel.updown = parseFloat(JSONdata3.orgdata[0][JSONdata3.orgdata[0].length-1]) - parseFloat(JSONdata3.orgdata[0][JSONdata3.orgdata[0].length-2]);
				JSONdata4 = vm.getUrlBuildChartTypeData(temparrayCarousel.url);
				temparrayCarousel.url = JSONdata4.helpUrl.replace("funid2","funid").replace("sys=100","sys=220").replace("rr=","rrww=444")+"&cache=1";
				temparrayCarousel.time= data.senduser;
				temparrayCarousel.unit = JSONdata3.unit.replace("單位：","");
				temparrayCarousel.showNumber = '';
				(vm.itemsCarousel).push(temparrayCarousel);
			});
		},
		getAgGridData() {
			var vm =this;
			$.each(this.items, function(index,val) {
				// vm.showChartRanges(val.key, val.url);
				JSONdata = vm.getUrlBuildTreeData(val.url);
				JSONdata2 = vm.getUrlBuildChartTypeData(val.url);
				vm.items[index].unit = JSONdata.unit;
				vm.putDataToHere(JSONdata);
				vm.showAgGrid(val.key, JSONdata2.domain2, JSONdata2.comp);
				vm.showChartRanges(val.key, val.url);
			});
		},
		getUrlBuildTreeData(lurl) {
			// let lurl = "webMain.aspx?sys=220&funid=" + funid;
			return jQuery.parseJSON(getAjaxA(1, lurl, ""));
		},
		getUrlBuildChartTypeData(lurl){
			return jQuery.parseJSON(getAjaxA(1, lurl.replace("sys=220","sys=212").replace("&funid=vueChartRanges",""), ""));
		},
		putDataToHere(JSONdata, JSONdata2) {
			this.title = JSONdata.name;
			this.unit = JSONdata.unit
			this.col = JSONdata.ncol;
			this.colShow = JSONdata.colh;
			this.colShowHead = JSONdata.colhead;
			this.row = JSONdata.nrow;
			this.rowShowHead = JSONdata.rowhead;
			this.rowCol = JSONdata.orgdata;
			this.rowColShow = JSONdata.outdata;

			this.makeColumnDefs();
			this.makeRowData();
		},
		makeColumnDefs() {
			//列的表頭結構
			this.columnDefs = [];
			this.rowShowHead.forEach((rowHead) => {
				if (rowHead != '') {
					this.columnDefs.push({ field: rowHead, rowGroup: true, chartDataType: 'category' });
				}
			});

			//行的表頭結構
			this.colShowHead.forEach((colHead) => {
				if (colHead != '') {
					this.columnDefs.push({  field: colHead, pivot: true, pivotComparator: this.MyColPivotComparator, chartDataType: 'category' });
				}
			});

			//資料的結構
			this.columnDefs.push({  headerName: '', field: "number", filter: false,  aggFunc: 'first', chartDataType: 'series', });
		},
		makeRowData() {
            //顯示資料塞入
            this.rowData = [];
            var colKeyName = '';
            for (lwi = 0; lwi < this.rowCol.length; lwi++) {
                colKeyName = '';
                for (colShowHeadi = 0; colShowHeadi < this.colShowHead.length; colShowHeadi++) {
                    colKeyName += this.col[lwi][colShowHeadi];
                }
                if(!Array.isArray(this.rowDataShow[colKeyName])) {
					this.rowDataShow[colKeyName] = [];
				}
                for (lwj = 0; lwj < this.rowCol[lwi].length; lwj++) {
                    var number = (lwi * this.rowCol[lwi].length) + lwj;
                    this.rowData[number] = {};
                    for (rowShowHeadi = 0; rowShowHeadi < this.rowShowHead.length; rowShowHeadi++) {
                        var keyName = this.rowShowHead[rowShowHeadi];
                        if (keyName != '') {
                            this.$set(this.rowData[number], keyName, this.row[lwj][rowShowHeadi]);
                        }
                    }

                    for (colShowHeadi = 0; colShowHeadi < this.colShowHead.length; colShowHeadi++) {
                        var keyName = this.colShowHead[colShowHeadi];
                        if (keyName != '') {
                            this.$set(this.rowData[number], keyName, this.col[lwi][colShowHeadi]);
                        }
                    }
                    this.rowData[number].number = this.rowCol[lwi][lwj];
                    this.rowDataShow[colKeyName][this.rowCol[lwi][lwj]] = this.rowColShow[lwi][lwj];
                }
            }
		},
		formatNumber(params) {
            var number = params.value;
            var colKeyName = '';
            var colKeyNameLength = params.colDef.pivotKeys.length;
            for (colShowHeadi = 0; colShowHeadi < colKeyNameLength; colShowHeadi++) {
                colKeyName += params.colDef.pivotKeys[colShowHeadi];
            }
            return this.rowDataShow[colKeyName][number];
		},
		MyColPivotComparator(a, b) {
			var requiredOrder = [];
			for (colShowi = 0; colShowi < this.colShow.length; colShowi++) {
				requiredOrder.concat(this.colShow[colShowi]);
			}
			return requiredOrder.indexOf(a) - requiredOrder.indexOf(b);
		},
		numberParser(params) {
			const value = params.newValue;
			if (value === null || value === undefined || value === '') {
				return null;
			}
			return parseFloat(value);
		},
		showVuelist(url){
			var newweburl = url.replace("sys=220&funid=","sys=100&funid=").replaceAll("funid","funid2").replace("funid2","funid");
			window.open(newweburl+"&databutton=1", "mqoutframe");
		},
		showCardlist(small, big){
			this.showmin = small;
			this.showmax = big;
		},

		// down() {

		// 	clearInterval(this.time);
		// 	// console.log(circle_collect);
		// 	// this.move_div = document.querySelector(`${circle_collect} .container`);
		// 	this.move_div = this.$refs.imgAllContainer;

		// 	// 滑鼠點擊不放
		// 	this.isDown = true;


		// 	//獲取滑鼠按下時座標(body相對位子  div絕對位子 )
		// 	// div 絕對位子的座標(pageX,pageY)===整頁的位子嗎!?
		// 	// pageX 是一個由MouseEvent接口返回的相對於整個文檔的x（水平）坐標以像素為單位的只讀屬性。(body)
		// 	console.log(event);
		// 	this.m_down_x = event.pageX;
		// 	// m_down_y = event.pageY;
		// 	console.log('整個頁面的座標(滑鼠點擊的座標):', this.m_down_x);

		// 	// 獲取div座標
		// 	// (offset移動)
		// 	this.dx = this.move_div.offsetLeft;
		// 	// dy = move_div.offsetTop;
		// 	console.log('dx/dy相對於父層的座標!?');
		// 	console.log('dx:', this.dx);


		// 	//獲取滑鼠與div偏移量
		// 	// 滑鼠位子與div位子的差距
		// 	this.md_x = this.m_down_x - this.dx;
		// 	// md_y = m_down_y - dy;

		// 	// 取消move_div的 動畫
		// 	this.move_div.setAttribute('style', 'transition:none');
		// 	// if (this.circle_index) {
		// 	this.move_div.style.left = this.circle_index * (-330) + "px";

		// },
		// //滑鼠移動
		// move() {
		// 	// this.move_div = document.querySelector(`${circle_collect} .container`);
		// 	this.move_div = this.$refs.imgAllContainer;

		// 	//實時更新div的座標
		// 	// 絕對定位(抓取目前的座標) 
		// 	this.dx = this.move_div.offsetLeft;
		// 	// dy = move_div.offsetTop;
		// 	console.log('dx(物件相對於父層的距離):', this.dx);


		// 	//獲取滑鼠移動實時座標(頁面座標==滑鼠座標)
		// 	this.m_move_x = event.pageX;
		// 	// m_move_y = event.pageY;
		// 	console.log('pageX:', this.m_move_x);


		// 	//滑鼠按下時移動才觸發
		// 	if (this.isDown) {
		// 		//獲取新div座標，滑鼠實時座標 - 滑鼠與div的偏移量
		// 		// 一樣是滑鼠座標 - div絕對位子座標
		// 		this.ndx = this.m_move_x - this.md_x;
		// 		// ndy = m_move_y - md_y;

		// 		//把新div座標值賦給div物件
		// 		// 把偏移輛座標 給div(絕對位子)
		// 		this.move_div.style.left = this.ndx + "px";
		// 		// move_div.style.top = ndy + "px";
		// 	}
		// },
		// //滑鼠釋放
		// up() {
		// 	this.isDown = false;
		// 	// 新增動畫
		// 	this.move_div.setAttribute('style', 'transition:.5s');

		// 	// move_div.style.left = dx + "px";
		// 	// dx/(330)取餘數 >=165  index+=1送到更改的函數
		// 	// console.log(this.dx);
		// 	// abs只取正整數
		// 	this.circle_index = Math.round(this.dx / (-330));
			
		// 	if (this.circle_index == 5) this.circle_index = 4;
		// 	if (this.circle_index == -1) this.circle_index = 0;
			
		// 	this.picChange(this.circle_index);
		// 	this.setPicAuto();
		// },

		picChange(index) {

			// let width = 300 + 30;
			// let imgAllContainer = this.$refs.imgAllContainer;

			// let move = `-${width * index}px`;
			// imgAllContainer.setAttribute('style', `left:${move}`);


		},

		selectHandler(index) {
			clearInterval(this.time);

			if ( this.itemsCarousel.length+2 == index){
				this.circle_index = 0;
			} else {
				this.circle_index = index;
			}
			// this.picChange(index);
			// this.setPicAuto();

		},
		selectHandlerNext(index){
			clearInterval(this.time);

			this.circle_index = this.circle_index + index;

			if ( this.itemsCarousel.length+1 == this.circle_index){
				this.circle_index = 0;
			} else if ( this.circle_index < 0){
				this.circle_index = this.itemsCarousel.length;
			}
		},
		setPicAuto() {
			let picAuto = function () {
				if (this.circle_index >= this.itemsCarousel.length-1) {
					this.circle_index = 0;
				}else{
					this.circle_index+=3;
				}
				// this.picChange(this.circle_index);
			}.bind(this);

			this.time = setInterval(picAuto, 5000);


			// console.log(this.time);
		}
	},
	mounted() {
		this.getAllMessage();
		this.setPicAuto();
	},
});



new Vue({
	el: '#wrapper',
	methods: {
		changFontStyleObj(size) {
			document.querySelector(":root").style.fontSize = size + "em";
            SetCookie("allemsize", size);
		},
	},
	mounted() {
		var allemsize = GetCookie("allemsize")?getVal(GetCookie("allemsize")):1;
		this.changFontStyleObj(allemsize);
		var flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
		if (flag){
			$('#accordionSidebar').addClass('toggled');
		}
	},
});

$(document).ready(function() {
    console.log('ready');
    setTimeout(function(){
        
        console.log(4000);
        $('a,input,.ag-row-level-0,.tabindex').keydown(function(e) {
            if (e.key === "Enter") {
                e.target.click();
            }
        });
    }, 4000);
});