<template>
  <div class="app-container">
    <div class="box">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="mt30">
            <div class="center-menu">
              <el-avatar :size="100" :src=" fillImgUrl(myform.avatar)" />
              <h3>{{ myform.nickName }}</h3>
              <ul>
                <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>
            </div>
          </el-card>
        
        </el-col>
        <el-col :span="18">
          <router-view />
        </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 myform = ref({})
const menus = ref([
  {
    name: '个人会员',
    routeName: 'myInfo',
    picUrl1: '/img/tool01.png',
    picUrl2: '/img/tool01_dwn.png',
    isActive: false
  },
  {
    name: '单位信息',
    routeName: 'myTeam',
    picUrl1: '/img/tool02.png',
    picUrl2: '/img/tool02_dwn.png',
    isActive: false
  },
  {
    name: '我的赛事',
    routeName: 'myMatch',
    picUrl1: '/img/tool03.png',
    picUrl2: '/img/tool03_dwn.png',
    isActive: false
  },
  {
    name: '我的培训',
    routeName: 'myTrain',
    picUrl1: '/img/tool04.png',
    picUrl2: '/img/tool04_dwn.png',
    isActive: false
  }
])

onMounted(() => {
  myform.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: #C5161E;
  background-color: #f9e7e8;
  border-radius: 20px;
}
</style>