<template>
  <div
    class="cell"
    :class="{
      'cell-small': size === 'small',
      'cell-line': data.hideLine,
      'cell-hight': data.cellHight}"
      v-if="!data.hide">
      <!-- 表单label -->
      <label
        :class="{
          'cell-small-label': size === 'small'
        }"
        v-html="data.isLabel ? label : data.label">
      </label>

      <!-- 表单input -->
      <div
        class="cell-right"
        :class="{
          'cell-small-right': size === 'small'
        }"
        @click="selectInput(data)">
        <!-- 右侧为单选按钮 -->
        <select-button
          v-if="data.rightType === 'selectButton'"
          :list="data.list"
          :type="data.type"
          :values="data.raValue"
          :width="data.width"
          @getValue="getValue">
        </select-button>
        <!-- 右侧为textarea -->
        <div
          v-else-if="data.rightType === 'textarea'"
          class="cell-right-textarea">
          <textarea
            :placeholder="data.placeholder"
            :maxlength="data.maxlength || ''"
            class="cell-right-textarea"
            @blur="blur(data)"
            @focus="focus(data)"
            @input="update(data)"
            v-model.trim="currentValue"
            :class="{
              'invalid': data.error
            }">
          </textarea>
        </div>
        <div
          v-else-if="data.rightType === 'numInput'"
          class="cell-right-numInput">
          <num-counter
            v-model.trim="currentValue"
            :minNum="data.minNum"
            :maxNum="data.maxNum"
            @numCount="numCount"
            @lowMin="lowMin"
            @highMax="highMax">
          </num-counter>
        </div>

        <!-- 右侧为input框 -->
        <input
          v-else
          :type="data.type"
          :readonly="data.readonly"
          :disabled="data.disabled"
          :placeholder="data.placeholder"
          v-model.trim="currentValue"
          @blur="blur(data)"
          @focus="focus(data)"
          @input="update(data)"
          :class="{
            'invalid': data.error
          }">
          <!-- 问号注释框 data.riskDescShow && data.riskDesc.length-->
          <div
            v-if="data.riskDescShow && data.riskDesc.length"
            class="cell-select">
            <form-risk-desc
              @change="riskDescChange"
              :options="data">
            </form-risk-desc>
          </div>
          <!-- tips -->
          <div
            v-if="data.showTip && data.tip"
            class="cell-tip">
            <template>
              <render
                :template="data.tip()">
              </render>
            </template>
          </div>
          <!-- 选择按钮 -->
          <div
            v-show="data.btn && !data.hideSelectBtn"
            class="cell-select"
            @click.stop="selectRight(data)">
            <template
              v-if="data.btn">
              <render :template="data.btn()">
              </render>
            </template>
          </div>
      </div>
  </div>
</template>
<script>
import create from '../utils/create';
export default create({
  name: 'form-item',
  props: {
    data: {
      type: Object
    },
    size: {
      type: String,
      default: 'default'
    },
    label: {
      type: String
    }
  },
  watch: {
    'data.value': function (val) {
      this.currentValue = (this.data.disabled || this.data.showView) ? (this.data.valueView || this.data.value) : val
      this.update(this.data)
    },
    'data.showView': function (val) {
      this.currentValue = this.data.disabled || val ? (this.data.valueView || this.data.value) : this.data.value
      this.update(this.data)
    },
    currentValue (val) {
      if (!this.data.disabled || !this.data.showView) {
        this.data.value = val
      } else {
        this.data.value = this.data.value
      }
    }
    // data: {
    //   // handler (val) {
    //   //   if (
    //   //     val.error &&
    //   //     val.value
    //   //   ) {
    //   //     val.error = false
    //   //   }
    //   // },
    //   // deep: true
    // }
  },
  data () {
    return {
      currentValue: (this.data.disabled  || this.data.showView) ? (this.data.valueView || this.data.value) : this.data.value,
      currentTop: 0
    }
  },
  methods: {
    riskDescChange(options) {
      this.$emit('riskDescChange', options)
    },
    // 选择右边弹框
    selectRight (val) {
      this.$emit('selectRight', val)
    },
    // 单选按钮选择的值
    getValue (val) {
      // this.data.raValue = val
      this.$emit('getRaValue', val)
    },
    numCount (val) {
      this.$emit('getNumValue', val)
    },
    // 选择份数超出最大
    highMax (val) {
      this.$emit('highMax', val)
    },
    // 选择份数小于最小
    lowMin (val) {
      this.$emit('lowMin', val)
    },
    // 如果input框可以不填内容，但是有下拉按钮，那么点击input框也会选择
    selectInput (data) {
      if (data.disabled && data.btn) {
        this.selectRight(data)
      }
    },
    // input操作
    update (val) {
      this.$set(this.data, 'error', false)
      this.$emit('input', val)
      this.$emit('update', val)
    },
    blur (val) {
      this.$emit('blur', val)
    },
    focus (val) {
      this.$emit('focus', val)
    }
  },
  components: {
    render: () => import(
      './render'
      /* webpackChunkName: "form render" */
    ),
    selectButton: () => import(
      '../select-button'
      /* webpackChunkName: "form selectButton" */
    ),
    numCounter: () => import(
      './num-counter'
      /* webpackChunkName: "form numCounter" */
    ),
    formRiskDesc: () => import(
      './form-risk-desc'
      /* webpackChunkName: "form riskDesc" */
    )
  }
})
</script>
