<template>
  <div>
    <template v-if="mode === 'DESIGN'">
      <el-input-number size="medium" disabled :placeholder="placeholder"/>
    </template>
    <template v-else>
      <template v-if="perm === 'E'">
        <el-input-number style="width: 100%;" controls-position="right" v-model="_value" size="medium" clearable :placeholder="placeholder"/>
      </template>
      <template v-else-if="perm === 'R'">
        <span>{{_value}}</span>
      </template>
    </template>
  </div>
</template>
<script setup>
import {defineProps,defineEmits} from 'vue'
const emit = defineEmits()

const props = defineProps({
  mode:{
    type: String,
    default: 'DESIGN'
  },
  required:{
    type: Boolean,
    default: false
  },
  value:{
    type: Number,
    default: 0
  },
  perm: {
    type: String,
    default: 'E'
  },
  placeholder:{
    type: String,
    default: '请输入数值'
  }
})

const _value = computed({
  get() {
    return props.value;
  },
  set(value) {
    emit('update:value', value)
  }
})
watch(()=>props.value,(value)=>{
  _value.value = value
})

</script>

<style scoped>
.el-input__inner{
  text-align: left;
}
</style>
