<template>
  <div class="flex flex-col mb-2 border px-4 py-2 rounded">
    <div class="px-2 text-xs">{{ property.name }}</div>
    <div class="px-2">
      <input
        v-model="val"
        class="sui-color-text w-full outline-none border"
        :type="property.type"
        @input="handleInput()"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    property: {
      type: Object,
      default: () => ({
        name: '',
        cssProp: '',
        value: '',
        type: '',
      }),
    },
  },
  data() {
    return {
      val: null,
    }
  },
  computed: {
    cssVar() {
      return `--sui-${this.property.cssProp}`
    },
  },
  methods: {
    handleInput() {
      this.$emit('property', { prop: this.property, value: this.val })
    },
  },
  mounted() {
    console.log(this.property)

    this.val = JSON.parse(JSON.stringify(this.property.value))

    console.log(this.val, this.property)
  },
}
</script>

<style lang="scss" scoped></style>
