<template>
  <div class="n-note-list" :class="classes">
    <template v-for="(data, index) in dataList">
      <u-note :key="index" v-bind="data" :style="styles"></u-note>
    </template>
    <template v-if="flowCount">
      <template v-for="i in flowCount">
        <span :key="'i' + i" class="n-node-empty" :style="styles"></span>
      </template>
    </template>
  </div>
</template>
<script>
import UNote from '@uif/next/lib/components/note'
import {prop, toNumber} from '@uif/next/lib/utils/tools'
export default {
  name: 'n-note-list',
  components: {
    UNote
  },
  props: {
    // noteProps 集合
    dataList: prop.array(),
    // mode=flow模式下，列的数量
    flow: prop.stringNumber(6),
    // 模式
    mode: prop.inArray(['text', 'horizontal', 'vertical', 'flow'], false, true),
    // 间距（仅支持middle）
    space: prop.inArray(['small', 'middle', 'large'], false, true),
    // 场景（暂不支持）
    scene: prop.inArray(['info', 'success', 'warning', 'error'], false, true)
  },
  computed: {
    classes ({mode, scene, space}) {
      return {
        [`n-note-list-${mode}`]: mode,
        [`n-note-list-scene-${scene}`]: scene,
        [`n-note-list-space-${space}`]: space
      }
    },
    flowCount ({mode, flow}) {
      return mode === 'flow' ? toNumber(flow) : 0
    },
    styles ({flowCount}) {
      return flowCount ? {width: (100 / flowCount) + '%'} : null
    }
  }
}
</script>
