<template>
  <div class="dialog">
    <div class="file">
        <el-image
            v-for="(i, index) in answers.previewImages"
            :key="index"
            :src="i.url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :scale="0.8"
            :preview-src-list="answers.previewImages.map(i=>i.url)"
            show-progress
            :initial-index="4"
            fit="object-fit"
        />
    </div>
    <div v-if="answers.query" class="user">
        {{ answers.query }}
    </div>
    <div v-if="answers.answer" class="ai-message">
      <img src="@/assets/images/largeModel/icon-robot.png" alt="">
      <div class="content" v-html="formattedAnswer(answers.answer)"></div>
    </div>
    <div class="loading" v-else>
        <span class="dot" v-for="i in 3" :key="i"></span>
    </div>
  </div>
  <el-image-viewer
    v-if="showPreview"
    :url-list="srcList"
    show-progress
    :max-scale="7"
    :min-scale="0.2"
    :scale="0.8"
    fit="object-fit"
    @close="showPreview = false"
  />
</template>

<script setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { marked } from 'marked'
// import { useStore } from 'vuex'
import GlobalMap from '@/components/map/js/GlobalMap.js'

// const store = useStore()
const emit = defineEmits([ 'openVideo', 'openUav' ])
const videoArr = ref([])
const uavArr = ref([])
const boatArr = ref([])
const codes = ref([])
const visible = ref(false)
// 创建自定义渲染器
const renderer = new marked.Renderer()
const showPreview = ref(false)
const srcList = ref([])

// 自定义链接渲染
renderer.link = function(e) {
  if(e.href) {
    return e.href.split(' ').map(i => {
        return renderMedia(i)
    })
  }
}

// 渲染媒体元素的通用函数
const renderMedia = (url, text) => {
  if (!url) {
return ''
}
  console.log(url, 'url')
  // 监控
  if (url.startsWith('{') && url.includes('rtsp_url')) {
    const videoNameMatch = JSON.parse(url).video_name
    const codeMatch = JSON.parse(url).video_code
    const previewUrlMatch = JSON.parse(url).rtsp_url
    const videoObj = {
      videoName: videoNameMatch,
      videoCode: codeMatch,
      previewUrl: previewUrlMatch
    }
    if (videoObj.videoCode) {
      const exists = videoArr.value.some(item =>
        item.videoCode === videoObj.videoCode && item.previewUrl === videoObj.previewUrl
      )
      let index
      if (!exists) {
        // 只有不存在时才添加
        index = videoArr.value.length
        videoArr.value.push(videoObj)
      } else {
        // 如果已存在，找到对应的索引
        index = videoArr.value.findIndex(item =>
          item.videoCode === videoObj.videoCode && item.previewUrl === videoObj.previewUrl
        )
      }
      // 创建全局事件来处理视频弹窗
      return `<div style="color:#1D91FE ;cursor:pointer" onclick="openVideoHandler('${index}')">
                ${videoObj.videoName}
              </div>`
    }
  }
  // 无人机
  if(url.startsWith('{') && url.includes('droneSn')) {
    if(JSON.parse(url).droneSn) {
      const droneSnMatch = JSON.parse(url).droneSn
      const gatewaySnMatch = JSON.parse(url).gatewaySn
      const videoNameMatch = JSON.parse(url).video_name
      const uavObj = {
        droneSn: droneSnMatch,
        gatewaySn: gatewaySnMatch,
        videoName: videoNameMatch
      }
      if (uavObj.videoName) {
        const exists = uavArr.value.some(item =>
          item.videoName === uavObj.videoName
        )
        let index
        if (!exists) {
          // 只有不存在时才添加
          index = uavArr.value.length
          uavArr.value.push(uavObj)
        } else {
          // 如果已存在，找到对应的索引
          index = uavArr.value.findIndex(item =>
            item.droneSn === uavObj.droneSn || item.gatewaySnMatch === uavObj.gatewaySnMatch
          )
        }
        // 创建全局事件来处理视频弹窗
        return `<div style="color:#1D91FE ;cursor:pointer" onclick="openUavHandler('${index}')">
                  ${uavObj.videoName}
                </div>`
      }
    }
  }
  // 船舶智能追踪
  if(url.startsWith('{') && url.includes('mmsi')) {
    if(JSON.parse(url).mmsi) {
      const terminalCodeMatch = JSON.parse(url).mmsi
      const boatNameMatch = JSON.parse(url).boatName
      const sogMatch = JSON.parse(url).sog
      const cogMatch = JSON.parse(url).cog
      const longitudeMatch = JSON.parse(url).longitude
      const latitudeMatch = JSON.parse(url).latitude
      const boatObj = {
        terminalCode: terminalCodeMatch,
        boatName: boatNameMatch,
        sog: Number(sogMatch),
        cog: 360 - Number(cogMatch),
        angle: Number(cogMatch),
        longitude: longitudeMatch,
        latitude: latitudeMatch
      }
      if (boatObj.terminalCode) {
        const exists = boatArr.value.some(item =>
          item.terminalCode === boatObj.terminalCode
        )
        let index
        if (!exists) {
          // 只有不存在时才添加
          index = boatArr.value.length
          boatArr.value.push(boatObj)
        } else {
          // 如果已存在，找到对应的索引
          index = boatArr.value.findIndex(item =>
            item.terminalCode === boatObj.terminalCode || item.boatName === boatObj.boatName
          )
        }
        // 创建全局事件来处理视频弹窗
        return `<div style="color:#1D91FE ;cursor:pointer" onclick="openTrawlerHandler('${index}')">
                  ${boatObj.boatName}
                </div>`
      }
    }
  }
  // 检查是否为视频链接
  if (url.match(/\.(mp4|webm|ogg)(\?.*)?$/i)) {
    return `<div style="margin: 10px 0;">
              <video controls loop muted style="width: 260px; height: 150px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 10px 10px 0;">
                <source src="${url}" type="video/${url.split('.').pop().split('?')[0]}">
                您的浏览器不支持视频播放。
              </video>
            </div>`
  }

  // 检查是否为图片链接
  if (url.match(/\.(jpg|jpeg|png|gif|bmp|webp)(\?.*)?$/i)) {
    return `<img onclick="openImageHandle('${url}')" src="${url}" alt="${text || ''}" style="width: 260px; height: 150px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 10px 10px 0;" />`
  }
}
// 监控视频查看
const openVideoHandler = (index) => {
  const data = videoArr.value[index]
  // 雷云一体机一个视频
  if(data.videoName.indexOf('雷云') !== -1) {
    const videos = videoArr.value.filter(i => i.videoName.indexOf('雷云') !== -1).sort((a, b) => {
          const index1 = a.videoName[a.videoName.length - 1]
          const index2 = b.videoName[b.videoName.length - 1]
          return index1 - index2
        })

      codes.value = [ videos[0].videoCode ]
  }else{
    if(data.videoName.indexOf('球机') !== -1) {
      const videos = videoArr.value.filter(i => i.videoName.indexOf('球机') !== -1).sort((a, b) => {
        const index1 = a.videoName[a.videoName.length - 1]
        const index2 = b.videoName[b.videoName.length - 1]
        return index1 - index2
      })
      codes.value = videos.map((i, index) => {
          return i.previewUrl
      })
    }else{
      codes.value = [ data.videoCode ]
    }
  }
  nextTick(() => {
    setTimeout(() => {
      visible.value = true
      emit('openVideo', { codes: codes.value, visible: visible.value })
      // 再次延迟后触发窗口大小调整事件（模拟resize）
      setTimeout(() => {
        window.dispatchEvent(new Event('resize'))
      }, 100)
    }, 50)
  })
}
// 预览图片
const openImageHandle = (url) => {
  srcList.value = [ url ]
  showPreview.value = true
}
// 开启无人机控制
const openUavHandler = (index) => {
  const data = uavArr.value[index]
  // store.commit('mapStore/updateUavData', { ...data })
  emit('openUav', { ...data })
}
// 渔船追踪
const openTrawlerHandler = (index) => {
  const data = boatArr.value[index]
  // store.commit('mapStore/updateWindowInfo', {
  //   visible: true,
  //   type: '_trawler_dynamic',
  //   data: { ...data }
  // })
  GlobalMap.instance.map.animateTo(
    {
      zoom: 20,
      center: [ data.longitude, data.latitude ]
    },
    {
      duration: 1000 * 0.5,
      easing: 'out'
    }
  )
}
// 配置 marked 选项并应用自定义渲染器
marked.setOptions({
  renderer: renderer,
  gfm: true,
  breaks: true,
  smartypants: false
})
const props = defineProps({
    answers: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const formattedAnswer = (answer) => {
  if (!answer) {
    return ''
  }
  const processedText = answer.replace(/{[^}]+}/g, (match) => {
    return renderMedia(match)
  })
  return marked.parse(processedText)
}
onMounted(() => {
  videoArr.value = []
  window.openVideoHandler = openVideoHandler
  window.openImageHandle = openImageHandle
  // 无人机控制方法
  window.openUavHandler = openUavHandler
  // 渔船追踪
  window.openTrawlerHandler = openTrawlerHandler
})
onUnmounted(() => {
    delete window.openVideoHandler
    delete window.openImageHandle
    delete window.openUavHandler
    delete window.openTrawlerHandler
  })
</script>

<style lang="scss" scoped>
.dialog {
  height: calc(100% - 50px);
  overflow: auto;
}

.user,.file{
    color: #E1F1FA;
    max-width: calc(100% - 88px);
    padding: 6px;
    font-size: 14px;
    line-height: 24px;
    width: fit-content;
    margin-left: auto;

    background: rgba(89,175,255,0.15);
    border-radius: 3px 3px 3px 3px;
}
.file{
    background: none;
    padding-right: 0;
    .el-image{
        width:100px;
        height: 100px;
        margin-left: 10px;
        cursor: pointer;
    }
}
.ai-message {
   color: #E1F1FA;
    border-radius: 22px;
    max-width: calc(100% - 88px);
    padding: 10px 0;
    font-size: 14px;
    line-height: 24px;
    width: fit-content;
    margin-right: auto;
    text-align: left;
    display: flex;
    img{
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
    .content{
      margin-bottom: 10px;
      background: rgba(89,175,255,0.15);
      border-radius: 3px 3px 3px 3px;
      padding: 6px;
    }
}
.loading {
    color: #0C1533;
    border-radius: 22px;
    max-width: calc(100% - 88px);
    padding: 10px 16px;
    font-size: 16px;
    line-height: 24px;
    width: fit-content;
    margin-right: auto;
    text-align: left;
}
.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 2px;
    animation: dot-animation 1.5s infinite ease-in-out;
}

@keyframes dot-animation {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

</style>