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

      <div @click="close" class="chat-close-wrap cursor-pointer absolute animate-rotate-hover">
        <icon type="close" class="chat-close"></icon>
      </div>

      <aside class="chat-left">
        <tab
          :data="tabData"
        >

          <template v-slot:header="{data,trigger,select}">
            <header class="chat-header row">
              <aside
                class="flex-1 center"
                v-for="(item,index) in data"
                :key="'chat-item-'+index"
                @click="trigger(index)"
                :class="{
                  'cursor-pointer': index !== select,
                  'chat-item-active': index === select
                }"
              >
                <v-image :src="index === select ? item.checkIcon :item.icon" mode="center" class="chat-header-item" backgroundColor="transparent"></v-image>
                <div class="chat-label">{{item.label}}</div>
              </aside>
            </header>
          </template>

          <template
            v-for="(item,index) in tabData"
            v-slot:[item.slot]
          >
            <component
              :is="item.component"
              v-if="item.component"
              :key="'chat-tab-content-'+index"
              :user="user"
              :uid="triggerUserId"
              :type="item.type"
            ></component>
          </template>

        </tab>
      </aside>

      <aside class="chat-left-line absolute"></aside>

      <aside class="flex-1" style="overflow: initial">
        <chat-content :uid="triggerUserId"
                      @close="close"
                      :pid="triggerUserPid" :use-user-info="triggerUser"></chat-content>
      </aside>

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

<script>
import {
  Popup,
  icon,
  vImage,
  tab
} from '$components';
import components from '../components';
import mixins from '../mixins';
import props from '../props';
export default {
  name: "popup-chat",
  components:{
    Popup,
    icon,
    vImage,
    tab,
    ...components
  },
  mixins,
  props,

}
</script>

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