<template>
    <ul>
      <li v-for="(item,i) in menus" :class="activeI === i? 'active-menu' : ''" @click="activeI = i, go(item.val)"> {{ item.name }} </li>
    </ul>
  </template>
  
  <script>
  import { onMounted, reactive, toRefs } from "vue";
  import {useStore} from 'vuex'
  import { useRouter } from "vue-router";
  import bus from '../utils/bus.js'
  export default {
    name: "Header",
    props: ["pactiveI"],
    setup(props, ctx) { 
      const router = useRouter();
      const store = useStore();
      const state = reactive({
        menus:[
          {
            name: '日',
            val: 0
          },
          {
            name: '月',
            val: 1
          },
          {
            name: '年',
            val: 2
          }
        ],
        activeI: 0
      });
      onMounted(() => {
        if (props.pactiveI) {
          state.activeI = props.pactiveI;
        }
      });
      
      const go = (val) => {
        store.commit("changeSelectDate", val);
        bus.emit('foo', val);
      };
      return {
        ...toRefs(state),
        go
      };
    },
  };
  </script>
  
  <style lang="scss" scoped>
 ul {
    width: 300px;
    height: 100%;
    border-radius: 20px;
    display: flex;
    padding: 0 5px;
    justify-content: space-between;
    align-items: center;
    
    li {
      width: 100%;
      text-align: center;
      cursor: pointer;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 8px #99ACB0 inset;
      // border-radius: 5px;
      &.active-menu 
      {
        background:#A7DCF5;
      }
    }
  }
  </style>
  