<template>
    <div class="mapTabPage station-map-box2" v-loading="loading">
        <div class="nav" v-if="itmeList != null">
          <div class="nav-box">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <!--<div class="swiper-slide">Slide 1</div>-->
                  <!--<div class="swiper-slide">Slide 2</div>-->
                  <!--<div class="swiper-slide">Slide 3</div>-->
                  <p :class="activeClass == index ? 'active swiper-slide':'swiper-slide'" v-for="(itme,index) in itmeList" :key="index" @click="getItme(index)">
                  {{itme.mapName}}
                  </p>
                </div>
                <!-- 如果需要分页器 -->
                <!--<div class="swiper-pagination"></div>-->

                <!-- 如果需要滚动条 -->
                <!--<div class="swiper-scrollbar"></div>-->
              </div>

              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>

            </div>

        </div>

      <!-- mapImg:每个地图的背景图， mapArr：地图里面的点 -->
        <div class="map-box map1-box" v-if="company == 0 && mapArr.length > 0">
          {{activeClass == 0}}
          <map1box1 v-if="activeClass == 0" :mapImg="itmeList[0].mapRasterLayer" :mapArr="mapArr[0]"/>
          <map1box2 v-if="activeClass == 1" :mapImg="itmeList[1].mapRasterLayer" :mapArr="mapArr[1]"/>
        </div>

        <div class="map-box map1-box" v-if="company == 1 && mapArr.length > 0">
          <map2box1 @func="getMsgFormSon" @loadingFunc="changeLoading" v-for="(item, index) in itmeList" :key="index" v-if="activeClass == index" :mapImg="item.mapRasterLayer" :mapArr="mapArr[index]"/>
          <!--<map2box1 ref="changemapData" @func="getMsgFormSon" @loadingFunc="changeLoading" v-for="(item, index) in itmeList" :key="index" v-if="activeClass == index" :mapImg="item.mapRasterLayer" :mapArr="mapArr[index]"/>-->
        </div>

      <!--风险点弹窗-->
      <el-dialog
        :visible.sync="dialogShow"
        :close-on-click-modal="false"
        :modal-append-to-body='false'
        @close='closeDialog'
        width="90%">
        <el-dialog
          width="96%"
          :close-on-click-modal="false"
          :visible.sync="isChuanganqi"
          :modal="true"
          @close='closeDialoginner'
          top="3vh"
          append-to-body
         >
          <div class="dialog-title">
            <p>
              <span>显示详情</span>
            </p>
          </div>

          <div style="width: 100%;height:85vh;">
            <chuanganqi :isShow="isChuanganqi"></chuanganqi>
          </div>
        </el-dialog>
        <el-dialog
          width="650px"
          :close-on-click-modal="false"
          :visible.sync="innerVisible"
          :modal="true"
          append-to-body
        >
          <div class="dialog-title">
            <p>
              <span>在线直播</span>
            </p>
          </div>

          <div style="width: 610px;height:500px;" id="video">
            <!--<iframe :src="riskPointDetail.baseInfo.ipCameraUrl+riskPointDetail.baseInfo.token.accessToken" style="width:610px;height:500px;" frameborder="0"></iframe>-->
          </div>

        </el-dialog>


        <div v-if="dialogShow && riskPointDetail != null">
          <div class="dialog-title">
            <p>
            <span>
              风险点名称：{{riskPointDetail.baseInfo.riskPointName}}
            </span>
            </p>
            <div>
              <!--<p v-if="riskPointDetail.baseInfo.riskPointName =='橙-设备场所类风险点2' || riskPointDetail.baseInfo.riskPointName =='橙-设备场所类风险点1' || riskPointDetail.baseInfo.riskPointName =='超标准洪水、粉尘' || riskPointDetail.baseInfo.riskPointName ==' 降排水'">
                <a @click="showInnerChuanganqi" >
                  &lt;!&ndash;<img src="../../../assets/image/icon/cgq.png" alt="传感器" style="width: 25px;height: 25px;">&ndash;&gt;
                  <img src="../../../assets/image/icon/icon_chuanganqi.png" title="传感器" style="width: 25px;height: 25px;">
                </a>
              </p>-->
              <p class="camera" v-if="riskPointDetail.baseInfo.hasIpCamera">
                <!--<a :href="riskPointDetail.baseInfo.ipCameraUrl+riskPointDetail.baseInfo.token.accessToken" target="view_window">
                  <img src="../../../assets/image/icon/camera.png" alt="">
                </a>-->
                <a @click="showInnerVisible">
                  <!--<img src="../../../assets/image/icon/camera.png" alt="直播">-->
                  <img src="../../../assets/image/icon/icon_shexiangtou.png" title="直播">
                </a>
              </p>

              <p v-if="riskPointDetail.baseInfo.isOutOfControl=== 0">
                <img src="../../../assets/image/icon/risk-kun.png" alt="">
                <span>受控</span>
              </p>

              <p v-if="riskPointDetail.baseInfo.isOutOfControl=== 1">
                <img src="../../../assets/image/icon/risk-status.png" alt="">
                <span>预警</span>
              </p>
            </div>
          </div>
          <div class="tabs-toggle-box">

            <div class="left-img" v-if="noImg">
              <viewer>
                <img :src="$commonFun.judgeImgsrc(riskPointImg)" :onerror="defaultImg" alt="" style="cursor: pointer;">
              </viewer>
            </div>
            <div class="left-img" v-if="!noImg">
              <viewer>
                <img src="../../../assets/image/noimg.png" alt="" style="cursor: pointer;">
              </viewer>
              <!--<img src="http://aqpt.anquanzhuli.com//upload/20191171023546619415.jpg">-->
            </div>
            <div class="right-risk-info">

              <Tabs :pointDetailData="riskPointDetail"></Tabs>
            </div>
          </div>
        </div>

      </el-dialog>
    </div>
</template>
<script>
  // import EventBus from '../../../../src/assets/js/eventbus'
  import {mapState, mapGetters} from 'vuex'

  import Tabs from '../../popupContent/Tabs'
  import chuanganqi from '../../popupContent/chuanganqiBox'

  import "../../../assets/js/swiper.min.css"
  import "../../../assets/js/swiper.min"

  // 1.根据地图模块分类引入

  //  map1
  import map1box1 from './map1/map1box1';
  import map1box2 from './map1/map1box2';

//map2
  import map2box1 from './map2/map1box1';
  import map2box2 from './map2/map1box2';
  import map2box3 from './map2/map1box3';

export default {
    name: "mapTab",
    components:{
      //map1
      map1box1, map1box2,

      //map2
      map2box1, map2box2, map2box3,
      Tabs, chuanganqi
    },

    data() {
        return {
          defaultImg: 'this.src="' + require('../../../assets/image/defaultImg.png') + '"',
          company : -1,
          activeClass: 0,
          itmeList : null,
          riskPointList : null,
          mapArr:[],
          dialogShow: false,
          riskPointDetail: null,
          noImg: false,
          innerVisible: false,
          loading: false,
          changeMapTime: 0, //定义一个计时器 ws推送数据后开始计时
          isChuanganqi: false
        }
    },
    mounted(){
      this.company = this.$route.query.company;
      // console.log(this.company)

      //获取中间地图导航栏
      var _this = this
      _this.getMapListFn();

      /*eventBus.$on('firstTest',(val)=>{
        console.log('监听成功', val)
      });*/
    },
    computed:{
      ...mapGetters([
        'getRiskPointDetail',
        'getChangeMapList'
      ])
    },

    watch: {
      // 风险详情
      getRiskPointDetail:function (val) {
        console.log(val)
        let riskPImg=val.baseInfo.riskPointImg;
        if(riskPImg){
          this.noImg=true;
          this.riskPointImg=riskPImg;
        }else{
          this.noImg=false;
        }
      },
      getChangeMapList: function (val, oldVal) {
        console.log('有新数据推送', val);
        // this.getMapListFn();

        var that = this;
        if (that.changeMapTime == 0) {
          that.changeMapTime = setTimeout(() => {
            that.getMapListFn()
          }, 2000)
        } else {
          clearTimeout(that.changeMapTime)
          that.changeMapTime = setTimeout(() => {
            that.getMapListFn()
          }, 2000)
        }
      }
    },
    methods:{
      closeDialoginner(){
        console.log('guanbi')
        this.isChuanganqi = false
        eventBus.$emit('closeBox', true);
      },
      closeDialog(){
        // this.$store.commit('setPointDetail',{});
        // this.$set(riskPointDetail.cIndex1)
      },
      changeLoading(data){
        this.loading = data
        console.log(data)
      },
      // 显示直播视频
      showInnerVisible(){
        var that = this
        this.innerVisible = true;

        console.log(that.riskPointDetail.baseInfo.ipCameraUrl);
        setTimeout(function () {
          var videoObject = {
            container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class
            variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
            autoplay: true, //自动播放
            live: true,
            // loaded: 'loadHandler',
            html5m3u8: true, //是否使用hls，默认不选择，如果此属性设置成true，则不能设置flashplayer:true,
            video: that.riskPointDetail.baseInfo.ipCameraUrl //视频地址(必填)
          }
          // 定义一个对象
          var player = new ckplayer(videoObject);
          console.log(player)
        }, 1000)

      },
      showInnerChuanganqi(){
        this.isChuanganqi = true
      },
      getMsgFormSon(data){
        console.log(data)
        console.log(this.$store.state.riskPointDetail)
        this.riskPointDetail = this.$store.state.riskPointDetail
        this.dialogShow = data
      },
      getItme(index) {
        // this.activeClass = -1;
        var that = this
        setTimeout(()=>{
          that.activeClass = index;
        },300);
      },

      swiperFn(){
        var mySwiper = new Swiper ('.swiper-container', {
          // direction: 'vertical',
          slidesPerView: 4,
          spaceBetween:0,

          // 如果需要前进后退按钮
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',

        })
      },

      //获取中间地图导航栏
      getMapListFn(){
        this.mapArr = [];
        let _this = this;
        let obj = {
          gId:this.$port.gId,
          cId:this.$port.cId,
        };
        this.$axios.AxiosMethods("get",this.$api.getMapList,obj,function (res) {
          // console.log(res);
          _this.itmeList = res.data;
          setTimeout( () => {
            _this.swiperFn();
          },3000)

          //  获取地图里面的点、线、面
          _this.getRiskPointListFn();

        })
      },

      //  获取地图里面的点、线、面
      getRiskPointListFn(){
        let _this = this;
        let obj = {
          gId:this.$port.gId,
          cId:this.$port.cId,
        };
        this.$axios.AxiosMethods("get",this.$api.riskPointList,obj,function (res) {
          // console.log(res);
          let parentArr = [];
          _this.itmeList.forEach((item)=>{
            let arr = [];
            res.data.forEach((itemChild)=>{
              if(item.mapId == itemChild.entMapId){
                arr.push(itemChild);
              }
            })
            parentArr.push(arr);
          });

          _this.mapArr = parentArr;
          /*console.log(_this.mapArr)
          console.log(_this.mapArr.length)*/

        })
      },

    }
}
</script>
<style scoped lang="less" type="text/less" >
  .mapTabPage{
        font-size: 0.1rem;
        /*height: 0.42rem;
        line-height: 0.42rem;*/
        background-color: #042B5A;
        .nav{
            width: 100%;
            height: 0.42rem;
            line-height: 0.42rem;
            background-color: #042B5A;

            .nav-box{
              position: relative;

              .swiper-container {
                  height: 100%;
                  width: 92%;
                }

              .swiper-button-prev{
                background-size:10px;
                background-image: url("../../../assets/image/swiper/left_dal.png");
                left: -3px;
              }
              .swiper-button-next{
                background-size:10px;
                background-image: url("../../../assets/image/swiper/right_dal.png");
                right: -3px;
              }



              p{
                width: 1.21rem;
                height: 0.42rem;
                cursor: pointer;
                text-align: center;
                color: #fff;
                display: inline-block;
                border-radius: 2px;
                /*border: 0.01rem solid #b1abab;*/
                /*border: 0.01rem solid transparent;*/
                background-color: #042B5A;
                float: left;
              }
              p:hover{
                background-color: #127CFF;
              }
              .active{
                background-color: #127CFF;
              }
            }

        }

        .map-box{
            width: 100%;
        //   height: 100%;
            height: ~"calc(100% - 0.42rem)";
        }

        .innerdialog{
          .el-dialog{
            height: 30px;
          }
        }


        .dialog-title{
          position: absolute;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          top: 1px;
          left: 0;
          width: 90%;
          height: 46px;
          line-height: 46px;
          padding-left: 20px;
          >div {
            display: flex;
            flex-direction: row;
            align-items: center;
            p{
              display: flex;
              flex-direction: row;
              align-items: center;
              img{
                width: 22px;
                height: 22px;
                /*margin-right: 10px;*/
              }
            }
            .camera{
              img{
                /*vertical-align: text-top;*/
              }
            }
          }


        }

        .tabs-toggle-box{
          display: flex;
          .left-img{
            width: 280px;
            height: auto;
            border-radius: 6px;
            padding: 0 6px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-top: 15px;
            img{
              width: 90%;
              height: 280px;
              object-fit: cover;
            }
          }
          .right-risk-info{
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
          }
        }

  }
</style>
<style >
  .station-map-box2 .el-dialog--small{
    width: 86% ;
  }
</style>

