<template>
  <div ref="map" style="width: 1600px; height: 551px"></div>
  <div
    style="width: 1231px; height: 72px;  margin-top: -55px; background: linear-gradient(to top, #DAEBFD, #ffffff);margin-left: 182px">
    <div style="width: 1231px; height: 40px; display: flex;justify-content: space-between;">
      <div style="display: flex;align-self: center;">
        <div class="time-btn">
          ⏸
        </div>
        <div class="time-btn">
          ⏹
        </div>
        <div class="time-btn">
          重置
        </div>
      </div>
      <div style="display: flex;align-self: center;">
        <div>
          当前时间：
        </div>
        <input></input>
        <div style="margin: 0 10px 0 40px;color: #04295A;"> 刻度</div>
        <select name="firstSelect" id="firstSelect">
          <option value="option1">周制</option>
        </select>
        <div style="margin: 0 10px 0 40px;color: #04295A;">速率</div>
        <select name="secondSelect" id="secondSelect" style="margin-right: 20px;">
          <option value="optionA">1X</option>
          <option value="optionB">2X</option>
        </select>
      </div>
    </div>

    <div ref=" timeLineChart" style="width: 1231px; height: 30px;background-color: #6091D6;  "></div>
  </div>

</template>

<script>
import * as echarts from "echarts";
import worldJson from "@/assets/json/world.json";

export default {
  name: "MapAnimation",
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 注册自定义地图数据
      echarts.registerMap("China", worldJson);

      const chart = echarts.init(this.$refs.map);

      const option = {
        // timeline: {
        //   autoplay: true,
        //   playInterval: 2000,
        //   data: ["9月23日"]
        // },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "10%",
          top: "10%",
          containLabel: true
        },
        geo: {
          map: "China",
          roam: true,
          label: {
            emphasis: {
              show: false,
              color: "#fff"
            }
          },
          silent: true,
          itemStyle: {
            areaColor: "#F6FAFF",
            borderColor: "#B9DCFF"
          }
        },
        series: [
          {
            name: "行程",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: [
              {
                time: "2025-02-01",
                text: "随美国总统特朗普进行国事访问",
                value: [116.46, 39.92],
                itemStyle: { color: "#ffcc00" }
              },
              {
                time: "2025-02-01",
                text: "出席中国发展高层论坛2025年年会",
                value: [116.46, 39.92],
                itemStyle: { color: "#ffcc00" }
              },
              {
                time: "2025-02-01",
                text: "与民主党领导人查克·舒默及哈基姆...",
                value: [1.46, 39.92],
                itemStyle: { color: "#ffcc00" }
              },
              {
                time: "2025-02-01",
                text: "与阿拉伯国家领导人会晤，商讨加...",
                value: [116.46, -44.92],
                itemStyle: { color: "#ffcc00" }
              },
              {
                time: "2025-02-01",
                text: "对印度进行为期四天的访问，与总理...",
                value: [78.1, 20.7],
                itemStyle: { color: "#ffcc00" }
              }
            ],
            symbolSize: 10,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  var name = params.name;
                  var value = params.data.datas;
                  var text = `{fline|${value}}\n{tline|${name}}{img|${img}}`;
                  return text;
                },
                color: '#fff',
                rich: {
                  fline: {
                    padding: [0, 25],
                    color: '#fff',
                    textShadowColor: '#030615',
                    textShadowBlur: '0',
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                    fontSize: 14,
                    fontWeight: 400,
                  },
                  img: {
                    backgroundColor: {
                      image: '/testData/image 21.png' // 图片URL
                    },
                    height: 50, // 图片高度
                    width: 50  // 图片宽度
                  },
                  tline: {
                    padding: [0, 27],
                    color: '#ABF8FF',
                    fontSize: 12,
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            label: {
              show: true,
              position: "right",
              offset: [5, 0],
              borderColor: "rgba(174, 214, 255, 1)",

              backgroundColor: "rgba(255, 255, 255, 0.8)",
              formatter: params => {
                const { time, text } = params.data; // 👈 从 params.data 取
                return `{time|${time}} \n {text|${text}项}`;
              },
              rich: {
                time: {
                  fontSize: 16,
                  fontFamily: "Microsoft YaHei",
                  fontWeight: 700,
                  lineHeight: 30,
                  color: "rgba(5, 95, 194, 1)"
                },
                text: {
                  fontSize: 14,
                  fontFamily: "Microsoft YaHei",
                  fontWeight: 400,
                  lineHeight: 22,
                  color: "rgb(95, 101, 108)"
                }
              }
            },
            itemStyle: {
              color: "#ddb926",
              shadowBlur: 10,
              shadowColor: "#333"
            }
          }
        ]
      };

      chart.setOption(option);
      // const chart2 = echarts.init(this.$refs.timeLineChart);

      // const option2 = {
      //   xAxis: {
      //     type: "time",
      //     position: "top",
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         color: "#000"
      //       }
      //     },
      //     axisTick: {
      //       show: false
      //     },
      //     axisLabel: {
      //       formatter: "{value}日",
      //       color: "#000"
      //     },
      //     splitLine: {
      //       show: true
      //     },
      //     data: [
      //       "2024-03-25",
      //       "2024-04-08",
      //       "2024-04-15",
      //       "2024-04-22",
      //       "2024-04-29",
      //       "2024-05-06",
      //       "2024-05-13",
      //       "2024-05-20",
      //       "2024-05-27",
      //       "2024-06-03",
      //       "2024-06-10",
      //       "2024-06-17",
      //       "2024-06-24",
      //       "2024-07-01",
      //       "2024-07-08",
      //       "2024-07-15",
      //       "2024-07-22",
      //       "2024-07-29"
      //     ]
      //   },
      //   yAxis: {
      //     type: "value",
      //     show: false
      //   },
      //   series: [
      //     {
      //       data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      //       type: "line",
      //       areaStyle: {},
      //       emphasis: {
      //         focus: "series"
      //       }
      //     }
      //   ],
      //   visualMap: {
      //     show: false,
      //     dimension: 1,
      //     pieces: [{ gt: 0, lte: 1, color: "#ffcc00" }]
      //   }
      // };

      // chart2.setOption(option2);
    }
  }
};
</script>

<style scoped>
#map {
  width: 1600px;
  height: 581px;
}

.time-btn {
  color: #04295A;
  background-color: #F9FDFE;

  border: 1px solid #04295A;
  padding: 0 10px;
  margin: 0 10px;
}
</style>
