<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>m²</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>
    <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
      <bm-view class="map-view"></bm-view>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-marker
          v-for="(item, index) in markers"
          :key="index"
          :position="item.position"
          :icon="{url: item.icon, size: {width: 16, height: 16}}"
          @click="markerClick(item.id)"
      >
      </bm-marker>
    </baidu-map>
    <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>

    <el-dialog
        v-model="dialogVisible"
        title="任务详情"
        width="500"
    >
      <div class="item">
        <div class="name">{{ currentMarker.rescue_code }}</div>
        <div class="time">{{ currentMarker.fill_time }}</div>
        <div class="row">
          <div class="col">航次：<span>{{ currentMarker.voyage_name }}</span></div>
          <div class="col">任务状态：<span>{{ currentMarker.rescue_status }}</span></div>
        </div>
        <div class="row">
          <div class="col">快速响应等级：<span>{{ currentMarker.rescue_response_level }}</span></div>
          <div class="col">目标名称：<span>{{ currentMarker.rescue_target_name }}</span></div>
        </div>
        <div class="row">
          <div class="col">任务类型：<span>{{ currentMarker.rescue_type === 'SAR' ? '应急搜捞' : '专项调查' }}</span></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 导入静态图片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'

// 百度地图
const center = ref({ lng: 116.443, lat: 20.422 })
const zoom = ref(7)

const handler = ({ BMap, map }) => {

}

const dialogVisible = ref(false)
const currentMarker = ref(null)
const markerClick = (id) => {
  currentMarker.value = dataList.value.find(item => item.tsy_id === id)
  dialogVisible.value = true
  console.log('标记被点击', currentMarker.value)
}

// 隐藏百度地图未授权水印
const hideWatermark = () => {
  const originShadow = Element.prototype.attachShadow;
  Element.prototype.attachShadow = (...args) => {
    const shadowRoot = originShadow.call(this, ...args)
    const style = document.createElement("style")
    style.innerHTML = "div { display: none !important; }"
    shadowRoot.appendChild(style)
    return shadowRoot
  };
}

// 匹配对应状态的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
  })
}

onMounted(() => {
  getDataList()
  hideWatermark()
})
</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>
