// import * as am5 from "@amcharts/amcharts5";
// import * as am5map from "@amcharts/amcharts5/map";
// import am5geodata_worldLow from "@amcharts/amcharts5-geodata/worldLow";
// import { loadMap } from "@amcharts/amcharts5-geodata";
// import am5geodata_lang_cn_ZH from "@amcharts/amcharts5-geodata/lang/cn_ZH";
// import am5geodata_data_countries from "@amcharts/amcharts5-geodata/data/countries";
// import { ElMessage } from 'element-plus'
// import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
// import { useMapStore } from '@/store/index'
// import { storeToRefs } from 'pinia';
// import { Ref, reactive, ref } from "vue";
// import tinycolor from "tinycolor2";

// export default (dom: Ref<HTMLElement|undefined>) => {
//     let root:am5.Root;
//     let chart:am5map.MapChart;
//     let zoomControl:am5map.ZoomControl;
//     let homeButton:am5.Button;
//     let worldSeries:am5map.MapPolygonSeries;
//     let countrySeries:am5map.MapPolygonSeries;
//     const mapStore = useMapStore()
//     const { operaIndex,fillColor,fillType,regions } = storeToRefs(mapStore)
//     const pixelMapper = reactive({
//         lineColor:'',
//         movingObject:undefined as any,
//         drawingLine:false,
//         lineX1:0,
//         lineY1:0,
//         lineX2:0,
//         lineY2:0,
//         tempLine:null as any
//     })

    
//     const handleColor = ()=>{
//         let c = tinycolor(fillColor.value.color.toString(16).padStart(6, '0'));
//         let rgb = c.toRgb();
//         let color = `rgba(${rgb.r},${rgb.g},${rgb.b},${fillColor.value.opacity})`;
//         return color;
//     }

//     const setMapPain = (canDrag:boolean)=>{
//         if(chart){
//             let valX:"translateX" | "none" | "rotateX" | undefined = !canDrag?'translateX':'none'
//             let valY:"translateY" | "none" | "rotateY" | undefined = !canDrag?'translateY':'none'
//             chart.set('panX',valX);
//             chart.set('panY',valY);
//         }
//     }

//     const update = (e:MouseEvent) => {
//         if (pixelMapper.drawingLine) {
//             let zoomLevel = chart.get('zoomLevel')??1;
//             if (pixelMapper.tempLine) {
//                 pixelMapper.tempLine.remove();
//             }
//             pixelMapper.lineX2 = e.offsetX;
//             pixelMapper.lineY2 = e.offsetY;
//             pixelMapper.tempLine = chart.series.push(
//                 am5.Line.new(root, {
//                     stroke: 5,
//                     fill: am5.color(fillColor.value.color),
//                     opacity:fillColor.value.opacity,
//                     data:[{
//                         "x": pixelMapper.lineX1 / zoomLevel,
//                         "y": pixelMapper.lineY1 / zoomLevel
//                       }, {
//                         "x": pixelMapper.lineX2 / zoomLevel,
//                         "y": pixelMapper.lineY2 / zoomLevel
//                       }]
//                 })
//             )
//             //am5.line(pixelMapper.map.container, [(pixelMapper.lineX1 - pixelMapper.map.mapContainer.x) / zoomLevel, (pixelMapper.lineX2 - pixelMapper.map.mapContainer.x) / zoomLevel], [(pixelMapper.lineY1 - pixelMapper.map.mapContainer.y) / zoomLevel, (pixelMapper.lineY2 - pixelMapper.map.mapContainer.y) / zoomLevel], pixelMapper.lineColor, 1, 1 / pixelMapper.map.zoomLevel());
//             //pixelMapper.map.mapContainer.push(pixelMapper.tempLine);
//         }
//         // "@amcharts/amcharts5": "^5.7.2",
// // "@amcharts/amcharts5-fonts": "^5.0.1",
// // "@amcharts/amcharts5-geodata": "^5.1.2",
//         // if (pixelMapper.movingObject) {
//         //     if (Math.abs(pixelMapper.map.mouseY - pixelMapper.startDragY) > 5 || Math.abs(pixelMapper.map.mouseX - pixelMapper.startDragX) > 5) {
//         //         if (pixelMapper.movingObject.locked) {
//         //             var latlng = pixelMapper.map.stageXYToCoordinates(pixelMapper.map.mouseX, pixelMapper.map.mouseY);
//         //             pixelMapper.movingObject.latitude = latlng.latitude;
//         //             pixelMapper.movingObject.longitude = latlng.longitude;
//         //         } else {
//         //             pixelMapper.movingObject.left = pixelMapper.map.mouseX;
//         //             pixelMapper.movingObject.top = pixelMapper.map.mouseY;
//         //         }
//         //         pixelMapper.movingObject.updatePosition();
//         //     }
//         // }
//     }

//     const handleMapClick = (e:MouseEvent)=> {
//         pixelMapper.lineColor = handleColor();
//         pixelMapper.movingObject = undefined;
//         setMapPain(true)
//         let zoomLevel = chart.get('zoomLevel');
//         if (operaIndex.value==2) {
//             if (!pixelMapper.drawingLine) {
//                 pixelMapper.lineX1 = e.offsetX;
//                 pixelMapper.lineY1 = e.offsetY;
//                 pixelMapper.drawingLine = true;
//             } else {
//                 pixelMapper.drawingLine = false;
//                 let latlng1 = chart.invert({x: pixelMapper.lineX1,y: pixelMapper.lineY1});
//                 let latlng2 = chart.invert({x: pixelMapper.lineX2,y: pixelMapper.lineY2});
//                 let geo:GeoJSON.LineString = {
//                     "type": "LineString",
//                     "coordinates": [
//                       [ latlng1.longitude, latlng1.latitude ],
//                       [ latlng2.longitude, latlng2.latitude ]
//                     ]
//                 }
                
//                 let mapLine = am5map.MapLineSeries.new(root,{
//                     geoJSON: geo,
//                     opacity:fillColor.value.opacity,
//                     stroke:am5.color(fillColor.value.color),
                   
//                 });
//                 chart.series.push(mapLine)
//                 //mapLine.chart = pixelMapper.map;
//                 //mapLine.selectedColor = pixelMapper.lineColor;
//                 //mapLine.pixelMapperLine = true;
//                 //pixelMapper.map.dataProvider.lines.push(mapLine);
//                 // mapLine.validate();
//                 // pixelMapper.map.selectObject(mapLine);
//                 // pixelMapper.selectedObject = mapLine;
//                 // PMG.createPopup(mapLine);
//                 // pixelMapper.removeTempLine();
//             }
//         }
//     }

//     const initMap = () => {
//         handleColor()
//         if(dom.value){
//             root = am5.Root.new(dom.value);
//             root.setThemes([
//                 am5themes_Animated.new(root)
//             ]);
            
//             chart = root.container.children.push(
//                 am5map.MapChart.new(root, {
//                     projection: am5map.geoMercator()
//                 })
//             );
//             zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
//             homeButton = zoomControl.children.moveValue(am5.Button.new(root, {
//                 visible:false,
//                 paddingTop: 10,
//                 paddingBottom: 10,
//                 icon:
//                 am5.Graphics.new(root, {
//                     svgPath: "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8",
//                     fill: am5.color(0xffffff)
//                 })
//             }), 0)
//             homeButton.events.on("click", function() {
//                 chart!.goHome();
//                 worldSeries!.show();
//                 countrySeries!.hide();
//                 homeButton!.hide();
//                 mapStore.clearRegion()
//             })

//             worldSeries = chart.series.push(
//                 am5map.MapPolygonSeries.new(root, {
//                     geoJSON: am5geodata_worldLow,
//                     exclude: ["AQ"],
//                     geodataNames:am5geodata_lang_cn_ZH
//                 })
//             );
//             worldSeries.mapPolygons.template.setAll({
//                 tooltipText: "{name}",
//                 interactive: true
//             });

//             countrySeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
//                 visible: false,
//             }));
//             countrySeries.mapPolygons.template.setAll({
//                 // tooltipText: "{name}",
//                 // interactive: true,
//                 stroke: am5.color(0xffffff),
//                 strokeWidth: 0.1
//             });

//             worldSeries.mapPolygons.template.states.create("hover", {
//                 fill: am5.color(0x4bd8b5)
//             });
//             worldSeries.mapPolygons.template.events.on("click", (ev:any) => {
//                 if(operaIndex.value==0){
//                     var dataItem = ev.target.dataItem as any;
//                     let geoName = am5geodata_data_countries[dataItem.dataContext.id].find(x=>x.indexOf("High")!=-1)
//                     var zoomAnimation = worldSeries!.zoomToDataItem(dataItem);
//                     if(zoomAnimation){
//                         zoomAnimation.waitForStop().then((res: any) => {
//                             const geoJSON = loadMap(geoName??'').then(r=>{
//                                 countrySeries!.setAll({
//                                     geoJSON: r
//                                 });
//                                 countrySeries!.show();
//                                 worldSeries!.hide(100);
//                                 homeButton!.show();
//                             }).catch(e=>{
//                                 ElMessage({
//                                     message:`无法加载 ${dataItem.dataContext.name} 的地图`,
//                                     type:'error'
//                                 })
//                             })
//                         })
//                     }
//                 }
//             });
//             countrySeries.mapPolygons.template.events.on('click',(ev:any)=>{
            
//                 if(operaIndex.value!=1) return;
//                 if(fillType.value==2){
//                     if(regions.value && regions.value.length>0){
//                         regions.value.forEach(x=>{
//                             x.dataItem.dataContext.colorWasSet=false
//                         })
//                     }
//                     countrySeries!.mapPolygons.template.setAll({
//                         stroke: am5.color(0xffffff),
//                         strokeWidth: 0.1,
//                         fill: am5.Color.saturate(am5.color(fillColor.value.color), fillColor.value.opacity)
//                     });
//                 }else{
//                     var dataItem = ev.target.dataItem as any;
//                     console.log(countrySeries)
//                     console.log(ev.target)
//                     mapStore.setRegiogn(ev.target)
//                     dataItem.dataContext.colorWasSet=false
//                     ev.target.adapters.add("fill", (fill:any, target:any) => {
//                         var dataContext:any = target!.dataItem!.dataContext!;
//                         if (!dataContext.colorWasSet) {
//                             dataContext.colorWasSet = true;
//                             var color = am5.Color.saturate(am5.color(fillColor.value.color), 1);
//                             target.setRaw("fill", color);
//                             target.setRaw('fillOpacity', fillColor.value.opacity)
//                             return color;
//                         }
//                         else {
//                             return fill;
//                         }
//                     })
//                 }
//             })
//             let zoomLevel = chart.get('zoomLevel')??1;
//             // chart.series.push(
//             //     am5.Line.new(root, {
//             //         stroke: am5.color(fillColor.value.color),
//             //         strokeWidth:5,
//             //         opacity:fillColor.value.opacity,
//             //         userData:[{
//             //             "x": 50 / zoomLevel,
//             //             "y": 50 / zoomLevel
//             //           }, {
//             //             "x": 500 / zoomLevel,
//             //             "y": 500 / zoomLevel
//             //           }]
//             //     })
//             // )
//             let latlng1 = chart.invert({x: 100,y: 100});
//             let latlng2 = chart.invert({x: 100,y: 300});
//             let latlng3 = chart.invert({x: 300,y: 300});
//             let geo:GeoJSON.LineString = {
//                 "type": "LineString",
//                 "coordinates": [
//                     [ latlng1.longitude, latlng1.latitude ],
//                     [ latlng2.longitude, latlng2.latitude ],
//                     [ latlng3.longitude, latlng3.latitude ]
//                 ]
//             }
            
//             let routes:GeoJSON.GeoJSON = {
//                 "type": "FeatureCollection",
//                 "features": [{
//                   "type": "Feature",
//                   "properties": {
//                   },
//                   "geometry": geo
//                 }]
//               };
//             let mapLine = am5map.MapLineSeries.new(root,{
//                 geoJSON: routes,
//                 lineType: "curved",
//                 opacity:fillColor.value.opacity,
//                 stroke:am5.color(0x000000)//am5.color(fillColor.value.color)
//             });
//             mapLine.mapLines.template.setRaw("strokeWidth",5)
//             mapLine.mapLines.template.setRaw("strokeDasharray",20)
//             mapLine.mapLines.template.setRaw("strokeDashoffset",0)
//             mapLine.mapLines.template.setRaw("lineJoin",'round')
//             mapLine.mapLines.template.setRaw("crisp", true);
//             chart.series.push(mapLine)

//         }
//     }

//     return {
//         initMap,
//         handleColor
//     }
// }


// // let root:am5.Root;
// // let chart:am5map.MapChart;
// // let zoomControl:am5map.ZoomControl;
// // let homeButton:am5.Button;
// // let worldSeries:am5map.MapPolygonSeries;
// // let countrySeries:am5map.MapPolygonSeries;

// // export const useMap = (dom:HTMLElement|undefined)=>{
// //     const mapStore = useMapStore()
// //     const { operaIndex,fillColor,fillType,regions } = storeToRefs(mapStore)
// //     if(dom){
// //         root = am5.Root.new(dom);
// //         root.setThemes([
// //             am5themes_Animated.new(root)
// //         ]);
// //         chart = root.container.children.push(
// //             am5map.MapChart.new(root, {
// //                 projection: am5map.geoMercator()
// //             })
// //         );
// //         chart.chartContainer.set("background", am5.Rectangle.new(root, {
// //             fill: am5.color(0xd4f1f9),
// //             fillOpacity: 0
// //         }));
// //         zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
// //         homeButton = zoomControl.children.moveValue(am5.Button.new(root, {
// //             visible:false,
// //             paddingTop: 10,
// //             paddingBottom: 10,
// //             icon:
// //               am5.Graphics.new(root, {
// //                 svgPath: "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8",
// //                 fill: am5.color(0xffffff)
// //               })
// //           }), 0)
// //         homeButton.events.on("click", function() {
// //             chart.goHome();
// //             worldSeries.show();
// //             countrySeries.hide();
// //             homeButton.hide();
// //             mapStore.clearRegion()
// //         })

// //         worldSeries = chart.series.push(
// //             am5map.MapPolygonSeries.new(root, {
// //                 geoJSON: am5geodata_worldLow,
// //                 exclude: ["AQ"],
// //                 geodataNames:am5geodata_lang_cn_ZH
// //             })
// //         );
// //         worldSeries.mapPolygons.template.setAll({
// //             tooltipText: "{name}",
// //             interactive: true
// //         });

// //         countrySeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
// //             visible: false,
// //         }));
// //         countrySeries.mapPolygons.template.setAll({
// //             // tooltipText: "{name}",
// //             // interactive: true,
// //             stroke: am5.color(0xffffff),
// //             strokeWidth: 0.1
// //         });

// //         worldSeries.mapPolygons.template.states.create("hover", {
// //             fill: am5.color(0x4bd8b5)
// //         });
// //         worldSeries.mapPolygons.template.events.on("click", (ev) => {
// //             if(operaIndex.value==0){
// //                 var dataItem = ev.target.dataItem as any;
// //                 let geoName = am5geodata_data_countries[dataItem.dataContext.id].find(x=>x.indexOf("High")!=-1)
// //                 var zoomAnimation = worldSeries.zoomToDataItem(dataItem);
// //                 if(zoomAnimation){
// //                     zoomAnimation.waitForStop().then((res: any) => {
// //                         const geoJSON = loadMap(geoName??'').then(r=>{
// //                             countrySeries.setAll({
// //                                 geoJSON: r
// //                             });
// //                             countrySeries.show();
// //                             worldSeries.hide(100);
// //                             homeButton.show();
// //                         }).catch(e=>{
// //                             ElMessage({
// //                                 message:`无法加载 ${dataItem.dataContext.name} 的地图`,
// //                                 type:'error'
// //                             })
// //                         })
// //                     })
// //                 }
// //             }
// //         });
// //         countrySeries.mapPolygons.template.events.on('click',(ev)=>{
           
// //             if(operaIndex.value!=1) return;
// //             if(fillType.value==2){
// //                 if(regions.value && regions.value.length>0){
// //                     regions.value.forEach(x=>{
// //                         x.dataItem.dataContext.colorWasSet=false
// //                     })
// //                 }
// //                 countrySeries.mapPolygons.template.setAll({
// //                     stroke: am5.color(0xffffff),
// //                     strokeWidth: 0.1,
// //                     fill: am5.Color.saturate(am5.color(fillColor.value.color), fillColor.value.opacity)
// //                 });
// //             }else{
// //                 var dataItem = ev.target.dataItem as any;
// //                 console.log(countrySeries)
// //                 console.log(ev.target)
// //                 mapStore.setRegiogn(ev.target)
// //                 dataItem.dataContext.colorWasSet=false
// //                 ev.target.adapters.add("fill", (fill:any, target:any) => {
// //                     var dataContext:any = target!.dataItem!.dataContext!;
// //                     if (!dataContext.colorWasSet) {
// //                         dataContext.colorWasSet = true;
// //                         var color = am5.Color.saturate(am5.color(fillColor.value.color), 1);
// //                         target.setRaw("fill", color);
// //                         target.setRaw('fillOpacity', fillColor.value.opacity)
// //                         return color;
// //                     }
// //                     else {
// //                         return fill;
// //                     }
// //                 })
// //             }
// //         })

// //         //#region  绘制线条
// //         // let lineSeries = chart.series.push(
// //         //     am5map.MapLineSeries.new(root, {
// //         //         lineType: "straight"
// //         //     })
// //         // );
// //         // lineSeries.mapLines.template.setAll({
// //         //     stroke: am5.color(0xff0000),
// //         //     strokeWidth: 2,
// //         //     strokeOpacity: 0.5
// //         // });
// //         // lineSeries.data.setAll([{
// //         //     "geometry": {
// //         //       "type": "LineString",
// //         //       "coordinates": [
// //         //         [ -73.778137, 40.641312 ],
// //         //         [ -0.454296, 51.470020 ]
// //         //       ]
// //         //     }
// //         //   }]);
// //         //#endregion
// //     }
// // }

// // export const setMapPain = (canDrag:boolean)=>{
// //     if(chart){
// //         let valX:"translateX" | "none" | "rotateX" | undefined = !canDrag?'translateX':'none'
// //         let valY:"translateY" | "none" | "rotateY" | undefined = !canDrag?'translateY':'none'
// //         chart.set('panX',valX);
// //         chart.set('panY',valY);
// //     }
// // }
