<template>
  <div class="app-container">
    <div class="box">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card>
            <div class="center-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)">
                    <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)">
                    <img :src="m.isActive ? m.picUrl2 : m.picUrl1">
                    {{ m.name }}
                  </a>
                </li>
              </ul>
            </div>
          </el-card>

        </el-col>
        <el-col :span="18">
          <router-view :user="user"/>
        </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'

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

const user = ref({})
const menus = ref([
  {
    name: '基础信息',
    routeName: 'myInfo',
    picUrl1: '/img/nav_26.png',
    picUrl2: '/img/nav_26_dwn.png',
    isActive: false
  },
  {
    name: '修改密码',
    routeName: 'myPassword',
    picUrl1: '/img/nav_27.png',
    picUrl2: '/img/nav_27.png',
    isActive: false
  },
  {
    name: '团队认证',
    routeName: 'myCertification',
    picUrl1: '/img/nav_32.png',
    picUrl2: '/img/nav_32_dwn.png',
    isActive: false
  },
  {
    name: '选手管理',
    routeName: 'myMatch',
    picUrl1: '/img/nav_31.png',
    picUrl2: '/img/nav_31_dwn.png',
    isActive: false
  },
  {
    name: '我的报名',
    routeName: 'myMatch',
    picUrl1: '/img/nav_28.png',
    picUrl2: '/img/nav_28_dwn.png',
    isActive: false
  },
  {
    name: '我的预定',
    routeName: 'myMatch',
    picUrl1: '/img/nav_29.png',
    picUrl2: '/img/nav_29_dwn.png',
    isActive: false
  },
  {
    name: '系统消息',
    routeName: 'myTrain',
    picUrl1: '/img/nav_30.png',
    picUrl2: '/img/nav_30_dwn.png',
    isActive: false
  }
])
const menusPersonal = ref([
    {
      name: '基础信息',
      routeName: 'myInfo',
      picUrl1: '/img/nav_26.png',
      picUrl2: '/img/nav_26_dwn.png',
      isActive: false
    },
    {
      name: '修改密码',
      routeName: 'myPassword',
      picUrl1: '/img/nav_27.png',
      picUrl2: '/img/nav_27.png',
      isActive: false
    },
    {
      name: '我的报名',
      routeName: 'myMatch',
      picUrl1: '/img/nav_28.png',
      picUrl2: '/img/nav_28_dwn.png',
      isActive: false
    },
    {
      name: '我的预定',
      routeName: 'myMatch',
      picUrl1: '/img/nav_29.png',
      picUrl2: '/img/nav_29_dwn.png',
      isActive: false
    },
    {
      name: '系统消息',
      routeName: 'myTrain',
      picUrl1: '/img/nav_30.png',
      picUrl2: '/img/nav_30_dwn.png',
      isActive: false
    }
])

onMounted(() => {
  user.value = useUserStore().user || {}

  const currMenu = _.find(menus.value, (m) => {
    return m.routeName === route.name
  })
  if (currMenu) {
    currMenu.isActive = true
  }
})

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

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

<style scoped lang="scss">
.app-container {
  background: #f5f7f9;
}

.grid-content {
  background: #fff;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}

.center-menu {
  text-align: center;

  li {
    margin-bottom: 15px;
  }
}

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

.active {
  color: #fff;
  background: linear-gradient(90deg, #8623FC, #453DEA);
  border-radius: 20px;
}
</style>