<template>
  <div
    style="width:100%;height:100%;"
    class="dyncUiItemChildBox"
  >
    <template v-if="item.type==='input'">
      <el-input
        @keyup.enter.native="enterInput"
        style="width:100%"
        clearable
        :disabled='disabled'
        size='mini'
        v-model="formParms[item.prop]"
        :placeholder="item.label"
      ></el-input>
    </template>
    <template v-if="item.type==='textarea'">
      <el-input
        style="width:100%"
        type='textarea'
        clearable
        :disabled='disabled'
        v-model="formParms[item.prop]"
        :placeholder="item.label"
      ></el-input>
    </template>
    <template v-if="item.type==='elDatePicker'">
      <el-date-picker
        clearable
        style="width:100%"
        size='mini'
        v-model="formParms[item.prop]"
        type="daterange"
        valueFormat='yyyy-MM-dd'
        range-separator="至"
        :disabled='disabled'
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </template>
    <template v-if="item.type==='elDatePickerDatetime'">
      <el-date-picker
        clearable
        style="width:100%"
        size='mini'
        v-model="formParms[item.prop]"
        type="datetime"
        :disabled='disabled'
        valueFormat='yyyy-MM-dd HH:mm:ss'
        placeholder="选择日期时间"
      >
      </el-date-picker>
    </template>
    <template v-if="item.type==='elDatePickerDate'">
      <el-date-picker
        clearable
        style="width:100%"
        size='mini'
        v-model="formParms[item.prop]"
        type="date"
        :disabled='disabled'
        valueFormat='yyyy-MM-dd'
        placeholder="选择日期"
      >
      </el-date-picker>
    </template>
    <template v-if="item.type==='elSwitch'">
      <hsSwitch
        style="width:100%"
        size='mini'
        :disabled='disabled'
        v-model="formParms[item.prop]"
      >
      </hsSwitch>
    </template>
    <template v-if="item.type==='elCheckbox'">
      <el-checkbox
        style="width:100%"
        size='mini'
        :disabled='disabled'
        v-model="formParms[item.prop]"
      >
      </el-checkbox>
    </template>
    <template v-if="item.type==='hsSelectPlus'">
      <hsSelectPlus
        :writeBackObject='formParms'
        v-model="formParms[item.prop]"
        :allSourceData='item.allSourceData'
        :elInfo='item.elInfo'
        :readonly='disabled'
        :prop='item.prop'
        :containerType='type'
        :remoteMethod='item.remoteMethod'
      >
      </hsSelectPlus>
    </template>
    <template v-if="item.type==='hsFile'">
      <hsFile
        v-model="formParms[item.prop]"
        :allSourceData='item.allSourceData'
        :elInfo='item.elInfo'
        :readonly='disabled'
        :prop='item.prop'
        :containerType='type'
      >
      </hsFile>
    </template>
    <template v-if="item.type==='hsComputed'">
      <hsComputed
        v-model="formParms[item.prop]"
        :allSourceData='item.allSourceData'
        :elInfo='item.elInfo'
        :readonly='disabled'
        :formData='formParms'
        :prop='item.prop'
        :containerType='type'
      >
      </hsComputed>
    </template>
    <template v-if="item.type==='hsInput'">
      <hsInput
        v-model="formParms[item.prop]"
        :allSourceData='item.allSourceData'
        :elInfo='item.elInfo'
        :readonly='disabled'
        :formData='formParms'
        :prop='item.prop'
        :containerType='type'
      >
      </hsInput>
    </template>
  </div>

</template>
<script>
export default {
  name: 'dyncFormItemComponentChild',
  props: {
    type: {},
    item: {},
    formParms: {},
    readonlyStatus: {}
  },
  computed: {
    disabled() {
      let bool = false
      if (this.formParms._readonlyFields) {
        bool = JSON.parse(this.formParms._readonlyFields).includes(
          this.item.prop
        )
      } else {
        bool = this.item.isDisabled
      }
      return !!(this.readonlyStatus || bool)
    }
  },
  mounted() {

  },
  methods: {
    enterInput(val) {
      this.$emit('enterInput', val)
    },
    showLabel(item) {
      if (item.isHideLabel) {
        return false
      }
      if (!item.label) {
        return false
      }
      return true
    },
    isShowItem(item) {
      if (item.isMoreSearch) {
        return false
      }
      if (!item.isHide) {
        return true
      }
    }
  }
}
</script>
<style scoped>
.inputBox {
  height: 100%;
}
.dyncUiItemChildBox >>> .el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 100%;
}
</style>
