<template>
  <view>
    <zui-cell class="input-cell" :title="title" :required="required">
      <zui-input v-model="model" :disabled="disabled" :type="type" :placeholder="placeholder" clearable @clear="$emit('clear')" @blur="$emit('blur')"/>
      <slot name="right"></slot>
    </zui-cell>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'InputCell',
  props: {
    title: String,
    value: [String, Number],
    required: Boolean,
    disabled: Boolean,
    type: String,
    placeholder: {
      type: String,
      default: '请输入'
    }
  },
  data() {
    return {
      model: this.value,
    };
  },
  watch: {
    value(val) {
      this.model = val;
    },
    model(val) {
      console.log(val);
      this.$emit('input', val);
    }
  }
}
</script>
