<template>
  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="popup-personal row relative">

      <aside class="popup-personal-left flex overflow">
        <header class="personal-info center overflow">
          <v-image class="personal-avatar" radius=".1rem" :src="user.head_pic"></v-image>
          <section class="row center personal-info-header overflow">
            <div class="line-1 personal-nickname">{{user.nick_name}}</div>
            <aside class="personal-sex rowACenter"
              :class="['personal-sex-' + (user.sex===1?'boy':'girl')]"
            >
              <icon :type="user.sex===1?'boy':'girl'"></icon>
              <span class="personal-sex-left">{{$store.getters.age}}</span>
            </aside>
          </section>
          <section class="rowACenter personal-id">
            <div class="flex-1 rowACenter">ID:<span class="personal-id-margin">{{user.uid}}</span></div>
            <span class="cursor-pointer" @click="copy(user.uid)">复制</span>
          </section>
        </header>

        <section class="personal-menu flex-1 overflow">
          <aside
            v-for="(item,index) in menuData"
            :key="'menu-item-'+item.name"
            class="personal-menu-item rowCenter"
            @click="openPage(item.component)"
            :class="{
              'personal-menu-item-active': component === item.component,
            }"
          >
            <v-image :src="item.icon" mode="center" backgroundColor="transparent" class="menu-item-icon"></v-image>
            <span>{{item.label}}</span>
          </aside>
        </section>
      </aside>
      <!-- 展示menu对象 -->
      <aside class="flex-1 overflow">

        <template
          v-for="(item,index) in menuData"
        >
          <component
            v-if="componentDraw[item.component]"
            v-show="item.component === component"
            :is="item.useComponent || item.component"
            v-bind="item.attrs"
          >

          </component>
        </template>

      </aside>

      <!-- 关闭按钮 -->
      <div @click="close" class="absolute popup-personal-close animate-rotate-hover cursor-pointer">
        <icon type="close" class="popup-personal-close-icon"></icon>
      </div>

    </section>
  </popup>
</template>

<script>
import {
  Popup,
  vImage,
  icon
} from '$components';

import props from '../props';

import mixins from '../mixins';

import components from '../components';

export default {
  name: "popup-personal",

  mixins,

  props,

  components:{
    Popup,
    vImage,
    icon,
    ...components
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>