<template>
  <div class="nav">
    <div class="nav-left">
      <div class="nav-item"
           :class="activeCode===item.code?'nav-active':''"
           v-for="(item,index) in navData"
           v-show="index<3 && item.noShow"
           @click="checkNav(item,index)"
           :key="'navC'+index"
      >
        <img :src="item.activeImg" v-if="activeCode===item.code" alt="">
        <img :src="item.img" v-else alt="">
      </div>
    </div>
    <div class="nav-right">
      <div class="nav-item"
           :class="activeCode===item.code?'nav-active':''"
           v-for="(item,index) in navData"
           v-show="index>=3 && item.noShow"
           @click="checkNav(item,index)"
           :key="'navR'+index"
      >
        <img :src="item.activeImg" v-if="activeCode===item.code" alt="">
        <img :src="item.img" v-else alt="">
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  props: {
    navList: {
      type: Array,
      default: () => []
    }
  },
  setup(props, contex) {
    const router = useRouter()
    const navData: any = []
    const proxyData = reactive({
      activeCode: 'air',
      navData: navData,
      setNavValue(val: any) {
        proxyData.navData = val
      },
      checkNav(item: any, index: any) {
        proxyData.activeCode = item.code
        contex.emit('changeNav', item)
      },
      setActiveCode(activeCode: any) {
        proxyData.activeCode = activeCode
      }
    })
    watch(
      props.navList, (newVal, oldValue) => {
        proxyData.setNavValue(newVal)
      }
    )
    onMounted(() => {
      proxyData.setNavValue(props.navList)
    })
    return {
      ...toRefs(proxyData)
    }
  }
})
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 16px;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  height: 52px;
  width: 93%;
  background: #FFFFFF;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 26px;
  z-index: 999;

  .nav-left, .nav-right {
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;

    .nav-item {
      position: relative;
      width: 36px;
      height: 36px;
      line-height: 36px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 25px;
      text-align: center;
      vertical-align: middle;

      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 23px;
        margin: 0 auto;
        //height: 23.5px;
      }
    }

    .nav-active {
      background: #FFE823;
    }
  }

  .nav-right {
    margin-right: 0;

    .nav-item {
      margin-right: 15px;
    }
  }
}
</style>