<template>
  <div ref="cell"></div>
</template>
<script>
  import Vue from 'vue'
  import moment from 'moment'
  import ExportCsv from './export-csv'
  import Csv from '../utils/csv'
  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: {
      // handlerMethod: this.handler,
                // filename: '排序及過濾後之文件',
          // original: false
      exportCsv (params) {
        if (params.filename) {
          if (params.filename.indexOf('.csv') === -1) {
            params.filename += '.csv'
          }
        }
        else {
          params.filename = 'table.csv'
        }

        let columns = []
        let datas = []
        if (params.columns && params.data) {
          columns = params.columns
          datas = params.data
        }
        else {
          columns = this.columns
          if (!('original' in params)) params.original = true
          datas = params.original ? this.data : this.rows
        }
        let noHeader = false
        if ('noHeader' in params) noHeader = params.noHeader

        const data = Csv(columns, datas, ',', noHeader)
        ExportCsv.download(params.filename, data)
        // this.$emit('exportCsv', ExportCsv, params.filename, data, () => {
        // })
      },
      compile () {
        var typeDesc = ''
        var classes = ''
        var icon = ''
        this.$el.innerHTML = ''

        switch (this.type) {
          case 'add':
            typeDesc = '新增'
            icon = 'add'
            classes = this.classes + ` green`
            break
          case 'addModal':
            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 'export':
            typeDesc = '匯出原始文件'
            icon = 'input'
            classes = this.classes + ` pink`
            break
          case 'exportFilter':
            typeDesc = '排序及過濾後之文件'
            icon = 'input'
            classes = this.classes + ` pink`
            break
          case 'cancel':
            typeDesc = '取消'
            icon = 'cancel'
            classes = this.classes + ` grey`
            break
          default:
            typeDesc = this.typeDesc
            icon = ''
            classes = this.classes
        }
        var component
        if (this.type !== 'add' && this.type !== 'addModal' && this.type !== 'save' && this.type !== 'export' && this.type !== 'exportFilter') {
          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,
                    /* 'class': {
                      'green': true
                    },
                    style: {
                      marginRight: '7px'
                    }, */
                    on: {
                      click: (event) => {
                        this.handler()
                      }
                    }
                  },
                    [createElement('i', {
                    }, icon), typeDesc])
                ]
              )
            },
            props: {
              msg: '1'
            }
          })
        }
        else if (this.type === 'save') {
          component = new Vue({
            functional: true,
            render: (h) => {
              return (h(
                'h4',
                [
                  h('Button', {
                    attrs: {
                    },
                    style: this.styles,
                    'class': classes,
                    on: {
                      click: (event) => {
                        this.handler()
                      }
                    }
                  },
                    [h('i', {
                    }, icon), typeDesc])
                ]
              ))
            }
          })
        }
        else if (this.type === 'export') {
          component = new Vue({
            functional: true,
            render: (h) => {
              return (h(
                'h4',
                [
                  h('Button', {
                    attrs: {
                    },
                    style: this.styles,
                    'class': classes,
                    on: {
                      click: (event) => {
                        this.exportCsv({
                          filename: '匯出原始文件',
                          original: true
                        })
                        this.handler()
                      }
                    }
                  },
                    [h('i', {
                    }, icon), typeDesc])
                ]
              ))
            }
          })
        }
        else if (this.type === 'exportFilter') {
          component = new Vue({
            functional: true,
            render: (h) => {
              return (h(
                'h4',
                [
                  h('Button', {
                    attrs: {
                    },
                    style: this.styles,
                    'class': classes,
                    on: {
                      click: (event) => {
                        this.exportCsv({
                          filename: '排序及過濾後之文件',
                          original: false
                        })
                        this.handler()
                      }
                    }
                  },
                    [h('i', {
                    }, icon), typeDesc])
                ]
              ))
            }
          })
        }
        else if (this.type === 'add' || this.type === 'addModal') {
          component = new Vue({
            functional: true,
            render: (h) => {
              return (h(
                'h4',
                [
                  h('Button', {
                    attrs: {
                    },
                    style: this.styles,
                    'class': classes,
                    on: {
                      click: (event, params) => {
                        var obj = Object.create(null)
                        var firstColumn = -1
                        this.columns.forEach((item, index) => {
                          if (item.insert === true && firstColumn === -1 && item.display === true) {
                            firstColumn = item._index
                          }
                          if (this.addprops[item.field] !== undefined) {
                            obj[item.field] = this.addprops[item.field]
                          }
                          else if (item.type === 'check' || item.type === 'toggle') {
                            obj[item.field] = false
                          }
                          else if (item.type === 'date' || item.type === 'datetime') {
                            obj[item.field] = this.defaultSelection
                          }
                          else {
                            obj[item.field] = ''
                          }
                        })
                        obj.__index = this.table.length + 1
                        obj._key = this.table.length
                        obj._modify = false
                        obj._add = true

                        var obj2 = Object.create(null)
                        this.columns.forEach((item) => {
                          if (this.addprops[item.field] !== undefined) {
                            obj2[item.field] = this.addprops[item.field]
                          }
                          else if (item.type === 'check' || item.type === 'toggle') {
                            obj2[item.field] = false
                          }
                          else if (item.type === 'date' || item.type === 'datetime') {
                            obj2[item.field] = this.defaultSelection
                          }
                          else {
                            obj2[item.field] = ''
                          }
                        })
                        obj2.__index = this.table.length + 1
                        obj2._key = this.table.length
                        obj2._modify = false
                        obj2._add = true

                        var objTemp = Object.create(null)
                        this.columns.forEach((item) => {
                          if (this.addprops[item.field] !== undefined) {
                            objTemp[item.field] = this.addprops[item.field]
                          }
                          else if (item.type === 'check' || item.type === 'toggle') {
                            objTemp[item.field] = false
                          }
                          else if (item.type === 'date' || item.type === 'datetime') {
                            objTemp[item.field] = this.defaultSelection
                          }
                          else {
                            objTemp[item.field] = ''
                          }
                        })
                        objTemp.__index = this.table.length + 1
                        objTemp._key = this.table.length
                        objTemp._modify = false
                        objTemp._add = true

                        this.table.splice(0, 0, obj)
                        this.table2.splice(0, 0, obj2)
                        this.tempTable.splice(0, 0, objTemp)

                        this.$nextTick(() => {
                          this.$parent.$parent.$refs.table2.$refs['field-0-' + firstColumn][0].focus()
                          this.$parent.$parent.$refs.table2.$refs['field-0-' + firstColumn][0].select()
                        })
                        if (this.type === 'addModal') {
                          this.$emit('startslide', () => {
                          })
                        }

                        this.handler()
                      }
                    }
                  },
                    [h('i', {
                    }, icon), typeDesc])
                ], {row: '1'}
              ))
            }
          })
        }
        const Cell = component.$mount()
        this.$refs.cell.appendChild(Cell.$el)
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.compile()
      })
    }
  }
</script>
<style scoped> 
  div{ float:left} 
</style>
