<template>
  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="闸井详情" append-to-body>
    <el-scrollbar :native="false">
      <el-form ref="dataForm" :label-position="labelPosition" :model="wellForm" :v-loading="loading" label-width="120px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="闸井名称" prop="wellName">
              <el-input v-model="wellForm.wellName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="闸井编号" prop="wellCode">
              <el-input v-model="wellForm.wellCode" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="闸井类型" prop="wellType">
              <el-input v-model="wellForm.wellTypeName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="所属派出所" prop="deptid">
              <el-input v-model="wellForm.deptName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="井深(m)" prop="deep">
              <el-input v-model="wellForm.deep" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="布防状态" prop="coordinateX">
              <el-input v-model="wellForm.bfztName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="false" :gutter="1">
          <el-form-item label="所在区域" required>
            <el-col :span="4">
              <el-select v-model="wellForm.qu" placeholder="未知" disabled>
                <el-option
                  v-for="item in quList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"/>
              </el-select>
            </el-col>
            <el-col :span="1" class="line">区/县</el-col>
            <el-col :span="5">
              <el-select v-model="wellForm.area" placeholder="未知" disabled>
                <el-option
                  v-for="item in jiedaoList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"/>
              </el-select>
            </el-col>
            <el-col :span="1" class="line">街道/镇</el-col>
          </el-form-item>

        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="详细地址" prop="position">
              <el-input v-model="wellForm.position" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="产权单位">
              <el-input v-model="wellForm.owner" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="watch-div">
        <!--<el-amap ref="map" :center="center" :zoom="zoom" vid="overview" class="map-demo">-->
        <!--<el-amap-marker v-for="(marker,index) in markers" :key="index" :v-bind="index" :position="marker.position" :vid="index" visible="true"/>-->
        <!--</el-amap>-->
        <!--地图-->
        <baidu-map v-if="marker" ref="map" :center="center" :zoom="zoom" class="map-demo">
          <!--闸井marker-->
          <baidu-map-marker
            :position="marker.position"
            :offset="offset"
            :visible="marker.visible"
            @click="openInfo"
          />
          <!-- marker弹窗 -->
           <baidu-map-info-window
          :position="markerInfo.position"
          :show="Boolean(videoList.length) && showMarker"
          title=""
          class="nomal-info-window"
        >
        <div
            v-if="videoList.length > 1"
            style="width: 100%;display: flex;margin: 5px 0;font-size: 14px;"
          >
            <div v-for="(item, index) in videoList" style="width: 18%;border: 1px splid #ccc;text-align: center;cursor: pointer;padding: 2px;"
            :class="currentVideo === index ? 'active-btn-video' : ''"
            @click="changeVideo(index)"
            >视频{{ index + 1 }}</div>
          </div>
          <div v-if="videoList.length" style="width: 300px;height: 150px;background-color: #000">
            <iframe style="width: 100%;height: 100%;border: none;" :src="videoUrl" frameborder="0"></iframe>
          </div>
        </baidu-map-info-window>
        </baidu-map>

      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import { getAreaList, getAreaByDept } from '@/api/area'
import { getWellInfo } from '@/api/well'
import {
  getWellVideo,
  getWellHistoryVideo
} from "@/api/overview";
import BaiduMap from '@/components/BMap/baiduMap'
import BaiduMapMarker from '@/components/BMap/baiduMapMarker'
import BaiduMapInfoWindow from '@/components/BMap/baiduInfoWindow'
import dayjs from 'dayjs';
export default {
  name: 'InfoWellBdOffline',
  components: { BaiduMapMarker, BaiduMap, BaiduMapInfoWindow },
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      wellForm: {
        infoWindowClass: 'nomal-info-window',
        id: null, // 闸井id
        wellCode: '', // 闸井编号
        wellName: '', // 闸井名称
        wellType: '', // 闸井类型
        wellTypeName: '', // 闸井类型名称
        deptid: '', // 所属派出所
        deptName: '', // 所属派出所名称
        bfztName: '', // 布防状态
        deep: '', // 井深，
        position: '', // 位置描述
        coordinateX: '',
        coordinateY: '',
        latBaidu: '',
        lngBaidu: '',
        latGaode: '',
        lngGaode: '',
        photos: '', // 照片路径
        notes: '', // 备注,
        qu: '',
        area: '', // 街道
        responsibleDept: '', // 维护人员部门
        owner: '' // 产权单位
      }, // 表单
      center: { lng: 121.59996, lat: 31.197646 },
      zoom: 16,
      marker: null,
      offset: { width: 0, height: 0 }, // 偏移量
      quList: null,
      jiedaoList: null,
      labelPosition: 'right',
      loading: true,
      markerInfo: {
        visible: false,
        position: { }
      },
      videoList: [],
      currentVideo: "",
      videoUrl: "",
      locationInfo: {},
      showMarker: false
    }
  },
  computed: {
    qu() { // 获取区
      return this.wellForm.qu
    }
  },
  watch: {
    qu(val) { // 监控区变化
      this.fetchArea2()
    }
  },
  mounted: function() {
    // this.fetchArea1()
  },
  methods: {
    // 初始化对话框
    initDialog: function(wellId, well) {
      this.dialogFormVisible = true
      this.showMarker = false
      this.videoList = [];
      this.currentVideo = "";
      this.videoUrl = "";
      // this.fetchArea1()
      // 获取闸井数据
      getWellInfo(wellId).then(response => {
        this.listLoading = false
        const row = response.data
        this.wellForm = {
          id: row.id, // 闸井id
          wellCode: row.wellCode, // 闸井编号
          wellName: row.wellName, // 闸井名称
          wellType: row.wellType, // 闸井类型
          wellTypeName: row.wellTypeName, // 闸井类型
          deptid: row.deptid, // 所属派出所
          deptName: row.deptName, // 所属派出所
          deep: row.deep, // 井深，
          bfztName: row.bfztName, // 布防状态
          position: row.position, // 位置描述
          photos: row.photos, // 照片路径
          notes: row.notes, // 备注,
          coordinateX: row.coordinateX,
          coordinateY: row.coordinateY,
          latBaidu: row.latBaidu,
          lngBaidu: row.lngBaidu,
          latGaode: row.latGaode,
          lngGaode: row.lngGaode,
          qu: row.qu,
          area: row.area, // 街道
          responsibleDept: row.responsibleDept, // 维护人员部门
          owner: row.owner
        }
        this.center = { lng: row.lngBaidu, lat: row.latBaidu }
        this.marker = {
          position: { lng: row.lngBaidu, lat: row.latBaidu },
          visible: true
        }
        setTimeout(() => {
          this.markerInfo = {
          position: { lng: row.lngBaidu, lat: row.latBaidu },
          visible: true
        }
        }, 100);
        if (row.deptid && row.deptid !== '') {
          this.fetchArea1()
          this.fetchArea2()
        } else {
          this.loading = false
        }
      })
      this.setInfo()
      if(!well) { return }
      // 获取历史视频
      if(well.alarmTime) {
         getWellHistoryVideo(wellId,dayjs(well.alarmTime).subtract(30, 'second').format('YYYY-MM-DD HH:mm:ss'),dayjs(well.alarmTime).add(30, 'second').format('YYYY-MM-DD HH:mm:ss')).then(res => {
          // this.videoList = [
          //   'http://kbs-dokdo.gscdn.com/dokdo_300/definst/dokdo_300.stream/playlist.m3u8',
          //   'http://kbs-dokdo.gscdn.com/dokdo_300/definst/dokdo_300.stream/playlist1.m3u8'
          // ]
          this.videoList = res.data;
        if (this.videoList.length) {
          this.showMarker = true
          this.currentVideo = 0;
        //   // http://111.198.10.15:21904/videoPlayer/#/index?url=http://kbs-dokdo.gscdn.com/dokdo_300/definst/dokdo_300.stream/playlist.m3u8&plugin=hls.js
            this.videoUrl = `http://${this.locationInfo.ip}:${
            this.locationInfo.port
          }/videoPlayer/#/index?url=${
            this.videoList[this.currentVideo]
          }&plugin=hls.js`;
        } 
        })
      }
      // 当前视频
      if(well.currentTime) {
        getWellVideo(wellId).then(res => {
          //  this.videoList = [
          //   'http://kbs-dokdo.gscdn.com/dokdo_300/definst/dokdo_300.stream/playlist.m3u8',
          //   'http://kbs-dokdo.gscdn.com/dokdo_300/definst/dokdo_300.stream/playlist1.m3u8'
          // ]
          this.videoList = res.data;
          this.currentVideo = 0;
          if (this.videoList.length) {
            this.showMarker = true
          this.videoUrl = `http://${this.locationInfo.ip}:${
            this.locationInfo.port
          }/videoPlayer/#/index?url=${
            this.videoList[this.currentVideo]
          }&plugin=hls.js`;
          }
        })
      }
    },
    // 切换视频
    changeVideo(index) {
      this.currentVideo = index
      this.videoUrl = `http://${this.locationInfo.ip}:${
            this.locationInfo.port
          }/videoPlayer/#/index?url=${
            this.videoList[this.currentVideo]
          }&plugin=hls.js`;
    },
    // 获取区域1
    fetchArea1() {
      getAreaByDept(this.wellForm.deptid).then(response => {
        if (response.code === 200) {
          const pid = response.data.area
          getAreaList(pid).then(response => {
            this.quList = response.data
          })
        }
      }).catch((res) => {
        // this.$message.error(res.message)
      })
    },
    // 获取区域2
    fetchArea2() {
      getAreaList(this.wellForm.qu).then(response => {
        this.jiedaoList = response.data
        this.loading = false
      })
    },
    // 取消
    cancel() {
      this.dialogFormVisible = false
    },
    // 打开弹窗
    openInfo() {
      console.log('打开弹窗')
      this.marker.visible = false
      this.markerInfo.visible = false
      this.showMarker = false
      setTimeout(() => {
        this.marker.visible = true
      this.markerInfo.visible = true
      this.showMarker = true
      }, 100);
    },
    setInfo() {
          // 获取当前页面的完整URL
    const currentUrl = window.location.href;

    // 正则表达式匹配IP和端口
    const ipPortRegex = /^(https?:\/\/)?([^\/:]+)(:\d+)?/i;
    const matches = currentUrl.match(ipPortRegex);

    let ip = "";
    let port = "";

    if (matches && matches[2]) {
      // 提取IP或域名
      ip = matches[2];

      // 处理IPv6地址（如[::1]）
      if (ip.startsWith("[") && ip.endsWith("]")) {
        ip = ip.substring(1, ip.length - 1);
      }

      // 提取端口号
      if (matches[3]) {
        port = matches[3].substring(1); // 去掉前面的冒号
      } else {
        // 默认端口
        port = window.location.protocol === "https:" ? "443" : "80";
      }
    }

    console.log("IP:", ip);
    console.log("Port:", port);

    // 返回结果对象
    const result = {
      ip: ip,
      port: port,
      fullAddress: ip + (port ? ":" + port : "")
    };
    this.locationInfo = result;
    console.log(this.locationInfo, "this.locationInfo");
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.active-btn-video {
  border: 1px solid #000 !important;
}
  .hide .el-upload--picture-card {
    display: none;
  }
  .editDialog{
    .el-dialog {
      width: 900px;
      margin-top: 10vh !important;
      .el-dialog__body{
      }
      .el-scrollbar {
        height: 450px;
        width: 100%;
      }
      .el-scrollbar__wrap {
        /*overflow: scroll;*/
        overflow-x: auto;
        overflow-y: auto;
      }
      .el-scrollbar__view{
        width: 98%;
      }
      .el-form-item {
        margin-bottom: 12px;
      }
    }
  }
  .el-select{
    width: 100%;
  }
  .line{
    width: 50px;
    margin-left: 5px;
  }
  .hide .el-upload-–picture-card{
    display: none;
  }
  .imgBox{
    width: 100%;
    text-align: center;
  }
  .watch-div {
    margin: 0px 15px;
    .map-demo{
      height: 250px;
    }
  }
</style>