<template>
  <div class="form-item row items-center">
    <div class="label q-pa-sm overflow-hidden col-3">
      <slot name="item-title" v-bind="mdata">
        <span
          class="text-grey-7 text-bold"
          v-text="mdata.title||mdata.name"
        ></span>
      </slot>
      <q-icon
        name="star"
        v-if="mdata.minLength>0&&!showonly"
        class="text-negative q-pa-xs"
        style="opacity:0.6"
      >
        <q-tooltip>必填项</q-tooltip>
      </q-icon>
    </div>
    <div class="input-value q-pa-sm col-9">
      <slot :name="`input-${mdata.inputType}`" v-bind="{mdata, fdata, props: $props}">
      <div v-if="mdata.inputType==='linkEntity'">
        <template v-if="mdata.selectUi === 'tree'">
          <kyb-tree
            ref="data_tree"
            class="q-pa-sm"
            :show-select-list="showonly||mdata.readonly"
            :select-type="mdata.selectType"
            :entity="mdata.linkEntity"
            v-model="fdata[mdata.name]"
            hideToolbar
          >
            <template #title="item">
              <div
                v-text="item.title&&item.name?`${item.title} (${item.name})`:(item.title||item.name)"
              ></div>
            </template>
          </kyb-tree>
        </template>
        <template v-else>
          <kyb-select-entity
            :showonly="showonly||mdata.readonly"
            :entity="mdata.linkEntity"
            :title-key="mdata.linkEntity_TitleKey"
            :groupKey="mdata.selectGroupKey"
            :select-type="mdata.selectType?mdata.selectType:'one'"
            :select-ui="mdata.selectUi"
            :is-group="mdata.isSelectGroup"
            :valueKey="mdata.linkEntity_ValueKey"
            :query-url="mdata.linkEntity_QueryUrl"
            :query-param="mdata.$linkEntity_QueryParam"
            :link-more-entity="mdata.linkMoreEntity"
            :link-entity-my-key="mdata.linkEntity_MyKey"
            :link-more-my-id="fdata._id"
            :mdata="mdata"
            @input="$emit('input',fdata, mdata, $event)"
            @option-click="$emit('option-click', mdata, fdata[mdata.name])"
            v-model="fdata[mdata.name]"
          ></kyb-select-entity>
        </template>
      </div>
      <kyb-select
        v-else-if="mdata.inputType==='select'"
        v-model="fdata[mdata.name]"
        :can-add="false"
        :can-del="false"
        :showonly="showonly||mdata.showonly"
        :select-type="mdata.selectType?mdata.selectType:'one'"
        :is-group="mdata.isSelectGroup"
        :is-edit="false"
        :mdata="mdata"
        @input="$emit('input',fdata, mdata, $event)"
        @error="error=$event;$emit('error',$event)"
        hide-toolbar
        :items="mdata.items"
      ></kyb-select>
      <component
        outlined
        clearable
        dense
        :is="compType"
        v-model="fdata[mdata.name]"
        :mdata="mdata"
        v-bind="compAttrs"
        @input="$emit('input',fdata, mdata, fdata[mdata.name])"
        @blur="$emit('item-blur', mdata, fdata[mdata.name])"
        @error="error=$event;$emit('error',$event)"
        @submit="$emit('submit',$event)"
        :readonly="readonly||mdata.readonly"
        :showonly="showonly||mdata.showonly"
        :selectList="mdata.inputTypeList"
        v-else
      ></component>
      </slot>
    </div>
  </div>
</template>
<script>
import _ from 'underscore'
import KybMdata from '../kyb-mdata.js'

export default {
  mixins: [KybMdata],
  name: 'kyb-form-item',
  model: {
    prop: 'fdata',
    event: 'input'
  },
  props: {
    entity: String,
    mdata: Object,
    fdata: Object,
    readonly: Boolean,
    showonly: Boolean
  },
  data() {
    return { error: null }
  },
  watch: {
    mdata(old) {
      this.mdata = old
      this.fixMData()
    }
  },
  computed: {
    compType() {
      let inputType = this.mdata.inputType ? this.mdata.inputType : 'input'
      let type = `kyb-${inputType}`
      if (this.mdata.type === 'boolean') {
        type = 'kyb-boolean'
      } else if (
        inputType === 'string' ||
        inputType === 'textarea' ||
        inputType === 'int' ||
        inputType === 'long' ||
        inputType === 'double'
      ) {
        type = 'kyb-input'
      } else if (inputType === 'file') {
        type = 'kyb-upload'
      } else if (inputType === 'icon') {
        type = 'kyb-select-icon'
      } else if (inputType === 'time' || inputType.startsWith('date')) {
        type = 'kyb-date'
      }
      // 数字特殊处理
      if (type === 'kyb-input' && this.mdata.isNumber) {
        type = 'kyb-input-number'
      }
      return type
    },
    compAttrs() {
      let a = {}
      if (this.compType === 'kyb-date') {
        a.type = this.mdata.inputType
      } else if (this.compType === 'kyb-upload') {
        a.more = this.mdata.selectType === 'more'
      }
      return a
    }
  },
  created() {
    this.fixMData()
  },
  methods: {
    fixMData() {
      this.mdata || (this.mdata = {})
      let types = 'type,inputType,selectType,linkEntity,linkMoreEntity,selectUi'.split(
        ','
      )
      let defaultValueMap = {
        type: 'string',
        inputType: 'input',
        selectUi: 'list'
      }
      types.forEach(v => {
        if (_.isArray(this.mdata[v])) {
          this.mdata[v] = this.mdata[v].length > 0 ? this.mdata[v][0] : ''
        }
        if (defaultValueMap[v]) {
          this.mdata[v] || (this.mdata[v] = defaultValueMap[v])
        }
      })

      this.mdata.minLength || (this.mdata.minLength = 0)
      this.mdata.maxLength || (this.mdata.maxLength = 64)
      if (this.mdata.isNotNull) {
        this.mdata.minLength =
          this.mdata.minLength === 0 ? 1 : this.mdata.minLength
      }
      if (
        this.mdata.inputType === 'linkEntity' &&
        this.mdata.selectType === 'more'
      ) {
        delete this.mdata.minLength
        delete this.mdata.maxLength
      }
      this.mdata.isNumber =
        this.mdata.type === 'int' ||
        this.mdata.type === 'long' ||
        this.mdata.type === 'double'

      if (this.mdata.inputType === 'select') {
        if (this.mdata.inputTypeList) {
          if (_.isString(this.mdata.inputTypeList)) {
            this.mdata.items = this.mdata.inputTypeList
              .split(',')
              .map(v => ({ name: v, _id: v }))
          }
        }
      }

      // 选择对象的数据整理
      if (this.mdata.inputType.startsWith('linkEntity')) {
        this.mdata.$linkEntity_QueryParam = this.mdata.linkEntity_QueryParam
          ? JSON.parse(this.mdata.linkEntity_QueryParam)
          : {}
      }
      if (
        this.mdata.inputType === 'select' ||
        this.mdata.inputType.startsWith('linkEntity')
      ) {
        this.mdata.linkEntity_TitleKey ||
          (this.mdata.linkEntity_TitleKey = 'name')
        this.mdata.linkEntity_ValueKey ||
          (this.mdata.linkEntity_ValueKey = '_id')
        if (this.mdata.linkMoreEntity) {
          this.mdata.linkEntity_MyKey ||
            (this.mdata.linkEntity_MyKey = this.entityInner + 'Id')
        }
      }
      // 特殊字段需要做特殊处理：
      if (this.mdata.name === '_id' && !this.mdata.hide) {
        this.mdata.hide = 'edit'
        // this.mdata.defaultValue = "${uuid}";
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.form-item {
  border-top: 1px solid $grey-4;
}

.form-item:first-child {
  border-top: 0px solid $grey-4;
}

.form-item>.input-value {
  border-left: 1px solid $grey-4;
  min-height: 40px;
}
</style>
