<template>
  <div>
    <q-modal ref="modal" class="maximized" :style="styleObject()">
      <s-carousel ref="slider" class="text-black full-height" style="padding:0px">
        <div slot="slide" style="overflow-y:auto;text-align:left" :style="styleBackground()">
            <h4><span class="text-bold">{{ $t("layout.layout_Personal_basic_information") }}</span></h4>

            <s-formPanel :model="model" :configs="configs"  @search="search" @selected="selected"></s-formPanel>

        </div>
      </s-carousel>
    </q-modal>

    <s-vueDialog ref="layoutModal" v-if="showModal" :blocking="blocking" :header="header" :footer="footer" :body="body" :type="type" :icon="icon" :custom="custom"
     :async="async" @action="action" @close="showModal = false;">
    </s-vueDialog>
  </div>

</template>
<script>
import vueResource from 'vue-resource'
import Vue from 'vue'
import Vuelidate from 'vuelidate'
import moment from 'moment'
Vue.use(Vuelidate)
Vue.use(vueResource)

export default {
  props: {
    columns: {
      type: Array,
      default: []
    },
    row: {
      type: Object,
      default: {}
    },
    config: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      showModal: false,
      icon: '',
      header: '',
      footer: '',
      body: '',
      type: '',
      operation: '',
      custom: [],
      border: false,
      defaultSelection: moment('1950-01-01T10:40:14.674Z').format(),
      range: {
        min: moment('1950-01-01T10:40:14.674Z').subtract(3, 'days').format(),
        max: moment().add(4, 'hours').add(10, 'minutes').add(1, 'month').format()// .add(1, 'month').add(1, 'year')
      },
      configs: {},
      model: [],
      windowWidth: 0,
      windowHeight: 0,
      position: ''
    }
  },
  created () {
    this.columns.forEach((column, i) => {
      if (column.type === 'toggle') {
        if (this.row[column.field] === undefined || this.row[column.field] === '') {
          this.row[column.field] = false
        }
      }
    })
  },
  mounted () {
    this.$nextTick(function () {
      window.addEventListener('resize', this.getWindowWidth)
      window.addEventListener('resize', this.getWindowHeight)
      this.getWindowWidth()
      this.getWindowHeight()
    })
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.getWindowWidth)
    window.removeEventListener('resize', this.getWindowHeight)
  },
  methods: {
    getWindowWidth (event) {
      this.windowWidth = document.documentElement.clientWidth
    },
    getWindowHeight (event) {
      this.windowHeight = document.documentElement.clientHeight
    },
    styleBackground () {
      var returnValue = {}
      returnValue = {
        'background': this.config.backgroundColor
      }
      return returnValue
    },
    styleObject () {
      var returnValue = {}
      if (this.config.modalWidth !== undefined) {
        if (this.windowWidth >= 768) {
          switch (this.config.modalPosition) {
            case 'left':
              this.position = 'left'
              if (typeof this.config.modalWidth === 'number') {
                returnValue = {
                  width: this.config.modalWidth + 'px',
                  position: 'absolute !important',
                  float: 'left',
                  top: 0,
                  bottom: 0,
                  left: 0,
                  right: 'initial'
                }
              }
              else {
                returnValue = {
                  width: this.config.modalWidth,
                  position: 'absolute !important',
                  float: 'left',
                  top: 0,
                  bottom: 0,
                  left: 0,
                  right: 'initial'
                }
              }
              break
            case 'top':
              this.position = 'top'
              if (typeof this.config.modalHeight === 'number') {
                returnValue = {
                  height: this.config.modalHeight + 'px',
                  position: 'absolute !important',
                  float: 'top',
                  top: 'initial',
                  bottom: 0,
                  left: 0,
                  right: 0
                }
              }
              else {
                returnValue = {
                  height: this.config.modalHeight,
                  position: 'absolute !important',
                  float: 'top',
                  top: 'initial',
                  bottom: 0,
                  left: 0,
                  right: 0
                }
              }
              break
            case 'bottom':
              this.position = 'bottom'
              if (typeof this.config.modalHeight === 'number') {
                returnValue = {
                  height: this.config.modalHeight + 'px',
                  position: 'absolute !important',
                  float: 'bottom',
                  top: 'initial',
                  bottom: 0,
                  left: 0,
                  right: 0
                }
              }
              else {
                returnValue = {
                  height: this.config.modalHeight,
                  position: 'absolute !important',
                  float: 'bottom',
                  top: 'initial',
                  bottom: 0,
                  left: 0,
                  right: 0
                }
              }
              break
            default:
              this.position = 'right'
              if (typeof this.config.modalWidth === 'number') {
                returnValue = {
                  width: this.config.modalWidth + 'px',
                  position: 'absolute !important',
                  float: 'right',
                  top: 0,
                  bottom: 0,
                  left: 'initial',
                  right: 0
                }
              }
              else {
                returnValue = {
                  width: this.config.modalWidth,
                  position: 'absolute !important',
                  float: 'right',
                  top: 0,
                  bottom: 0,
                  left: 'initial',
                  right: 0
                }
              }
              break
          }
        }
        else {
          this.position = ''
        }
      }
      return returnValue
    },
    search (terms, done, id, reference) {
    },
    selected (item) {
    },
    dialogOpen (operation, row) {
      var item = []
      var action = []
      var itemObject = {}
      var fields = []
      // var actions = []
      this.configs = {}
      var model = {}
      this.configs.colspan = 2
      this.configs.bodyBorderWidth = 1
      this.configs.bodyStyle = 'solid'
      this.configs.bodyBackColor = 'white'
      this.configs.bodyPadding = 20
      this.configs.modalWidth = this.config.modalWidth

      itemObject = {}
      itemObject.xtype = 'fieldset'
      itemObject.reference = 'fieldset1'
      itemObject.showLabel = true
      this.columns.forEach((column, i) => {
        var field = {}
        field.model = column.field
        field.label = column.label
        field.width = column.width
        field.newLine = column.newLine
        field.options = column.options
        field.labelWidth = '100px'
        if (operation === 'ins' && column.insert === false && column.type !== 'expand') {
          field.type = 'label'
        }
        else if (operation === 'upd' && column.modify === false && column.type !== 'expand') {
          field.type = 'label'
        }
        else {
          if (column.type === 'label') {
            field.type = 'text'
          }
          else {
            field.type = column.type
          }
        }
        field.floatlabel = column.label
        field.validations = column.validations
        field.display = column.display
        field.colspan = 1
        fields.push(field)

        model[column.field] = row[column.field]
      })
      this.$set(this.model, 0, model)
      // console.log(this.model)
      itemObject.fields = fields

      item.push(itemObject)
      this.configs.items = item

      action = [
        {
          type: 'cancel',
          classes: {
            green: true
          },
          style: {
            marginRight: '7px'
          },
          handler: (h, params) => {
            this.cancel()
          }
        },
        {
          type: 'save',
          classes: {
            blue: true
          },
          style: {
            marginRight: '7px'
          },
          handler: (h, params) => {
            this.saveData()
          }
        }
      ]
      this.configs.actions = action
    },
    format (row, col) {
      return col.format ? col.format(row[col.field], row) : row[col.field]
    },
    startslide (operation, row) {
      this.operation = operation
      if (this.$refs.slider.slide >= this.$refs.slider.slidesNumber) {
        this.$refs.modal.close()
      }
      else {
        this.$refs.modal.open()
        // this.$refs.slider.next()
      }
      this.dialogOpen(operation, row)
    },
    checkValue (val, type, col, row) {
      var val2 = false
      if (type === 2) {
        if (val === true || val === 1) {
          val2 = true
        }
        else {
          val2 = false
        }
      }
      else {
        if (val === true || val === 1) {
          val2 = false
        }
        else {
          val2 = true
        }
      }
      return val2
    },
    saveData () {
      var flag = false
      if (flag === true) {
        this.header = this.$t('global.dialog.title_Message')
        this.body = this.$t('global.dialog.message_has_error')
        this.footer = ''
        this.type = 'INFO'
        this.icon = 'WARNING'
        this.async = 'YES'
        this.blocking = true
        this.custom = []
        this.showModal = true
      }
      else {
        this.header = this.$t('global.dialog.title_Message')
        this.body = this.$t('global.dialog.title_quest_isconfirm')
        this.footer = ''
        this.type = 'YES|CANCEL'
        this.icon = 'WARNING'
        this.async = 'YES'
        this.blocking = true
        this.custom = []
        this.showModal = true
      }
    },
    action (actionReturn) {
      if (actionReturn === 'YES') {
        this.$refs.modal.close()
        this.$emit('saveData', this.model[0], this.operation)
      }
    },
    cancel () {
      this.$refs.modal.close()
    },
    objects (field) {
      return field
    },
    convertToText (obj) {
      var string = []
      if (typeof (obj) === 'object' && (obj.join === undefined)) {
        string.push('{')
        for (var prop in obj) {
          string.push(prop, ': ', this.convertToText(obj[prop]), ',')
        }
        string.push('}')
      }
      else if (typeof (obj) === 'object' && !(obj.join === undefined)) {
        string.push('[')
        for (prop in obj) {
          string.push(this.convertToText(obj[prop]), ',')
        }
        string.push(']')
      }
      else if (typeof (obj) === 'function') {
        string.push(obj.toString())
      }
      else {
        string.push(JSON.stringify(obj))
      }

      return string.join('')
    }
  }
}
</script>
