<template>
  <section class="screen search-list-container">

    <empty-item v-if="empty" :size="60" empty-text="暂无搜索内容"></empty-item>
    <scroll-view
      :security-size="20"
      v-else
    >

      <template
          v-for="(item,index) in typeData"
      >
        <section
            :key="'search-list-'+index"
            class="search-list-item"
            v-if="data[layoutData[item].key] && data[layoutData[item].key].length>0"
        >
          <header class="search-list-header">{{layoutData[item].label}}</header>

          <template
              v-for="(cItem,cIndex) in data[layoutData[item].key]"
          >
            <!--  相关房间   -->
            <aside v-if="item === SearchListType.home"
                   class="search-list-home rowACenter cursor-pointer"
                   :key="'search-room-'+cIndex"
                   @click="openDetail(cItem,OpenType.room)"
            >
              <v-image class="search-list-home-avatar" :src="cItem.head_pic" radius="50%"></v-image>
              <div class="flex-1 search-list-home-content">
                <div class="line-1">{{cItem.nick_name}}</div>
                <div class="line-1 search-list-id">房间ID：{{cItem.room_number}}</div>
              </div>
              <div class="search-list-home-button center">交友</div>
            </aside>
            <!--  其他   -->
            <aside v-else class="search-list-user rowACenter cursor-pointer"
                   :key="'search-user-'+cItem.uid"
                   @click="openDetail(cItem,item === SearchListType.play ? OpenType.play : OpenType.user)"
            >
              <v-image class="search-list-user-avatar" radius="50%" :src="cItem.head_pic"></v-image>
              <div class="flex-1 search-list-user-content">
                <div class="line-1">{{cItem.nick_name}}</div>
                <div class="line-1 search-list-id">ID：{{cItem.uid}}</div>
              </div>
              <layout-status></layout-status>
            </aside>
          </template>
        </section>
      </template>
    </scroll-view>
  </section>
</template>

<script>
import {
  scrollView,
  vImage,
  emptyItem
} from '$components';
import props from '../props';
import data from '../data/data';
import SearchListType from '../const/type';
import layoutStatus from '$layout/layout-status';
import personalDetail,{OpenType} from '$utils/control/personal-detail';
export default {
  name: "search-list",

  data(){
    return {
      layoutData:data,
      SearchListType,
      OpenType
    }
  },

  methods:{
    openDetail(item,type){

      personalDetail.openDetail(item,type);

    }
  },

  computed:{
    typeData(){
      if (data[this.type] === undefined) {
        return Object.keys(data);
      } else {
        return [this.type];
      }
    },

    empty(){
      let length = 0;
      this.typeData.map((item)=>{
        let key = this.layoutData[item].key;
        if (this.data[key]) {
          length = length + this.data[key].length;
        }
      });
      return length <= 0;
    }
  },

  components:{
    scrollView,
    vImage,
    layoutStatus,
    emptyItem
  },
  props
}
</script>

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