<template>
  <div class="hot-map-container">
    <div class="map-section">
      <Map
        ref="hotmap"
        :table-headers="TABLEHEADER['1']"
        download-name="中国地图"
        :customer-battery-city-data-props="customerBatteryCityData"
        :callback="hanlderEchartCallback"
        :map-zoom="0.8"
        map-zoom-arr="[1.1, 0.8]"
        @cellClick="handlerCellClick"
      >
        <div class="section-title">区域分布图</div>
      </Map>
    </div>

    <div class="relation-section" style="width: 95vw;">
      <RelationshipCoordinate
        ref="relationshipCoordinate"
        :is-show-data-zoom="true"
        show-btns="0x6"
        download-name="传播路径"
        height="600px"
        width="100%"
        title=""
        :x-axis="xAxis"
        :center-size="50"
        :points="newPoints"
        :links="links"
        :legend-position="legendPosition"
        :callback="handleRelationClick"
        @cellClick="handleRelationClick"
      >
      </RelationshipCoordinate>
    </div>

    <div style="width: 95vw; height: 500px;">
      <TotalLine :datas="datas" :legend-data="legendData" />

    </div>
  </div>
</template>

<script>
import { HotMap as Map, RelationshipCoordinate, TotalLine } from '@p/index.js'
import TABLEHEADER from '@u/echartTableHeader.js'

export default {
  name: 'MapPage',
  components: {
    Map,
    TotalLine,
    RelationshipCoordinate
  },
  data() {
    return {
      legendPosition: [],
      datas: [
        {
          'name': '今天天气不错',
          'data': [100, 111, 222, 333, 444, 555, 666]
        },
        {
          'name': '中国国家导弹防御系统',
          'data': [100, 111, 222, 333, 444, 555, 666]
        }
      ],
      legendData: ['今天天气不错', '中国国家导弹防御系统'],

      TABLEHEADER,
      customerBatteryCityData: [],
      areaColor: '#0c274b',
      borderColor: '#1cccff',
      total: 100, // 节点的总数
      xAxis: [
        '2025-03-11 12:00:00',
        '2025-03-11 13:00:00',
        '2025-03-11 14:00:00',
        '2025-03-11 15:00:00',
        '2025-03-11 16:00:00',
        '2025-03-11 17:00:00',
        '2025-03-11 18:00:00',
        '2025-03-11 19:00:00',
        '2025-03-11 20:00:00',
        '2025-03-11 21:00:00',
        '2025-03-11 22:00:00',
        '2025-03-11 23:00:00',
        '2025-03-12 00:00:00',
        '2025-03-12 01:00:00',
        '2025-03-12 02:00:00',
        '2025-03-12 03:00:00',
        '2025-03-12 04:00:00',
        '2025-03-12 05:00:00',
        '2025-03-12 06:00:00',
        '2025-03-12 07:00:00',
        '2025-03-12 08:00:00',
        '2025-03-12 09:00:00',
        '2025-03-12 10:00:00',
        '2025-03-12 11:00:00',
        '2025-03-12 12:00:00',
        '2025-03-12 13:00:00',
        '2025-03-12 14:00:00',
        '2025-03-12 15:00:00',
        '2025-03-12 16:00:00',
        '2025-03-12 17:00:00',
        '2025-03-12 18:00:00',
        '2025-03-12 19:00:00',
        '2025-03-12 20:00:00',
        '2025-03-12 21:00:00',
        '2025-03-12 22:00:00',
        '2025-03-12 23:00:00',
        '2025-03-13 00:00:00',
        '2025-03-13 01:00:00',
        '2025-03-13 02:00:00',
        '2025-03-13 03:00:00',
        '2025-03-13 04:00:00',
        '2025-03-13 05:00:00',
        '2025-03-13 06:00:00',
        '2025-03-13 07:00:00',
        '2025-03-13 08:00:00',
        '2025-03-13 09:00:00',
        '2025-03-13 10:00:00',
        '2025-03-13 11:00:00',
        '2025-03-13 12:00:00',
        '2025-03-13 13:00:00',
        '2025-03-13 14:00:00',
        '2025-03-13 15:00:00',
        '2025-03-13 16:00:00',
        '2025-03-13 17:00:00',
        '2025-03-13 18:00:00',
        '2025-03-13 19:00:00',
        '2025-03-13 20:00:00'
      ],
      points: [
        {
          'id': '100000',
          'name': '人民日报',
          'siteName': '人民日报平台',
          'time': '2025-03-11 12:00:00',
          'type': '1',
          'children': [
            {
              'id': '10000A',
              'name': '人民日报A',
              'time': '2025-03-12 16:00:00',
              'type': '2',
              'children': [
                {
                  'id': '10000A1',
                  'name': '人民日报A1',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000A2',
                  'name': '人民日报A2',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000A3',
                  'name': '人民日报A3',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                }
              ]
            },
            {
              'id': '10000B',
              'name': '人民日报B',
              'time': '2025-03-12 16:00:00',
              'type': '2',
              'children': [
                {
                  'id': '10000B1',
                  'name': '人民日报B1',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000B2',
                  'name': '人民日报B2',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000B3',
                  'name': '人民日报B3',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                }
              ]
            },
            {
              'id': '10000C',
              'name': '人民日报C',
              'time': '2025-03-12 16:00:00',
              'type': '2',
              'children': [
                {
                  'id': '10000C1',
                  'name': '人民日报C1',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000C2',
                  'name': '人民日报C2',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000C3',
                  'name': '人民日报C3',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                }
              ]
            },
            {
              'id': '10000D',
              'name': '人民日报D',
              'time': '2025-03-12 16:00:00',
              'type': '2',
              'children': [
                {
                  'id': '10000D1',
                  'name': '人民日报D1',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000D2',
                  'name': '人民日报D2',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000D3',
                  'name': '人民日报D3',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                }
              ]
            },
            {
              'id': '10000E',
              'name': '人民日报E',
              'time': '2025-03-12 16:00:00',
              'type': '2',
              'children': [
                {
                  'id': '10000E1',
                  'name': '人民日报E1',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000E2',
                  'name': '人民日报E2',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                },
                {
                  'id': '10000E3',
                  'name': '人民日报E3',
                  'time': '2025-03-13 20:00:00',
                  'type': '3',
                  'children': []
                }
              ]
            }
          ]
        }
      ],
      links: [
        {
          'source': '100000',
          'source_name': '人民日报',
          'target': '10000A',
          'target_name': '人民日报A',
          'linkType': '1',
          'targetType': '2'
        },
        {
          'source': '100000',
          'source_name': '人民日报',
          'target': '10000B',
          'target_name': '人民日报B',
          'linkType': '1',
          'targetType': '2'
        },
        {
          'source': '100000',
          'source_name': '人民日报',
          'target': '10000C',
          'target_name': '人民日报C',
          'linkType': '1',
          'targetType': '2'
        },
        {
          'source': '100000',
          'source_name': '人民日报',
          'target': '10000D',
          'target_name': '人民日报D',
          'linkType': '1',
          'targetType': '2'
        },
        {
          'source': '100000',
          'source_name': '人民日报',
          'target': '10000E',
          'target_name': '人民日报E',
          'linkType': '1',
          'targetType': '2'
        },
        {
          'source': '10000A',
          'source_name': '人民日报A',
          'target': '10000A1',
          'target_name': '人民日报A1',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000A',
          'source_name': '人民日报A',
          'target': '10000A2',
          'target_name': '人民日报A2',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000A',
          'source_name': '人民日报A',
          'target': '10000A3',
          'target_name': '人民日报A3',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000B',
          'source_name': '人民日报B',
          'target': '10000B1',
          'target_name': '人民日报B1',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000B',
          'source_name': '人民日报B',
          'target': '10000B2',
          'target_name': '人民日报B2',
          'linkType': '2',
          'targetType': '3'
        },
        {
          'source': '10000B',
          'source_name': '人民日报B',
          'target': '10000B3',
          'target_name': '人民日报B3',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000C',
          'source_name': '人民日报C',
          'target': '10000C1',
          'target_name': '人民日报C1',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000C',
          'source_name': '人民日报C',
          'target': '10000C2',
          'target_name': '人民日报C2',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000C',
          'source_name': '人民日报C',
          'target': '10000C3',
          'target_name': '人民日报C3',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000D',
          'source_name': '人民日报D',
          'target': '10000D1',
          'target_name': '人民日报D1',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000D',
          'source_name': '人民日报D',
          'target': '10000D2',
          'target_name': '人民日报D2',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000D',
          'source_name': '人民日报D',
          'target': '10000D3',
          'target_name': '人民日报D3',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000E',
          'source_name': '人民日报E',
          'target': '10000E1',
          'target_name': '人民日报E1',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000E',
          'source_name': '人民日报E',
          'target': '10000E2',
          'target_name': '人民日报E2',
          'linkType': '1',
          'targetType': '3'
        },
        {
          'source': '10000E',
          'source_name': '人民日报E',
          'target': '10000E3',
          'target_name': '人民日报E3',
          'linkType': '1',
          'targetType': '3'
        }

      ],
      relationMap: {}, // 点和纵坐标对应关系
      colorMap: {
        '1': '#DF2F1E',
        '2': '#2280CF',
        '3': '#D7721A'
      }, // 和 颜色 对应关系
      lineColorMap: {
        '1': '#DF2F1E',
        '2': '#00C1FF',
        '3': '#D7721A'
      },
      o: {},
      newPoints: [],
      totalNum: 1500
    }
  },
  mounted() {
    // this.$refs.hotmap.initChart('中国')
    // this.initPoints(this.points[0], 500)
    // this.initMapData()

    // this.newPoints = [{
    //   name: '原始点位',
    //   value: ['02:00', 300],
    //   symbolSize: 12,
    //   itemStyle: {
    //     color: '#FF6B6B',
    //     borderColor: '#FF4949',
    //     borderWidth: 2
    //   },
    //   label: {
    //     color: '#333'
    //   }
    // }, {
    //   name: '点位1',
    //   value: ['05:00', 200],
    //   symbolSize: 10,
    //   colorType: 1,
    //   itemStyle: {
    //     color: '#FF6B6B', // 红色节点
    //     borderColor: '#FF4949'
    //   }
    // }, {
    //   name: '点位2',
    //   value: ['08:00', 300],
    //   symbolSize: 10,
    //   colorType: 2,
    //   itemStyle: {
    //     color: '#4B96FF', // 蓝色节点
    //     borderColor: '#3A75FF'
    //   }
    // }, {
    //   name: '点位3',
    //   value: ['12:00', 50],
    //   symbolSize: 10,
    //   colorType: 1 // 1 表示颜色为红色，2 表示颜色为蓝色
    // }, {
    //   name: '点位4',
    //   value: ['15:00', 100],
    //   symbolSize: 10,
    //   colorType: 1 // 1 表示颜色为红色，2 表示颜色为蓝色
    // },
    // {
    //   name: '点位5',
    //   value: ['22:00', 300],
    //   symbolSize: 10,
    //   colorType: 2 // 1 表示颜色为红色，2 表示颜色为蓝色
    // }, {
    //   name: '点位6',
    //   value: ['02:00', 100],
    //   symbolSize: 10,
    //   colorType: 1 // 1 表示颜色为红色，2 表示颜色为蓝色
    // },
    // {
    //   name: '点位7',
    //   value: ['02:00', 600],
    //   symbolSize: 10,
    //   colorType: 2 // 1 表示颜色为红色，2 表示颜色为蓝色
    // },
    // {
    //   name: '点位8',
    //   value: ['10:00', 500],
    //   symbolSize: 10,
    //   colorType: 1 // 1 表示颜色为红色，2 表示颜色为蓝色
    // },
    // {
    //   name: '点位9',
    //   value: ['18:00', 600],
    //   symbolSize: 10,
    //   colorType: 2 // 1 表示颜色为红色，2 表示颜色为蓝色
    // },
    // {
    //   name: '点位10',
    //   value: ['11:00', 400],
    //   symbolSize: 10,
    //   colorType: 1 // 1 表示颜色为红色，2 表示颜色为蓝色
    // },
    // {
    //   name: '点位11',
    //   value: ['19:00', 500],
    //   symbolSize: 10,
    //   colorType: 2 // 1 表示颜色为红色，2 表示颜色为蓝色
    // }
    // ]
    this.newPoints = []
    this.initData()
  },
  methods: {
    initData() {
      this.$nextTick(() => {
        this.initPoints(this.points[0], this.totalNum, 1, 0, () => {
          this.initLine()
        })
      })
    },

    initPoints(node, parentY = 0, depth = 1, oldDelta = 0, callback) {
      if (!node) {
        callback && callback()
        return
      }

      if (node.y === undefined) { node.y = parentY } // 第一层 ， 原始节点 - 首发
      node.value = [node.time, node.y] // 为初始节点添加初始坐标
      node.itemStyle = { color: this.colorMap[node.type], borderColor: this.colorMap[node.type] }
      this.relationMap[node.id] = node.y // 生成 点 和 纵坐标 对应关系 ，用以判断曲率
      this.newPoints.push(node) // 初始化 点的数组

      if (node.children && node.children.length > 0) {
        const count = node.children.length
        const isOdd = count % 2 === 1 // 子节点个数的奇偶判断
        if (isOdd) {
          // 奇数将中间的 node 和 原始点node y轴同坐标 （为了避免纵坐标和横坐标完全相同， 可以加一个偏移量）
          const oddHalfIndex = Math.floor(count / 2)
          node.children[oddHalfIndex].y = node.y + Math.floor(100 / depth)
        }
        const halfIndex = Math.ceil(count / 2) // 中间的index

        let delta
        // 奇数 和 偶数 进行坐标计算 ， 合理利用空间
        if (depth % 2 === 1) {
          delta = isOdd ? Math.floor(parentY / (count - 1)) : Math.floor(parentY / count) // 你可以根据需要调整这个值
        } else {
          delta = isOdd ? Math.floor(oldDelta / (count - 1)) : Math.floor(oldDelta / count) // 你可以根据需要调整这个值
        }
        delta += Math.floor(Math.random() * 61) - 30
        let completedChildren = 0
        node.children.forEach((child, index) => {
          if (index < halfIndex && !child.y) {
            child.y = node.y + (index + 1) * delta
          } else {
            if (!child.y) child.y = node.y - (index - halfIndex + 1) * delta
            if (child.y <= 0) child.y = Math.floor(Math.random() * 100) // 确保数据在x轴以上
          }

          child.value = [child.time, child.y]
          if (child.children) {
            this.initPoints(child, child.y, depth + 1, delta, () => {
              completedChildren++
              if (completedChildren === node.children.length) {
                callback && callback()
              }
            })
          } else {
            this.relationMap[child.id] = child.y
            child.itemStyle = {
              color: this.colorMap[node.type],
              borderColor: this.colorMap[node.type]
            }
            this.newPoints.push(child)
            completedChildren++
            if (completedChildren === node.children.length) {
              callback && callback()
            }
          }
        })
      } else {
        callback && callback()
      }
    },

    initMapData() {
      setTimeout(() => {
        this.customerBatteryCityData = [
          { name: '河南', value: 733 },
          { name: '四川', value: 999999 }
        ]
      }, 1000)
    },
    handleRelationClick(params) {
      console.log('关系图点击:', params)
    },
    hanlderEchartCallback(params) {
      if (params.seriesType === 'map') {
        this.$refs.hotmap.initChart(params.name, true)
      }
    },
    handlerCellClick(params) {
      console.log('单元格点击:', params)
    },

    // 新增initLine方法
    initLine() {
      this.links.map(o => {
        o.lineStyle = {
          color: this.lineColorMap[o.targetType],
          curveness: this.relationMap[o.target] * 1 > this.totalNum ? 0.2 : -0.2,
          type: o.linkType === '1' ? 'dashed' : '' // 改为虚线
        }
      })
    },
    getNodeTooltip(node) {
      return node.siteName ? `${node.siteName}：${node.name}` : node.name
    }
  }
}
</script>

<style lang="scss" scoped>
.hot-map-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: #f5f6f9;
  min-height: 100vh;

  // .map-section, .relation-section {
  //   background: white;
  //   border-radius: 8px;
  //   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  //   padding: 16px;
  // }

  .map-section {
    height: 500px;
  }

  .relation-section {
    height: 700px;
  }

  .section-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
  }
}

.relation-section{
   background-image: radial-gradient(#010F46, #040E2D);

}
</style>
