<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 ? '签证审核记录' : 'Visa Review record',
    routeName: 'myVisa',
    picUrl1: '/img/fp.svg',
    picUrl2: '/img/fp_dwn.svg',
    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((language.value == 0? menus3.value: menus3En.value), (m) => {
    return m.routeName === route.name
  })
  if(currMenu) {
    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>