<template>
  <div class="leadreport-information-component">
    <div style="display: flex;height:calc(100% - 62px);">
      <div style="flex: 1;">
        <a-divider>【线索详情】</a-divider>
        <a-descriptions :column="1" bordered>
          <a-descriptions-item>
            <template #label>
              <TabletOutlined />
              举报人
            </template>
            <!-- TODO 加密 -->
            {{detail.name}}
          </a-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <TabletOutlined />
              手机号
            </template>
            <!-- TODO 加密 -->
            {{detail.phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <TabletOutlined />
              地点
            </template>
            {{detail.address}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <TabletOutlined />
              举报内容
            </template>
            {{detail.content}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <TabletOutlined />
              举报时间
            </template>
            {{detail.createTime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <TabletOutlined />
              图片
            </template>
            <a-image-preview-group>
              <a-image :width="200" v-for="(item,index) in imageList" :key="index" :src="item" />
            </a-image-preview-group>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <TabletOutlined />
              视频
            </template>
            <video-player class="video-player vjs-custom-skin" v-for="(item,index) in videoList"
              :key="index" ref="videoPlayer" :playsinline="true" :options="item"
              style="width:400px;margin-top: 10px;">
            </video-player>
          </el-descriptions-item>
        </a-descriptions>
      </div>
      <div style="flex: 1;">
        <a-divider>【地址】</a-divider>
        <div class="amap-wrapper">
          <!-- <MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad"/> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TabletOutlined } from "@ant-design/icons-vue";
import MapboxMaps from '@/components/MapboxMaps/index.vue'


import {defineProps, onMounted,ref,reactive} from 'vue'
const props = defineProps(['showInfoId'])
const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL
let detail = ref({})
const mapOptions = reactive({
  center: [0,0],
  zoom: 13,
})
let imageList:string[] = reactive([])
let videoList = reactive([])

const mapOnload = (map) => {
  const testSource = 'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
  map.U.addVector('name', testSource).addLineLayer('layerId',{
    source: 'sourceId',
    'source-layer': 'lindi'
  });
}
onMounted(() => {
  console.log(props.showInfoId,detail)
  loadDetailCaseInfo()
  console.log(detail)
})
const loadDetailCaseInfo = () => {
  // TODO request /ClueReporting/GetClueReportingDetail?id=   暂时只显示列表
  let response = {
    result:{
      reporting:{
        id:1,
        name:"张三",
        phone:"11111111111",
        address:"啊手动阀啊手动阀啊手动阀啊手动阀",
        createTime:"2022-08-09 12:00:00",
        content:"aaa",
        lng:116.404,
        lat:39.915
      },
      imageFiles:[
        "x43I27A55%26/photo-1438109491414-7198515b166b.webp",
        "cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp",
        "LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp",
      ],
      videoFiles:[
        // "1.mp4",
        // "2.mp4",
        // "3.mp4"
      ]
    }
  }
  Promise.resolve(response).then((res) => {
    let obj = res.result.reporting
    detail.value = {...obj}
    mapOptions.center = [obj.lng, obj.lat]
    if (res.result.imageFiles) {
      res.result.imageFiles.forEach(element => {
        imageList.push(
          // BASE_IMAGE_URL + "/" + element
          `https://gw.alipayobjects.com/zos/antfincdn/${element}`
        )
      });
    }
    if (res.result.videoFiles) {
      res.result.videoFiles.forEach(element => {
        let options = {
          playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
                type: "",
                src: BASE_IMAGE_URL + "/" + element//url地址
            }
          ],
          poster: "", //你的封面地址
          // width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,//当前时间和持续时间的分隔符
            durationDisplay: true,//显示持续时间
            remainingTimeDisplay: false,//是否显示剩余时间功能
            fullscreenToggle: true  //全屏按钮
          }
        }
        videoList.push(options)
      });
    }
  })
}
</script>

<style lang="scss" scoped>
.leadreport-information-component{
  height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}
.amap-wrapper{
  width: 100%;
  height: 100%
}
.amap-demo{
  width: 100%;
  height: 100%;
}
</style>