<template>
  <div class="detail-real-box">
    <div class="realbox-left">
      <div class="left-item"
           v-for="(item,index) in allData.jsdList"
           :key="index">
        <div class="item-name">{{item.name}}</div>
        <div class="item-value"
             v-if="item.type=='src'">
          <el-image style=" height: 40px"
                    :src="item.value"
                    :zoom-rate="1.2"
                    :preview-src-list="allData.srcList"
                    :initial-index="0"
                    fit="cover" />
        </div>
        <div class="item-value"
             v-else
             :title="item.value">{{item.value}}</div>
      </div>
    </div>
    <div class="realbox-right">
      <!-- <video controls
             preload="none"
             poster="@/assets/images/cockpit/video.png">
        <source src="@/assets/images/oneMap/JK4.mp4"
                type="video/mp4" />
      </video> -->

      <!-- <FXPagevideo class="video"
                   :pointfeature='props.pointfeature'
                   ref="FXPagevideo"
                   :height='288'
                   :width='419'></FXPagevideo> -->

      <FXPagevideo1 class="video"
                    v-if="allData.iswin == 1"
                    :pointfeature='props.pointfeature'
                    ref="FXPagevideo1ref"
                    :height='288'
                    :width='419'></FXPagevideo1>

      <webplayer v-if="allData.iswin != 1"
                 style="width: 100%;height:100%"
                 :data="webplayerdata"
                 :refresh="webplayerdata.refresh">
      </webplayer>

    </div>
  </div>
</template>

<script setup>
import {
  getImageUrl,
} from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment"
import useUserStore from '@/store/modules/user'
const appStore = useUserStore()

import FXPagevideo1 from "@/components/cockpitvideo/FXPagevideo1.vue"; //视频插件子组件
// import webplayer from "@/../public/static/h5player/webplayer.vue";

const weatherpop = ref(false)
const FXPagevideo1ref = ref(null)

const webplayerdata = ref({
  cameraIndexCode: 'a352580066d541e1a70bf7c0ecafe422',
  name: '中原路铁路下穿',
  BTNconter: [true, true, true],
  addNum: true,  //true全屏的意思 不展示下方的控件
  refresh: 1,
})

const props = defineProps({
  pointfeature: {
    type: Object,
    default: {},
  },
});

const allData = reactive({
  iswin: localStorage.getItem('iswin'),
  yuqingicon: getImageUrl('yujing_icon', 'cockpit'),
  jsdList: [
    {
      name: '站点名称',
      value: 'XXX积水点',
    },
    {
      name: '站点编号',
      value: '039600001',
    },
    {
      name: '观测时间',
      value: '2023-04-23 18:00',
    },
    {
      name: '积水深度',
      value: '0.18m',
    },
    {
      name: '责任部门',
      value: '市政管理处',
    },
    {
      name: ' 责  任  人',
      value: '张三 136****8659',
    },
    {
      name: '通行状态',
      value: '缓慢通行',
    },
    {
      name: '报警信息',
      value: '通行正常通行正常通行正常通行正常',
    },
    // {
    //   name: '安装照片',
    //   type: 'src',
    //   value: getImageUrl('install', 'cockpit'),
    // },
  ],
  url: getImageUrl('install', 'cockpit'),
  srcList: [getImageUrl('install', 'cockpit')],
})
const GetObj = ref({})

function showpic () {

};

function fuzhiobj () {
  GetObj.value = props.pointfeature
  webplayerdata.value.cameraIndexCode = props.pointfeature?.indexCode || 0;

  console.log('navigator.platform', localStorage.getItem('iswin'));
  if (allData.iswin == 1) {
    setTimeout(() => {
      FXPagevideo1ref.value.newcheckeed()
    }, 500);
  } else {
    webplayerdata.value.refresh = Math.random()
  }
  switch (Number(GetObj.value.pointType)) {
    // 内涝点
    case 1:
      allData.jsdList = [
        {
          name: '站点名称',
          value: GetObj.value.stName,
        },
        {
          name: '站点编号',
          value: GetObj.value.stCode,
        },
        {
          name: '观测时间',
          value: GetObj.value.stt,
        },
        {
          name: '积水深度',
          value: GetObj.value.geneValue + '(' + GetObj.value.geneUnit + ')',
        },
        {
          name: '责任部门',
          value: GetObj.value.dutyUserUnit,
        },
        {
          name: ' 责  任  人',
          value: (GetObj.value.dutyUserName || '') + ' ' + (GetObj.value.dutyUserPhone || ''),
        },
        {
          name: '通行状态',
          value: GetObj.value.warnDesc,
        },
        {
          name: '报警信息',
          value: GetObj.value.alarmDesc,
        },
        // {
        //   name: '安装照片',
        //   type: 'src',
        //   value: getImageUrl('install', 'cockpit'),
        // },


      ]
      break;
  }
}

// onMounted(() => {
//   console.log(props.pointfeature);
// })

fuzhiobj()


</script>
<style lang="scss" scoped>
@import "@/assets/styles/map-detail.scss";
</style>