<template>
  <div class="flow-main" @click="swiperIdx($event)">
    <template v-for="(item,idx) in navArr">
      <div :class="idx === navIdx ? 'flow-items active' : 'flow-items'">{{item.name}}</div>
    </template>
  </div>
  <component :is="navArr[navIdx]['components']"></component>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import dayCount from './dayCount/index.vue'
import flowSelect from './flowSelect/index.vue'
import monthCount from './monthCount/index.vue'
import browserCount from './browserCount/index.vue'
import sourceCount from './sourceCount/index.vue'

let navArr = [
  {
    name:'访问记录',
    components:flowSelect
  },
  {
    name:'日统计',
    components:dayCount
  },
  {
    name:'月统计',
    components:monthCount
  },
  {
    name:'浏览器统计',
    components:browserCount
  },
  {
    name:'来源统计',
    components:sourceCount
  },
],
    navIdx = ref(0)

let swiperIdx = function (e){
  let tag = e.target
  if(tag.classList[0] === 'flow-items'){
    let oFlowItems = document.getElementsByClassName('flow-items')
    oFlowItems[navIdx.value].classList.remove('active')
    navIdx.value = [...oFlowItems].indexOf(tag)
    oFlowItems[navIdx.value].classList.add('active')

  }

}
</script>

<style  src="~/styles/flow/index.scss"></style>
