<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <a-input :placeholder="placeholder" disabled />
    </div>
    <div v-else>
      <a-input
        v-if="!readerMode"
        v-model="innerValue"
        :placeholder="placeholder"
        allowClear
      />
      <div v-else v-text="innerValue"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextInput',
  props: {
    mode: {
      type: String,
      default: 'DESIGN'
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    readerMode: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      innerValue: this.value
    };
  },
  watch: {
    value(val) {
      this.innerValue = val;
    },
    innerValue(val) {
      this.$emit('update:value', val);
    }
  }
};
</script>

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