/**
 * 普通输入框
 * @author niewei
 */
import ProLayoutFormitem from 'mars-pro/packages/pro-layout-formitem';
import ProInputTimeRange from 'mars-pro/packages/pro-input-time-range';
import ProInputTime from 'mars-pro/packages/pro-input-time';
import ProInputTextarea from 'mars-pro/packages/pro-input-textarea';
import ProInputText from 'mars-pro/packages/pro-input-text';
import ProInputPhone from 'mars-pro/packages/pro-input-phone';
import ProInputPattern from 'mars-pro/packages/pro-input-pattern';
import ProInputNumberRange from 'mars-pro/packages/pro-input-number-range';
import ProInputNumber from 'mars-pro/packages/pro-input-number';
import ProInputEmail from 'mars-pro/packages/pro-input-email';
import ProInputDatetime from 'mars-pro/packages/pro-input-datetime';
import ProInputDateRange from 'mars-pro/packages/pro-input-date-range';
import ProInputDate from 'mars-pro/packages/pro-input-date';
import ProInputAutocomplete from 'mars-pro/packages/pro-input-autocomplete';
import ProDetail from 'mars-pro/packages/pro-detail'
import BaseMixin from './mixins/base';

export default {
  name: 'ProInput',
  mixins: [BaseMixin],
  componentName: 'ProInput',
  components: {
    ProInputTimeRange,
    ProInputTime,
    ProInputTextarea,
    ProInputText,
    ProInputPhone,
    ProInputPattern,
    ProInputNumberRange,
    ProInputNumber,
    ProInputEmail,
    ProInputDatetime,
    ProInputDateRange,
    ProInputDate,
    ProInputAutocomplete,
    ProLayoutFormitem,
    ProDetail
  },
  props: {
    uiType: {
      type: String,
      default: 'text'
    },
    layout: {
      type: Boolean,
      default: true
    },
    showOverTooltip:{
      type: Boolean,
      default: true
    }
  },
  computed: {
    enableDetail() {
      const thisEnableDetail = this.$attrs.enableDetail
      if(typeof thisEnableDetail === 'boolean'){
        return thisEnableDetail
      }
      return (this.elForm && this.elForm.enableDetail === true) || !!this.proDetail
    }
  },
  render(h) {
    const _formItemDatas = {
      props: {
        ...this.$attrs,
      },
      attrs: {
        ...this.$attrs,
      },
      on: this.$listeners,
      'class': {
        'detail': this.enableDetail,
        ...(this.uiType === 'textarea' ?{
          'el-input--textarea':true
        }:{})
      }
    }

    const _inputDatas = {
      props: {
        ...this.$attrs,
        value: this.value
      },
      attrs: this.$attrs,
      on: this.$listeners,
      'class': {
        'pro-input': true
      },
      scopedSlots: this.$scopedSlots,
      ref: 'proinput'
    }
    const inputVnode = h('pro-input-' + this.uiType, _inputDatas, Object.keys(this.$slots).map(
      k => h('template', { slot: k }, [this.$slots[k]])
    ))

    //详情模式
    const _detailDatas = {
      props: {
        value: this.value,
        detailValueType: this.uiType,
        detailType: 'input',
        ...this.$attrs
      },
      attrs: {
        ...this.$attrs
      },
      scopedSlots: this.$scopedSlots,
      'class': {
        [`el-input--${this.inputSize}`]: true
      },
      nativeOn: {
        ...(this.showOverTooltip && this.uiType != 'textarea' ? {
          mouseenter: this.handleMouseenter,
          mouseleave: this.handleMouseleave,
          click: this.handleMouseleave
        } : {})
      }
    }
    const detailVnode = (
      <div class="detail-wapper">
        <pro-detail {..._detailDatas}>
          {this.$slots.default}
          {this.renderSlots()}
        </pro-detail>
      </div>
    )

    return (
      this.layout
        ? <ProLayoutFormitem {..._formItemDatas}>
          {this.enableDetail !== true ? inputVnode : detailVnode}
          {this.renderSlots()}
        </ProLayoutFormitem>
        : this.enableDetail !== true ? inputVnode : detailVnode
    )
  }
}