<template>
  <div class="app-container">
    <div class="box">
      <el-row :gutter="20">
        <el-col :lg="5" :md="5" :xl="6" :sm="8" :xs="8">
          <el-card class="mb20">
            <div :class="language==0?'center-menu':'center-menu en-menu'">
              <ul v-if="language==0">
                <li
                    v-for="(m, i) in menus3"
                    :key="i"
                    :class="{ active: m.isActive }"
                >
                  <a href="javascript:void(0)" @click="toInfo(m,menus3)">
                    <img :src="m.isActive ? m.picUrl2 : m.picUrl1">
                    {{ m.name }}
                  </a>
                </li>
              </ul>
              <ul v-if="language==1">
                <li
                    v-for="(m, i) in menus3En"
                    :key="i"
                    :class="{ active: m.isActive }"
                >
                  <a href="javascript:void(0)" @click="toInfo(m,menus3En)">
                    <img :src="m.isActive ? m.picUrl2 : m.picUrl1">
                    {{ m.name }}
                  </a>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :lg="19" :md="19" :xl="18" :sm="16" :xs="16">
          <router-view :user="user" class="rightPart"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {onMounted} from '@vue/runtime-core'
import useUserStore from '@/store/modules/user'
import _ from 'lodash'
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)

const route = useRoute()
const router = useRouter()

const user = useUserStore().user || {}

const menus3 = ref([
  // {
  //   name: language.value==0?'基础信息':'Basic Information',
  //   routeName: 'myInfo',
  //   picUrl1: '/img/nav_26.png',
  //   picUrl2: '/img/nav_26_dwn.png',
  //   isActive: false
  // },
  {
    name: language.value==0?'修改密码':'Change Password',
    routeName: 'myPassword',
    picUrl1: '/img/nav_27.png',
    picUrl2: '/img/nav_27_dwn.png',
    isActive: false
  },
  {
    name: language.value==0?'我的预订':'My Reservation',
    routeName: 'myReservation',
    picUrl1: '/img/nav_29.png',
    picUrl2: '/img/nav_29_dwn.png',
    isActive: false
  },
  // {
  //   name: language.value==0?'票务预订':'Ticket Reservation',
  //   routeName: 'seat_order',
  //   picUrl1: '/img/c7.png',
  //   picUrl2: '/img/c7.png',
  //   isActive: false
  // },
  {
    name: language.value==0?'发票申请':'Electronic invoice',
    routeName: 'myKP',
    picUrl1: '/img/fp.svg',
    picUrl2: '/img/fp_dwn.svg',
    isActive: false
  }
])
const menus3En = ref([
  // {
  //   name: language.value==0?'基础信息':'Basic Information',
  //   routeName: 'myInfo',
  //   picUrl1: '/img/nav_26.png',
  //   picUrl2: '/img/nav_26_dwn.png',
  //   isActive: false
  // },
  {
    name: language.value==0?'修改密码':'Change Password',
    routeName: 'myPassword',
    picUrl1: '/img/nav_27.png',
    picUrl2: '/img/nav_27_dwn.png',
    isActive: false
  },
  {
    name: language.value==0?'我的预订':'My Reservation',
    routeName: 'myReservation',
    picUrl1: '/img/nav_29.png',
    picUrl2: '/img/nav_29_dwn.png',
    isActive: false
  },
  // {
  //   name: language.value==0?'票务预订':'Ticket Reservation',
  //   routeName: 'seat_order',
  //   picUrl1: '/img/c7.png',
  //   picUrl2: '/img/c7.png',
  //   isActive: false
  // }
])

let currMenu
onMounted(() => {
  console.log(route.query)
  if(!user.utype){
    router.push({name: 'home'})
    return
  }
    currMenu = _.find(menus3.value, (m) => {
      return m.routeName === route.name
    })
    currMenu.isActive = true

})

const toInfo = (item,list) => {
  _.each(list, (m) => {
    m.isActive = false
  })
  item.isActive = true

  router.push({
    name: item.routeName
  })
}
</script>

<style scoped lang="scss">
:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}

.center-menu {
  text-align: center;

  li {
    margin-bottom: 15px;
  }
  &.en-menu{text-align: left;
    li{padding: 6px 0 6px 14px;
      a{display: flex;align-items: center;}
    }
    img{padding: 0;width: 26px;}
  }
}

li img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  padding: 5px;
}

.active {
  color: #fff;
  background: #000;
  border-radius: 20px;
}
@media (max-width: 500px) {
  .pd20{padding: 8px;}
  .el-card{box-shadow: none!important;
    :deep(.el-card__body){padding: 0!important;}
  }
  .el-col{padding: 0!important;}
  .center-menu{height: 100vh;padding: 20px 0;position: fixed;left: 0;z-index: 1;
    background: #F5F7F9;top: 80px;width: 100px;border-right: 1px solid #eee;
    li{font-size: 13px;padding:8px 10px;border-radius: 0;
      img{display: none}
      &.active{background: #fff;
        border-left: 2px solid var(--el-color-primary);
        color: var(--el-color-primary);}
    }
  }
  .rightPart{width: calc(100vw - 100px);left: 100px;position: fixed;        z-index: 1;
    height: calc(100vh - 80px);overflow: auto;top: 80px;background: #fff;
  }
}
.app-container{min-height: 80vh;}
</style>