<template>
  <div>
    <a-form-item label="提示文字">
      <a-input
        v-model="localValue.placeholder"
        size="small"
        placeholder="请设置提示语"
      />
    </a-form-item>

    <a-form-item label="数量限制">
      <!-- <a-tooltip title="限制最大上传图片数量（为0则不限制）"><span slot="label">数量限制</span></a-tooltip> -->
      <a-input-number
        v-model="localValue.maxNumber"
        :precision="0"
        :min="0"
        :controls="true"
        size="small"
        placeholder="最多上传几张图片"
        style="width: 100%"
      />
    </a-form-item>

    <a-form-item label="大小限制">
      <!-- <a-tooltip title="限制单个图片最大大小-MB（为0则不限制）"><span slot="label">大小限制</span></a-tooltip> -->
      <a-input-number
        v-model="localValue.maxSize"
        :precision="1"
        :min="0"
        :controls="true"
        size="small"
        placeholder="单个文件最大大小"
        style="width: 100%"
      />
    </a-form-item>

    <a-form-item label="图片压缩">
      <a-switch v-model="localValue.enableZip" />
    </a-form-item>
  </div>
</template>

<script>
export default {
  name: 'ImageUploadConfig',
  props: {
    value: {
      type: Object,
      default: () => ({
        placeholder: '',
        maxNumber: null,
        maxSize: null,
        enableZip: false
      })
    }
  },
  data() {
    return {
      localValue: { ...this.value }
    };
  },
  watch: {
    localValue: {
      handler(newVal) {
        this.$emit('input', newVal);
      },
      deep: true
    },
    value: {
      handler(newVal) {
        this.localValue = { ...newVal };
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.max-fill {
  width: 100%;
}
</style>
