<template>
  <section class="screen">
    <scroll-view>
      <template
        v-for="(item,index) in useConversation"
        :key="'service-'+index"
      >
        <aside class="chat-layout-item rowACenter cursor-pointer"
          :class="{'chat-layout-item-active':uid === item.uid}"
          @click="triggerOpenUserContent(item)"
           v-if="item.uid"
        >
          <v-image class="chat-layout-avatar" radius="50%" :src="item.head_pic">
            <div v-if="item.count && uid !== item.uid" class="chat-dot absolute center">
              <span>{{item.count}}</span>
            </div>
          </v-image>
          <div class="flex-1 chat-layout-content">
            <header class="rowACenter">
              <div class="chat-layout-title">{{item.nick_name}}</div>
              <!--          <div class="chat-layout-label center">官方</div>-->
              <!--              <div class="rowCenter chat-layout-label chat-layout-label-boy">-->
              <!--                <icon type="boy" class="chat-layout-label-icon"></icon>-->
              <!--                <div>14</div>-->
              <!--              </div>-->
              <layout-sex v-if="item.sex !== undefined" :type="item.sex" :birthday="item.birthday" class="chat-sex-margin"></layout-sex>
            </header>
            <div class="line-1 chat-message" v-if="item.message">{{item.message || ''}}</div>
          </div>
          <svg v-if="uid === item.uid" @click="deleteConversation(item)" class="chat-delete-icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2069" width="200" height="200"><path d="M799.2 874.4c0 34.4-28.001 62.4-62.4 62.4H287.2c-34.4 0-62.4-28-62.4-62.4V212h574.4v662.4zM349.6 100c0-7.2 5.6-12.8 12.8-12.8h300c7.2 0 12.8 5.6 12.8 12.8v37.6H349.6V100z m636.8 37.6H749.6V100c0-48.001-39.2-87.2-87.2-87.2h-300c-48 0-87.2 39.199-87.2 87.2v37.6H37.6C16.8 137.6 0 154.4 0 175.2s16.8 37.6 37.6 37.6h112v661.6c0 76 61.6 137.6 137.6 137.6h449.6c76 0 137.6-61.6 137.6-137.6V212h112c20.8 0 37.6-16.8 37.6-37.6s-16.8-36.8-37.6-36.8zM512 824c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6m-175.2 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0.8 20.8 17.6 37.6 37.6 37.6m350.4 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6" fill="#dadada" p-id="2070"></path></svg>
        </aside>
      </template>
    </scroll-view>


  </section>
</template>

<script>
import {
  vImage,
  icon,
  FlatList
} from '$components';
import props from '../props';
import mixins from '../mixins';
import layoutSex from '$layout/layout-sex';
import ScrollView from "$components/scroll-view/src/main";
export default {
  name: "chat-conversation",
  components:{
    ScrollView,
    icon,
    vImage,
    FlatList,
    layoutSex
  },
  mixins,
  props
}
</script>

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