<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="user.utype=='2'">
                <li v-for="(m, i) in menus"
                    :key="i"
                    :class="{ active: m.isActive }"
                >
                  <a href="javascript:void(0)" @click="toInfo(m,menus)">
                    <img :src="m.isActive ? m.picUrl2 : m.picUrl1">
                    {{m.name }}
                  </a>
                </li>
              </ul>
              <ul v-if="user.utype=='1'">
                <li
                    v-for="(m, i) in menusPersonal"
                    :key="i"
                    :class="{ active: m.isActive }"
                >
                  <a href="javascript:void(0)" @click="toInfo(m,menusPersonal)">
                    <img :src="m.isActive ? m.picUrl2 : m.picUrl1">
                    {{ m.name }}
                  </a>
                </li>
              </ul>
              <ul v-if="user.utype=='3'">
                <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>
            </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 menus = 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?'团队认证':'Organization Recognition',
    routeName: 'myCertification',
    picUrl1: '/img/nav_32.png',
    picUrl2: '/img/nav_32_dwn.png',
    isActive: false
  },
  {
    name: language.value==0?'选手管理':'Athlete Management',
    routeName: 'myMember',
    picUrl1: '/img/nav_31.png',
    picUrl2: '/img/nav_31_dwn.png',
    isActive: false
  },
  {
    name: language.value==0?'我的报名':'My Registration',
    routeName: 'myMatch',
    picUrl1: '/img/nav_28.png',
    picUrl2: '/img/nav_28_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?'系统消息':'System messages',
    routeName: 'mySms',
    picUrl1: '/img/nav_30.png',
    picUrl2: '/img/nav_30_dwn.png',
    isActive: false
  }
])
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
  }
])
const menusPersonal = 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 Registration',
      routeName: 'myMatch',
      picUrl1: '/img/nav_28.png',
      picUrl2: '/img/nav_28_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?'系统消息':'System messages',
      routeName: 'mySms',
      picUrl1: '/img/nav_30.png',
      picUrl2: '/img/nav_30_dwn.png',
      isActive: false
    }
])
let currMenu
onMounted(() => {
  if(!user.utype){
    router.push({name: 'home'})
    return
  }
  if(user.utype=='1'){
    currMenu = _.find(menusPersonal.value, (m) => {
      return m.routeName === route.name
    })
    currMenu.isActive = true
  }
  console.log(route.name)

  if(user.utype=='2'){
    currMenu = _.find(menus.value, (m) => {
      return m.routeName === route.name
    })
    currMenu.isActive = true
  }
  if(user.utype=='3'){
    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: linear-gradient(90deg, #8623FC, #453DEA);
  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;
    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;
    height: calc(100vh - 80px);overflow: auto;top: 80px;
  }
}
.app-container{min-height: 80vh;}
</style>