<template>
  <span @click="clickEvent">
    <template v-if="!newConfig.format">
      <span style="word-wrap: break-word; word-break: break-all;"> {{ newData[newConfig.prop] }} </span>
    </template>
    <template v-else class="format-format">
      <template v-if="typeof (newConfig.format) === 'string'"> {{ format.getNameOrList(newConfig.format, newData[newConfig.prop]) }} </template>
      <span v-else style="word-wrap: break-word; word-break: break-all;" v-html="newConfig.format(newData, index, newData[newConfig.prop], newConfig)" />
    </template>
  </span>
</template>

<script>
import format from '../../../lib/format'
export default {
  name: 'XsFormatBox',
  props: {
    config: {
      type: Object,
      default: () => { return {} }
    },
    data: {
      type: Object,
      default: () => { return {} }
    },
    index: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      format,
      newData: this.data,
      newConfig: this.config
    }
  },
  watch: {
    data: {
      handler(newVal) {
        this.newData = newVal
      },
      immediate: true,
      deep: true
    },
    config: {
      handler(newVal) {
        this.newConfig = newVal
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    clickEvent() {
      this.config.click && this.config.click(this.data, this.config, this.index)
    }
  }
}
</script>
