<script>
import { Row, Col } from 'ant-design-vue/es/grid/'
import { ColProps } from 'ant-design-vue/es/grid/Col'

const Item = {
  name: 'RowItem',
  props: ColProps,
  inject: {
    col: {
      type: Number
    }
  },
  render () {
    const params = {}
    Object.keys(this.$props).forEach((key) => {
      const d = this.$props[key]
      if (d) {
        params[key] = d
      }
    })
    return (
      <Col {...{ props: { ...responsive[this.col], ...params } }}>
        {this.$slots.default}
      </Col>
    )
    // return (<div>aaaa</div>)
  }
}

const responsive = {
  1: { xs: 24 },
  2: { xs: 24, sm: 12 },
  3: { xs: 24, sm: 12, md: 8 },
  4: { xs: 24, sm: 12, md: 6 }
}

export default {
  name: 'RowList',
  Item: Item,
  components: {
    Row
  },
  render (createElement, params) {
    const html = []
    const notShow = []
    const showList = []
    if (this.$slots.default == null) {
      return
    }
    for (let i = 0; i < this.$slots.default.length; i++) {
      const itemSlots = this.$slots.default[i]
      if (itemSlots.data === undefined || itemSlots.tag === undefined) {
        notShow.push(itemSlots)
        continue
      }
      if (itemSlots.data.directives !== undefined && itemSlots.data.directives.length > 0 && !itemSlots.data.directives[0].value) {
        notShow.push(itemSlots)
        continue
      }
      showList.push(itemSlots)
    }
    if (this.col === 1) {
      for (let i = 0; i < showList.length; i++) {
        html.push((<Row class="form-row" {...{ props: { gutter: this.gutter } }}>{showList[i]}</Row>))
      }
      for (let i = 0; i < notShow.length; i++) {
        html.push((<Row class="form-row" {...{ props: { gutter: this.gutter } }}>{notShow[i]}</Row>))
      }
    }
    if (this.col === 2) {
      for (let i = 0; i < showList.length; i++) {
        if (2 * i === showList.length) {
          html.push((<a-row class="form-row" {...{ props: { gutter: this.gutter } }}>{showList[2 * i]}</a-row>))
          break
        }
        html.push((<a-row class="form-row" {...{ props: { gutter: this.gutter } }}>{showList[2 * i]}{showList[2 * i + 1]}</a-row>))
        if (2 * i + 1 === showList.length) {
          break
        }
      }

      for (let i = 0; i < notShow.length; i++) {
        if (2 * i === notShow.length) {
          html.push((<a-row class="form-row" {...{ props: { gutter: this.gutter } }}>{notShow[2 * i]}</a-row>))
          break
        }
        html.push((<a-row class="form-row" {...{ props: { gutter: this.gutter } }}>{notShow[2 * i]}{notShow[2 * i + 1]}</a-row>))
        if (2 * i + 1 === notShow.length) {
          break
        }
      }
    }
    if (this.col === 3) {
      for (let i = 0; i < showList.length; i++) {
        if (3 * i === showList.length) {
          html.push((<a-row class="form-row" {...{ props: { gutter: this.gutter } }}>{showList[3 * i]}</a-row>))
          break
        }
        html.push((<a-row class="form-row" {...{ props: { gutter: this.gutter } }}>{showList[3 * i]}{showList[3 * i + 1]}{showList[3 * i + 2]}</a-row>))
        if (3 * i + 1 === showList.length) {
          break
        }
      }

      for (let i = 0; i < notShow.length; i++) {
        if (3 * i === notShow.length) {
          html.push((<a-row class="form-row" {...{ props: { gutter: this.gutter } }}>{notShow[3 * i]}</a-row>))
          break
        }
        html.push((<a-row class="form-row" {...{ props: { gutter: this.gutter } }}>{notShow[3 * i]}{notShow[3 * i + 1]}{notShow[3 * i + 2]}</a-row>))
        if (3 * i + 1 === notShow.length) {
          break
        }
      }
    }
    return createElement('div', html.map(function (item) {
      return (item)
    }))
  },
  props: {
    title: {
      type: String,
      default: '',
      required: false
    },
    col: {
      type: Number,
      required: false,
      default: 2
    },
    gutter: {
      type: Number,
      required: false,
      default: 16
    },
    size: {
      type: String,
      required: false,
      default: 'large'
    },
    layout: {
      type: String,
      required: false,
      default: 'horizontal'
    }
  },
  provide () {
    return {
      col: this.col > 4 ? 4 : this.col
    }
  }
}
</script>

<style scoped>

</style>
