<template>
  <section class="screen flex">
    <view-cate @change="triggerChange" @input="triggerChangeName"></view-cate>
    <aside class="flex-1 flex overflow">
      <div class="play-with-title">{{cate_name}}</div>
      <div class="flex-1 overflow play-white-content">
        <flat-list
          @fetch="fetch"
          :occupancy="64"
          ref="fetch"
          indexes="uid"
          :first="false"
          :security-size="20"
        >
          <template v-slot:item="{item,index}">
            <layout-play
              :key="'play-'+item.pid"
              :item="item"
              :index="index"
            ></layout-play>
          </template>
        </flat-list>
      </div>
    </aside>
  </section>
</template>

<script>
import {
  vImage,
  FlatList
} from '$components';
import layoutPlay from '$layout/layout-play';
import mixins from '../mixins';
import viewCate from '../../view-cate';
export default {
  name: "view-play-with",
  components:{
    vImage,
    viewCate,
    FlatList,
    layoutPlay
  },
  mixins
}
</script>

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