<template>
  <div class="mapTabPage">
    <div class="nav" v-if="itmeList != null">
      <div class="nav-box">
        <div class="swiper-container">
          <div class="swiper-wrapper">

            <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>

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

      </div>

    </div>

    <!-- mapImg:每个地图的背景图， mapArr：地图里面的点 -->
    <!-- company：公司类型 -->
    <div class="map-box map1-box" v-if="company == 0">
      <map1box1 v-for="(item, index) in itmeList" v-if="activeClass == index" :mapImg="item.mapRasterLayer" :key="index" />
    </div>

    <div class="map-box map1-box" v-if="company == 1">
      <map2box1 v-for="(item, index) in itmeList" v-if="activeClass == index" :mapImg="item.mapRasterLayer" :key="index"/>
    </div>

  </div>
</template>
<script>

  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

    },
    data() {
      return {
        company : -1,
        activeClass: 0,
        itmeList : null,
        // {
        //   mapId: 3416
        //   mapName: "3D地图"
        //   mapRasterLayer: "/upload/2019729142328114706.png"
        // }

        riskPointList : null,

        mapArr:[],
      }
    },
    mounted(){
      this.company = this.$route.query.company;

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

    },
    methods:{
      getItme(index) {
        this.activeClass = -1;

        setTimeout(()=>{
          this.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(){
        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)

        })
      },

    }
  }
</script>
<style lang="less" >


  .mapTabPage{
    font-size: 0.1rem;
    height: 0.42rem;
    line-height: 0.42rem;
    background-color: #042B5A;

    .nav{
      width: 100%;
      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)";
    }


  }
</style>

