<template>
  <div class="cim-navs" :style="{'left':roleinfo.visibleMath?'412px':'20px'}">
    <div class="cim-navs-content">
      <div class="cim-navs-content-item"
           v-for="(item,index) in navs"
           :key="index"
           @click="handlerNavsSelect(index)"
           @mouseover="handlerNavsMouseOver(index)"
           @mouseleave="handlerNavsMouseLeave(index)"
      >
        <img class="cim-navs-content-item-img"
             :src="(item.image)"
             alt=""
             :style="item.select?'transform:scale(1.2)':item.focus?'transform:scale(1.2)':'transform:scale(1)'"
        />
        <span class="cim-navs-content-item-span">{{ item.label }}</span>
      </div>
      <!-- 历史影像 -->
      <!-- <div class="cim-navs-content-item"
        @click="showHistoryLayer()" 
        
        :style="!showHistoryLayer?'transform:scale(1.2)': 'transform:scale(1)'"
      >
        <img class="cim-navs-content-item-img"
             src="/images/trans.png"
             alt=""
        />
        <span class="cim-navs-content-item-span">历史影像</span>
      </div> -->
      <!-- 历史影像 -->
      <!-- <div class="cim-navs-content-item"
        @click="showImportShpfile()" 
        
        :style="!showImportShpfile?'transform:scale(1.2)': 'transform:scale(1)'"
      >
        <img class="cim-navs-content-item-img"
             src="/images/trans.png"
             alt=""
        />
        <span class="cim-navs-content-item-span">图层导入</span>
      </div> -->

    </div>
  </div>
  <div class="cim-menu" :class="menu.length?'cimMenuShow':'cimMenuHide'" :style="{'left': roleinfo.positionLeft + 'px'}">
    <div class="cim-menu-content">
      <div style="color:#fff;cursor: pointer;" @click="closeMenu">
        <img style="width: 20px;height: 20px;" src="/public/images/close.png" />
      </div>
      <div class="cim-menu-content-item"
           v-for="(item,index) in menu"
           :key="index"
           @click="menuClick(item)"
      >
        <img class="cim-menu-content-item-img"
             :src="(item.image)"
             alt=""
        />
        <span class="cim-menu-content-item-span">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import {defineComponent, reactive, toRefs,watch} from "vue";

/**
 * 底部导航组件
 * **/
export default defineComponent({
  name: 'Navs',
  props: ['location','toolnav','toolVisible'],
  setup(props, context) {
    let data = reactive({
      roleinfo:{
        visibleMath: props.location,
        positionLeft: '20',
        showHistoryLayer:false,
        showImportShpfile:false,
      },
      navs: props.toolnav,
      
      menu: [],
    })
    
    if(!data.roleinfo.visibleMath){
      data.roleinfo.positionLeft = '130'
    }else{
      data.roleinfo.positionLeft = '520'
    }
    
    watch(
      () => props.location,
      (newVal, oldVal) => {
        data.roleinfo.visibleMath = newVal
        if(!newVal){
          data.roleinfo.positionLeft = '130'
        }else{
          data.roleinfo.positionLeft = '520'
        }
      }
    )
    watch(
      () => props.toolnav,
      (newVal, oldVal) => {
        console.log('newVal',newVal)
        data.navs = newVal
        data.menu = []
      }
    )
    watch(
      () => props.toolVisible,
      (newVal,oldVal) => {
        methods.closeMenu()
      }

    )
    let methods = {
      // 导航选择
      handlerNavsSelect(index) {
        data.navs.forEach(r => r.select = false)
        data.navs[index].select = true
        data.menu = data.navs[index].children
        context.emit('handle-layers')
      },
      // 鼠标移入
      handlerNavsMouseOver(index) {
        data.navs[index].focus = true
      },
      // 鼠标移除
      handlerNavsMouseLeave(index) {
        data.navs[index].focus = false
      },
      // 历史影像显示隐藏
      showHistoryLayer(){
        data.roleinfo.showHistoryLayer = !data.roleinfo.showHistoryLayer;
        context.emit("showHistoryLayer",data.roleinfo.showHistoryLayer);
      },
      //导入shp数据
      showImportShpfile(){
        data.roleinfo.showImportShpfile = !data.roleinfo.showImportShpfile;
        context.emit("showImportShpfile",data.roleinfo.showImportShpfile);
      },
      //
      closeMenu(){
        data.navs.forEach(item =>{
          item.select = false
        })
        data.menu = []
        let datas = {
          id: 1,
          key: true
        }
        context.emit('change-menu-id', datas)
      },
      menuClick(item) {
        let datas = {
          id: item.id,
          key: false
        }
        context.emit('change-menu-id', datas)
      }
    };
    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>

<style lang="scss" scoped>
.cim-navs {
  position: absolute;
  right: 387px;
  top: 290px;
  z-index: 9;
  &-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &-item {
      width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin-bottom: 20px;

      &-img {
        width: 59px;
      }

      &-span {
        margin-top: 10px;
        color: #fff;
        text-shadow: 0 0 4px #000000;
        font-size: 16px;
      }
    }
  }
}
@keyframes mymove
{
  from {bottom:-100px;}
  to {bottom:50%;}
}
@-webkit-keyframes mymove 
{
  from {bottom:-100px;}
  to {bottom:50%;}
}
@keyframes myTopmove
{
  from {bottom:50%;}
  to {bottom:-2000px;}
}
@-webkit-keyframes myTopmove 
{
  from {bottom:50%;}
  to {bottom:-2000px;}
}
.cimMenuHide{
  animation: myTopmove 2s 1;
  -webkit-animation: myTopmove 2s 1;
  bottom: -3000px;
}
.cimMenuShow{
  animation: mymove 1s 1;
  -webkit-animation: mymove 1s 1;
  bottom: 50%;
}
.cim-menu {
  position: fixed;
  transform: translateY(50%);

  &-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 10px;

    &-item {
      width: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin-top: 20px;

      &-img {
        width: 57px;
      }

      &-span {
        margin-top: 10px;
        color: #fff;
        text-shadow: 0 0 4px #000000;
        font-size: 10px;
      }
    }
  }
}
</style>


