<template>
  <div>
    <Input :value="start" class="price-input" @input="startChange"></Input>
    ~
    <Input :value="end" class="price-input" @input="endChange"></Input>
  </div>
</template>

<script>
export default {
  name: 'Price',
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    const self = this;

    return {
      start: self.value[0] || null,
      end: self.value[1] || null,
    };
  },

  watch: {
    value(newVal) {
      this.start = newVal[0];
      this.end = newVal[1];
    },
  },

  methods: {
    startChange(data) {
      this.$emit('input', [data, this.end]);
    },
    endChange(data) {
      this.$emit('input', [this.start, data]);
    },
  },
};
</script>

<style lang="scss" scoped>
.price-input {
  width: 45%;
}
</style>