<template>
  <div class="c-user-page-top">
    <div class="title">{{ pageTitle }}</div>
    <div class="top-right">
      <div v-for="(n, index) in linkList" :key="n.name" class="right-item" :class="currentLink == n.name ? 'act' : ''" @click="toLink(n)">
        <div class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const props = defineProps({
  title: {
    type: String,
    default: '标题',
  },
});

let pageTitle = ref(props.title);

let linkList = reactive([
  { title: '帮助', name: 'help', icon: 'problem', iconSize: '30px', path: '' },
  { title: '我的', name: 'my', icon: 'user', iconSize: '30px', path: '/sub-operation-service/userCenter' },
  { title: '首页', name: 'home', icon: 'home', iconSize: '30px', path: '/sub-operation-service/home' },
]);

let currentLink = ref(null);

watch(
  () => props.title,
  () => {
    pageTitle.value = props.title;
  },
  {
    immediate: true,
  }
);

const toLink = (item) => {
  currentLink.value = item.name;
  if (item.path && item.path != '') {
    router.push(item.path);
  }
};
</script>
<style lang="scss" scoped>
.c-user-page-top {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  .title,
  .top-right {
    display: inline-flex;
    vertical-align: middle;
  }
  .title {
    font-size: 22px;
    font-weight: 500;
  }
  .top-right {
    justify-content: flex-start;
    gap: 40px;
    .right-item {
      display: inline-block;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: $color-fff;
      position: relative;
      cursor: pointer;
      .iconfont {
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      &.act {
        background: $color-main-table-header !important;
        border: 1px solid $color-fff;
        .iconfont {
          color: $color-main;
        }
      }
    }

    .right-item:hover {
      background: $color-main-table-header !important;
      border: 1px solid $color-fff;
      .iconfont {
        color: $color-main;
      }
    }
  }
}
</style>
