<template>
  <div ref="cell"></div>
</template>
<script>
  import Vue from 'vue'
  import moment from 'moment'
  export default {
    name: 'TableExpand',
    props: {
      handler: Function,
      classes: Object,
      styles: Object,
      type: String,
      typeDesc: String,
      columns: Array,
      table: Array,
      table2: Array,
      tempTable: Array,
      rowSelection: Array,
      addprops: Object,
      msg: Object,
      data: Array,
      rows: Array
    },
    data () {
      return {
        defaultSelection: moment('1950-01-01T10:40:14.674Z').format()
      }
    },
    methods: {
      compile () {
        var typeDesc = ''
        var classes = ''
        var icon = ''
        this.$el.innerHTML = ''

        switch (this.type) {
          case 'add':
            typeDesc = '新增'
            icon = 'add'
            classes = this.classes + ` green`
            break
          case 'save':
            typeDesc = '儲存'
            icon = 'save'
            classes = this.classes + ` blue`
            break
          case 'delete':
            typeDesc = '刪除'
            icon = 'delete'
            classes = this.classes + ` red`
            break
          case 'cancel':
            typeDesc = '取消'
            icon = 'cancel'
            classes = this.classes + ` grey`
            break
          default:
            typeDesc = this.typeDesc
            icon = ''
            classes = this.classes
        }
        var component = new Vue({
          functional: true,
          render: (createElement) => {
            // this.msg = this
            return createElement(
              'h4',
              [
                createElement('Button', {
                  attrs: {
                    // name: headingId,
                  },
                  /* data () {
                    return { context: 'hello' }
                  }, */
                  style: this.styles,
                  'class': classes,
                  on: {
                    click: (event) => {
                      this.handler()
                    }
                  }
                },
                  [createElement('i', {
                  }, icon), typeDesc])
              ]
            )
          }
        })
        const Cell = component.$mount()
        this.$refs.cell.appendChild(Cell.$el)
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.compile()
      })
    }
  }
</script>
<style scoped> 
  div{ float:left} 
</style>
