<template>
  <div class="custom-label">
    <span v-if="isText">
      {{showText}}
    </span>
    <div v-if="isHtml" v-html="showText" />
  </div>
</template>

<script>
export default {
  name: 'onlineCustomLabel',
  props: {
    value: {
      type: [Number, String, Boolean, Array]
    },
    widget: {
      type: Object,
      required: true
    }
  },
  inject: ['form'],
  methods: {

  },
  computed: {
    isText () {
      return [
        this.SysCustomWidgetType.Label,
        this.SysCustomWidgetType.Input,
        this.SysCustomWidgetType.NumberInput,
        this.SysCustomWidgetType.NumberRange,
        this.SysCustomWidgetType.Slider,
        this.SysCustomWidgetType.Radio,
        this.SysCustomWidgetType.CheckBox,
        this.SysCustomWidgetType.Switch,
        this.SysCustomWidgetType.Select,
        this.SysCustomWidgetType.Cascader,
        this.SysCustomWidgetType.Date,
        this.SysCustomWidgetType.DateRange,
        this.SysCustomWidgetType.UserSelect,
        this.SysCustomWidgetType.DeptSelect,
        this.SysCustomWidgetType.DataSelect
      ].indexOf(this.widget.widgetType) !== -1;
    },
    isHtml () {
      return this.widget.widgetType === this.SysCustomWidgetType.RichEditor && this.widget.column && this.widget.column.fieldKind === this.SysOnlineFieldKind.RICH_TEXT;
    },
    showText () {
      switch (this.widget.widgetType) {
        case this.SysCustomWidgetType.Label:
        case this.SysCustomWidgetType.Input:
        case this.SysCustomWidgetType.NumberInput:
        case this.SysCustomWidgetType.Slider:
        case this.SysCustomWidgetType.Date:
        case this.SysCustomWidgetType.RichEditor:
        case this.SysCustomWidgetType.Radio:
        case this.SysCustomWidgetType.CheckBox:
        case this.SysCustomWidgetType.Select:
        case this.SysCustomWidgetType.Cascader:
        case this.SysCustomWidgetType.UserSelect:
        case this.SysCustomWidgetType.DeptSelect:
        case this.SysCustomWidgetType.DataSelect:
          return this.value == null ? (this.form().isEdit ? 'XXXXXXXXXX' : undefined) : (Array.isArray(this.value) ? this.value.join(',') : this.value);
        case this.SysCustomWidgetType.NumberRange:
        case this.SysCustomWidgetType.DateRange:
          return (Array.isArray(this.value) && this.value.length > 1) ? (this.value[0] + ' 至 ' + this.value[1]) : ((this.form().isEdit ? 'XXXXX 至 XXXXX' : undefined));
        case this.SysCustomWidgetType.Switch:
          return this.value ? '是' : '否';
        default: return '';
      }
    }
  },
  mounted () {
    this.widget.widgetImpl = this;
  }
}
</script>

<style>
</style>
