<template>
  <div class="force3d">
    <div id="cesiumContainer"></div>
    <div class="userRankList">
      <div class="title">用户原力月榜</div>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="600"
        size="large"
        @row-click="gotoBlog"
      >
        <el-table-column prop="rank" label="排名" width="80" align="center" />
        <el-table-column label="明星成员" width="180">
          <template #default="scope">
            <p class="userInfo">
              <img :src="scope.row.avatar" alt="" class="avatar" />
              <span>{{ scope.row.nickname }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="城市" align="center" />
        <el-table-column prop="score" label="原力值" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { getForceInfo } from "@/api/apiList.js";

const $router = useRouter();
const tableData = ref([]);
onMounted(() => {
  getForceInfoData();
});
//获取原力数据
const getForceInfoData = () => {
  getForceInfo().then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.countryTop.slice(0, 20);
      initCesuim3D(res.data.cityInfoList);
    }
  });
};
//初始化3d
const initCesuim3D = (result) => {
  var viewer = new Cesium.Viewer("cesiumContainer", {});
  var imageryLayers = viewer.imageryLayers;
  var scene = viewer.scene;
  var layer = viewer.imageryLayers.addImageryProvider(
    new Cesium.CGCS2000MapServerImageryProvider({
      url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
      suggest: true, //4490坐标系，按照suggest切片方案切的瓦片,需要设置该参数
      // tilingScheme: new Cesium.ArcGisGeographicTilingScheme({})
    })
  );
  var labelImagery = new Cesium.TiandituImageryProvider({
    mapStyle: Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
    token: "4a00a1dc5387b8ed8adba3374bd87e5e",
  });
  imageryLayers.addImageryProvider(labelImagery);

  //数据组装
  result.forEach((ele) => {
    ele.name = ele.city;
    ele.value = ele.gps.concat(ele.score);
  });
  const options = {
    animation: !1,
    title: {},
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      y: "bottom",
      x: "left",
      data: [""],
      textStyle: {
        color: "#fff",
      },
    },
    GLMap: {},
    series: [
      {
        name: "城市",
        type: "scatter",
        coordinateSystem: "GLMap",
        data: result,
        symbolSize: function (val) {
          if (val[2] < 30000) {
            //数据有些异常,做了筛选
            if (val[2] / 100 <= 10) {
              return 8;
            } else {
              return val[2] / 1000;
            }
          } else {
            return 10;
          }
        },
        label: {
          normal: {
            formatter: "{b}",
            position: "right",
            show: false,
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          normal: {
            // color: "#ddb926",
            // color:"#5f97d5"
            color: "#43b89b",
          },
        },
      },
      {
        name: "前10",
        type: "effectScatter",
        coordinateSystem: "GLMap",
        data: result
          .sort(function (a, b) {
            return b.score - a.score;
          })
          .slice(0, 10),
        symbolSize: function (val) {
          if (val[2] < 30000) {
            //数据有些异常,做下筛选
            if (val[2] / 40 <= 8) {
              return 8;
            } else {
              return val[2] / 200;
            }
          } else {
            return 20;
          }
        },
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: "{b}",
            position: "right",
            show: true,
          },
        },
        itemStyle: {
          normal: {
            // color: "#f4e925",
            color: "#1FFFC8",
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        zlevel: 1,
      },
    ],
  };

  var echartsLayer = new EchartsLayer(viewer);
  echartsLayer.chart.setOption(options);
};

//跳转博客
const gotoBlog = (val) => {
  let url = "https://blog.csdn.net/" + val.username;
  window.open(url);
};


</script>
<style lang="less">
.force3d {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .userRankList {
    position: absolute;
    width: 480px;
    right: 40px;
    top: 40px;
    overflow: auto;
    border: 4px solid #5f97d5;
    border-radius: 4px;
    .title {
      font-size: 24px;
      font-weight: 600;
      line-height: 40px;
      color: #77c0ff;
    }
    .el-table {
      background: #192645;
      cursor: pointer;
      th,
      tr {
        background: rgb(25, 38, 69) !important;
        color: rgb(119, 192, 255);
      }
      tr {
        font-size: 16px;
      }
      .el-table__cell {
        border: none;
      }
      .userInfo {
        width: 180px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .avatar {
        border-radius: 100%;
        width: 28px;
        height: 28px;
        margin-right: 3px;
      }
    }
  }
}
</style>
