<template>
  <div class="popup-user-container flex overflow absolute" v-show="vValue"
    :style="{
      'left': vX+'px',
      'top': vY+'px'
    }"
       @click.stop
  >
    <header class="popup-user-header">
      <aside class="row" v-if="!loadingStatus">
        <v-image class="popup-user-avatar" :src="vItem.head_pic" radius="50%"></v-image>
        <section class="flex-1 jCenter">
          <div class="rowACenter">
            <div class="popup-user-name line-1">{{vItem.nick_name}}</div>
            <layout-sex :type="vItem.sex" :birthday="vItem.birthday"></layout-sex>
          </div>
          <div class="popup-user-id">ID：{{vItem.uid}}</div>
        </section>
<!--        <div class="popup-user-at center cursor-pointer">@TA</div>-->
      </aside>
      <article class="popup-user-introduce line-4">{{vItem.autograph}}</article>
    </header>
    <section class="popup-user-info row between">
      <aside
          v-for="(item,index) in infoData"
          :key="'popup-user-info-'+index"
          :class="['popup-user-info-'+item.style]"
          class="popup-user-info-item row"
      >
        <v-image :src="item.icon" class="popup-user-info-icon" mode="center" backgroundColor="transparent"></v-image>
        <div class="flex-1">
          <div class="popup-user-info-label">{{item.label}}</div>
          <div class="popup-user-info-value">{{vItem[item.key] || 0}}</div>
        </div>
      </aside>
    </section>
    <footer class="flex-1 rowACenter">
      <template v-if="!loadingStatus">
        <template
            v-for="(item,index) in controlData"
            :key="'popup-user-control-'+index"
        >
          <template v-if="item.where?typeof item.where==='function'?item.where(vItem[item.key],vItem):vItem[item.key]===item.where:true">
            <div v-if="index!==0" class="popup-user-line"></div>
            <aside
                class="popup-user-control-item flex-1 center cursor-pointer"
                @click="trigger(item,index)"
            >
              <v-image class="popup-user-control-icon" backgroundColor="transparent" mode="center" :src="item.useKey&&control[item.useKey] ? item.activeIcon : item.icon"></v-image>
              <div class="popup-user-control-title">{{item.useKey&&control[item.useKey] ? item.activeLabel :item.label}}</div>
            </aside>
          </template>

        </template>
      </template>

    </footer>
  </div>
</template>

<script>
import {
  vImage,
  icon
} from '$components';
import infoData from '../data/info';
import controlData from '../data/control';
import props from '../props';
import mixins from '../mixins';
import layoutSex from '$layout/layout-sex';
export default {
  name: "popup-user",
  data(){
    return {
      infoData,
      controlData
    }
  },
  mixins,

  components:{
    vImage,
    icon,
    layoutSex
  },
  props
}
</script>

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