<script>
import { VueXTemplate } from '../../../utils/dom'

export default {
  props: {
    template: {
      type: String,
      default: null
    },
    data: {
      type: Object,
      default: () => ({
        theme: {}
      })
    }
  },
  mounted () {
    this.sorting()
    this.$emit('init')
  },
  methods: {
    sorting () {
      Array.from(document.querySelectorAll('[data-sequence]'))
        .sort(({ dataset: { sequence: a } }, { dataset: { sequence: b } }) => a.localeCompare(b))
        .forEach((item) => item.parentNode.appendChild(item))
    }
  },
  render (createElement) {
    if (this.template) {
      const keyValues = []
      const xTemplate = new VueXTemplate({
        template: this.template,
        data: this.data
      })
      const vnode = xTemplate.combine(keyValues)
      return vnode
    }
    return createElement('div', [''])
  }
}
</script>
