<template>
  <i :class="getClass"></i>
</template>

<script>
export default {
  name: 'YohoCheck',
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      val: this.value
    };
  },
  computed: {
    getClass() {
      return {
        iconfont: true,
        icon_size: true,
        iconcheck_default: !this.val,
        iconcheck_full: this.val,
        icon_color: this.val
      };
    }
  },
  watch: {
    value(newVal) {
      this.val = newVal;
    }
  },
  methods: {
    onClick() {
      this.val = !this.val;

      this.$emit('input', this.val);
    },
  }
};
</script>

<style lang="scss" scoped>

.icon_size {
  font-size: 24px;
}

.icon_color {
  color: #002b47;
}

</style>