<script>
import components from './_import-components/sd-width-input-import'
export default {
  name: 'SdWidthInput',
  metaInfo: {},
  components,
  props: {
    value: {
      type: String,
      default: undefined,
    },
  },
  data() {
    return {}
  },
  computed: {
    a: {
      get() {
        const v = this.value?.replace?.(/%|px/, '')
        if (v) return Number(v)
        return undefined
      },
      set(newValue) {
        let v
        if (newValue) v = newValue + this.b || '%'
        this.$emit('input', v)
      },
    },
    b: {
      get() {
        return this.value?.includes?.('px') ? 'px' : '%'
      },
      set(newValue) {
        this.$emit('input', (this.a || '') + newValue)
      },
    },
  },
  render() {
    return (
      <span>
        <a-input-number
          style='width:100px'
          vModel={this.a}
          min={1}
          placeholder='auto'
          max={this.b === 'px' ? 1000 : 100}
        />
        <a-select vModel={this.b} disabled={!this.a}>
          <a-select-option value='%'>%</a-select-option>
          <a-select-option value='px'>px</a-select-option>
        </a-select>
      </span>
    )
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
