<template>
  <div class="home-container">
    <div class="banner">
      <div class="title">
        <div class="fs-56 bold">面向国家深海安全重大需求</div>
        <div class="fs-48 bold">依托船潜作业平台</div>
        <div class="fs-48">构建应急搜寻处置快速响应能力</div>
      </div>
      <div class="nums">
        <div class="item">
          <img src="@/assets/icons/任务.png" alt="任务" />
          <div class="right">
            <div><span>560</span>项</div>
            <div>应急任务累计完成</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/icons/区域.png" alt="区域" />
          <div class="right">
            <div><span>2650</span>km²</div>
            <div>专项调查区域覆盖</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/icons/航次.png" alt="航次" />
          <div class="right">
            <div><span>387</span>次</div>
            <div>执行航次</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/icons/潜水艇.png" alt="潜水艇" />
          <div class="right">
            <div><span>260</span>次</div>
            <div>载人深潜</div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/icons/潜艇.png" alt="潜艇" />
          <div class="right">
            <div><span>893</span>项</div>
            <div>无人潜水器作业</div>
          </div>
        </div>
      </div>
    </div>
    <div class="module-title">搜寻处置任务</div>
    <div class="map" id="cesiumContainer"></div>
    <div class="module-title">任务更新动态</div>
    <div class="task">
      <div class="item" v-for="(item, index) in dataList" :key="index">
        <div class="icon">
          <img :src="formatIcon(item.rescue_type, item.rescue_response_level)" alt="" />
        </div>
        <div class="right">
          <div class="top">
            <div class="tag" :class="{tag2: item.rescue_type === 'SI'}">{{ item.rescue_type === 'SAR' ? '应急搜捞' : '专项调查' }}</div>
            <div class="name">{{ item.rescue_code }}{{ item.rescue_status }} <span v-if="item.rescue_type === 'SAR'">，快速响应等级为{{ item.rescue_response_level }}</span></div>
          </div>
          <div class="info">
            <el-row :gutter="20">
              <el-col :span="12"><div class="label">搜寻处置目标：<span>{{ item.rescue_target_name }}</span></div></el-col>
              <el-col :span="12"><div class="label">搜寻处置目标尺寸：<span>长：{{ item.rescue_target_length }} 宽：{{ item.rescue_target_width }} 高：{{ item.rescue_target_height }}</span></div></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12"><div class="label">搜寻处置目标位置：<span>经度：{{ item.rescue_target_lon }} 纬度：{{ item.rescue_target_lat }}</span></div></el-col>
              <el-col :span="12"><div class="label">发布时间：<span>{{ item.fill_time }}</span></div></el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as Cesium from "cesium";
import { ref, onMounted } from 'vue'
import { getParam } from '@/api/task.js'
import { modifyCesiumMouseWheel, setImageryViewModels } from '@/utils/common'

// 导入静态图片icon
import waring1 from "@/assets/icons/告警级别1.png";
import waring2 from "@/assets/icons/告警级别2.png";
import waring3 from "@/assets/icons/告警级别3.png";
import success from "@/assets/icons/任务完成.png";
import markerIcon1 from "@/assets/icons/标注点1.png";
import markerIcon2 from "@/assets/icons/标注点2.png";
import markerIcon3 from "@/assets/icons/标注点3.png";
import { regPage } from '@/api/task.js'

// 匹配对应状态的icon
const formatIcon = (type, level) => {
  let img = null
  if (type === 'SAR') {
    if (level === '一级') {
      img = waring1;
    }
    if (level === '二级') {
      img = waring2;
    }
    if (level === '三级') {
      img = waring3;
    }
  } else {
    img = success;
  }

  return img
}

// 任务更新动态数据
const dataList = ref([])
const markers = ref([])

// 获取列表数据
const getDataList = () => {
  regPage({
    start: 0,
    limit: 8
  }).then(res => {
    dataList.value = res.page.records
    const data = []
    dataList.value.forEach(item => {
      if (item.rescue_status === '任务开始') {
        data.push({
          position: {
            lng: item.rescue_target_lon,
            lat: item.rescue_target_lat
          },
          icon: markerIcon1,
          id: item.tsy_id
        })
      }
      if (item.rescue_status === '任务处理中') {
        data.push({
          position: {
            lng: item.rescue_target_lon,
            lat: item.rescue_target_lat
          },
          icon: markerIcon2,
          id: item.tsy_id
        })
      }
      if (item.rescue_status === '任务已完成') {
        data.push({
          position: {
            lng: item.rescue_target_lon,
            lat: item.rescue_target_lat
          },
          icon: markerIcon3,
          id: item.tsy_id
        })
      }
    })
    markers.value = data
  })
}

const CesiumHostAddr = ref('')
// 获取系统参数列表
const getParamsList = () => {
  getParam().then(res => {
    const data = res.array.find(item => item.param_name === 'CesiumHostAddr')

    if (data?.param_value) {
      CesiumHostAddr.value = data.param_value
    } else {
      CesiumHostAddr.value = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/tiles/`
    }

    initMap();
  })
}

let viewer;

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4';
const cesiumConfig = {
  sceneMode: Cesium.SceneMode.SCENE2D,
  // 主页按钮
  homeButton: false,
  // 场景模式选择器
  sceneModePicker: false,
  // 全屏按钮
  fullscreenButton: false,
  // 是否显示点击要素之后显示的信息
  infoBox: false,
  // 要素选中框
  selectionIndicator: false,
  // 影像切换
  baseLayerPicker: false,
  // 启用了阴影效果
  shadows: true,
  // 启用动画
  shouldAnimate: true,
  // 是否显示动画控件
  animation: false,
  // 是否显示时间线控件
  timeline: false,
  // 是否显示地名查找控件
  geocoder: false,
  // 是否显示帮助信息控件
  navigationHelpButton: false,
  contextOptions: {
    contextType: 2, // Webgl2:2 ; WebGPU:3
  },
  // 版权信息
  creditContainer: document.createElement('div')
}

const initMap = () => {
  viewer = new Cesium.Viewer('cesiumContainer',cesiumConfig)
  viewer._cesiumWidget._creditContainer.style.display = 'none'
  viewer.scene.sun.show = false
  viewer.scene.moon.show = false
  viewer.scene.fog.enabled = false
  viewer.scene.skyAtmosphere.show = false
  viewer.scene.sun.show = false
  viewer.scene.skyBox.show = false
  viewer.scene.globe.enableLighting = false
  viewer.shadowMap.darkness = 0.8
  viewer.scene._sunBloom = false
  viewer.scene.globe.showGroundAtmosphere = false
  viewer.scene.postProcessStages.fxaa.enabled = true
  viewer.camera.setView({
    // 指定相机初始位置
    destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000)
  });
  // 改写 Cesium 原生鼠标滚轮事件，地图缩放改为按下 Ctrl + 鼠标滚轮
  modifyCesiumMouseWheel(viewer);

  // 沉船摄影拼接图
  const shipline = new Cesium.WebMapTileServiceImageryProvider(
      {
        url: CesiumHostAddr.value + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
        layer: 'ougp:正射影像图_GM输出_20240516',
        style: 'default',
        format: 'image/png',
        tileMatrixSetID: 'EPSG:4326',
        tilingScheme: new Cesium.GeographicTilingScheme()
      }
  )
  viewer.imageryLayers.addImageryProvider(shipline)
  // 增加6000米等深线
  const contour6000 = new Cesium.WebMapTileServiceImageryProvider(
      {
        url: CesiumHostAddr.value + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
        layer: 'ougp:contour6000',
        style: 'default',
        format: 'image/png',
        tileMatrixSetID: 'EPSG:4326',
        tilingScheme: new Cesium.GeographicTilingScheme()
      }
  )
  viewer.imageryLayers.addImageryProvider(contour6000)
}

onMounted(() => {
  getDataList()
  getParamsList()
})
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px 0;

  .banner {
    padding: 0  8%;
    height: 650px;

    .fs-56 {
      font-size: 56px;
    }

    .fs-48 {
      font-size: 48px;
    }

    .bold {
      font-weight: bold;
      color: rgb(76,213,243);
    }

    .nums {
      margin-top: 120px;
      display: flex;
      justify-content: space-between;
      column-gap: 10px;

      .item {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px;
        border-radius: 10px;
        background-color: rgba(33, 54, 87, 0.7);

        img {
          width: 60px;
          height: 60px;
        }

        span {
          font-size: 40px;
          font-weight: bold;
          margin-right: 5px;
        }
      }
    }
  }

  .module-title {
    padding: 50px;
    text-align: center;
    font-size: 36px;
    color: #242424;
    font-weight: bold;
    position: relative;

    &::before,
    &::after {
      content: "";
      display: inline-block;
      width: 64px; /* 线条长度 */
      height: 4px;
      border-radius: 2px;
      background-color: rgb(202,208,212);
      vertical-align: middle;
      margin: 0 30px; /* 控制文字与线条的间距 */
    }
  }

  .map {
    width: 100%;
    height: 800px;

    .map-view {
      width: 100%;
      height: 100%;
    }

    &:deep(.BMap_cpyCtrl) {
      display: none;
    }
    &:deep(.anchorBL) {
      display: none;
    }
  }

  .task {
    padding: 0 8%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    color: #242424;

    .item {
      display: flex;
      padding: 20px;
      border-radius: 10px;
      border: 2px solid #eee;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
      transition: box-shadow 0.3s ease; /* 悬停动画 */

      &:hover {
        cursor: pointer;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        border: 2px solid rgb(18,150,219);
      }

      .icon {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        background-color: #eee;
        margin-right: 20px;

        img {
          width: 60px;
          height: 60px;
        }
      }

      .right {
        flex: 1;

        .top {
          display: flex;
          align-items: center;

          .tag {
            margin-right: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            padding: 0 8px;
            color: #fdbb13;
            border: 2px solid #fdbb13;
          }

          .tag2 {
            color: rgb(18,150,219);
            border: 2px solid rgb(18,150,219);
          }

          .name {
            color: #000;
            font-weight: bold;
          }
        }

        .info {
          width: 100%;
          margin-top: 12px;

          .label {
            color: #aaa;

            span {
              color: #242424;
            }
          }
        }
      }
    }
  }

}
</style>
