<script setup lang="ts">
import DatavHeader from '@/components/DatavHeader'
import NavPanel from '@/components/NavPanel'
import TextSlider from '@/components/TextSlider'
import { AMapService } from '@/service/AMapService';
import { useProvide } from '@/hook/ProvideInject';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { createDisasterPointHTML, createDisasterInfoWindowHTML } from './service/HTMLContent';

type RouterViewExposeComponent = { 
  showHomeBtn?: boolean, // 显示回到首页按钮
  showBackBtn?: boolean, // 显示返回按钮
  homeHandler?: () => void  // 返回首页处理
  backHandler?: () => void  // 返回上一步处理
}

const showHomeBtn = ref(true);
const showBackBtn = ref(true);
const customHomeHandler = ref(false);
const customBackHandler = ref(false);
const routerViewComponent = ref(null as unknown as RouterViewExposeComponent)


onMounted(() => {
  if (routerViewComponent) {
    showHomeBtn.value = routerViewComponent.value.showHomeBtn === undefined ? true : false
    showBackBtn.value = routerViewComponent.value.showBackBtn === undefined ? true : false
    customHomeHandler.value = routerViewComponent.value.homeHandler  ? true : false
    customBackHandler.value = !!routerViewComponent.value.backHandler ? true : false
    console.log(customBackHandler)
  }
})

function copeNavPanelItem(index: number, text: string) {
  // TODO处理
  console.log("点击", text)
}


const message = "案情：火灾救援   报警时间：2022年1月6日17:04:40  发案地址：涪陵区马鞍街道奥体中央公园12栋办公楼"


const pointDatas:PointPayload<DisasterData>[] = [
{
  name: "较场口站",
  position: [106.574352, 29.553575],
  content: createDisasterPointHTML,
  data: {
    content: createDisasterInfoWindowHTML,
    data: {
      type: "火灾扑救",
      occurrenceTime: "2022年2月16日15:44:50",
      occurrenceAddress: "重庆市渝北区较场口站东一路99号",
      competentOrg: "渝中区较场口消防救援站",
      outOfResource: "3辆消防车、10人",
      outOfTime: "2022年2月16日15:57:15",
      waterTime: "2022年2月16日15:57:15",
    }
  }
},
{
  name: "小什字站",
  position: [106.583593,29.560028],
  content: createDisasterPointHTML,
  data: {
    content: createDisasterInfoWindowHTML,
    data: {
      type: "火灾扑救",
      occurrenceTime: "2022年2月16日15:44:50",
      occurrenceAddress: "重庆市渝北区18号线渝中延伸段;1号线;6号线",
      competentOrg: "渝中区小什字消防救援站",
      outOfResource: "3辆消防车、10人",
      outOfTime: "2022年2月16日15:57:15",
      waterTime: "2022年2月16日15:57:15",
    }
  }
}]

// 初始化地图操作
const mapService:MapService =  new AMapService(useRouter(),(instance) => {
  // 初始化地图
  instance.addPoints(pointDatas)
})
// 加载地图
mapService.loadMap("amap-container")
// 注入地图操作
useProvide("mapService", mapService)
</script>

<template>
  <!-- 头部 -->
  <datav-header
    :showHomeBtn="showHomeBtn"
    :showBackBtn="showBackBtn"
    :customHomeHandler="customHomeHandler"
    :customBackHandler="customBackHandler"
    @toHome="() =>//@ts-ignore
    routerViewComponent.homeHandler()"
    @toBack="() =>//@ts-ignore 
    routerViewComponent.backHandler()"
    />
  <!-- 布局页面 -->
  <div class="main-content">
    <div class="cover none-events" style="width: 52vw; height: 80vh;margin: 0 auto;">
      <div id="amap-container" class="events" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="none-events" style="position: absolute; top: 0vh; width: 100%;">    
      <div class="warn-message">
        <div class="message-content">
          <!-- <p> 案情：火灾救援   报警时间：2022年1月6日17:04:40  发案地址：涪陵区马鞍街道奥体中央公园12栋办公楼</p> -->
          <TextSlider 
          :message="message"
          :start="811"
        />
        </div>
      </div>
      <router-view v-slot="{ Component }">
        <!-- 组件信息 -->
        <component ref="routerViewComponent" :is="Component" />
      </router-view>
    </div>
  </div>
  <!-- 导航面板 -->
  <nav-panel @clickItem="copeNavPanelItem" />
</template>

<style scoped lang="less">
.main-content {
  position: relative;
  .cover {
      position: relative;
  }
  .cover:after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      box-shadow:0 0 2.6vw 2.8vh #0C131E inset;
  }
  .warn-message {
    width: 42.3vw;
    height: 3.3vh;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-20%);
    background-image: linear-gradient(to right, #00000000 , #ffe56a75, #00000000);
    border-image: linear-gradient(to right, #00000000 , #fff7c9, #00000000) 30 30;
    border-top: 0.2vh solid #fff7c9;
    border-bottom: 0.2vh solid #fff7c9;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    .message-content {
      font-size: 1.2vw;
      background-image: linear-gradient(to right, #00000000 , #fff7c9, #00000000); 
      -webkit-background-clip: text; 
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
