<template>
  <section class="screen flex">
    <view-talking-cate @change="triggerChange" @input="triggerChangeName"></view-talking-cate>
    <aside class="flex-1 flex talking-container">
      <flat-list
          @fetch="fetch"
          :occupancy="64"
          indexes="rid"
          ref="flat"
          :first="false"
          :security-size="20"
      >
        <template v-slot:item="{item,index}">
          <layout-talking
              :key="'talking-'+item.rid"
              :item="item"
              :index="index"
          ></layout-talking>
        </template>
      </flat-list>
    </aside>
  </section>
</template>

<script>
import {
  vImage,
  FlatList
} from '$components';
import layoutTalking from '$layout/layout-talking';
import mixins from '../mixins';
import viewTalkingCate from '../../view-talking-cate';
export default {
  name: "view-talking",
  components:{
    vImage,
    viewTalkingCate,
    FlatList,
    layoutTalking
  },
  mixins
}
</script>

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