<script>
import Skeleton from './skeleton'

function renderRow(h, props) {
  const rs = []
  for (let i = 0; i < props.value; i++) {
    rs.push(h(Skeleton, {
      props: {
        height: '18px',
        radius: '9px'
      }
    }))
  }
  return rs
}

export default {
  name: 'UiSkeletonRows',
  functional: true,
  props: {
    value: {
      type: Number,
      default: 1
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  render(h, context) {
    return h('div', {
      class: 'ui-skeleton-rows',
      style: {
        width: context.props.width
      }
    }, renderRow(h, context.props))
  }
}
</script>
<style lang="less">
.ui-skeleton-rows{
  .ui-skeleton{
    margin: 10px 0;
    &:first-child{
      margin-top: 0;
    }
    &:last-child{
      margin-bottom: 0;
    }
  }
}
</style>
