<!-- 输入框类型 -->
<template>
  <el-select
    :size="size"
    :style="inputStyle"
    v-if="inputType === 'SELECT'"
    v-model="hookValue"
    :placeholder="placeholder"
  >
    <el-option
      v-for="(item,index) in keyList"
      :key="index"
      :value="item['value']"
      :label="item.label"
    />
  </el-select>
  <el-input
    v-else-if="inputType === 'NUM'"
    type="number"
    :size="size"
    :style="inputStyle"
    v-model="hookValue"
    :placeholder="placeholder"
  />
  <el-date-picker
    v-else-if="inputType === 'DATE'"
    v-model="hookValue"
    type="date"
    value-format="yyyy-MM-dd"
    :size="size"
    :style="inputStyle"
    :placeholder="placeholder"
  />
  <el-input v-else :size="size" v-model="hookValue" :style="inputStyle" :placeholder="placeholder" />
</template>

<script>
export default {
  props: {
    placeholder: {
      default: "请选择"
    },
    size: {
      default: "large"
    },
    inputType: {
      default: "TEXT"
    },
    value: {
      default: "",
      required: true
    },
    inputStyle: {
      default: ""
    },
    keyList: {
      type: Array
    }
  },
  data() {
    return {
      hookValue: ""
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(val) {
        this.hookValue = val;
      }
    },
    hookValue: {
      handler(val) {
        this.$emit("input", val);
        this.$emit("change", val);
      }
    }
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {}
};
</script>

<style scoped lang="less">
</style>