<template>
<div class="agree" @click="onClick">
  <i :class="getClass"></i> 我已阅读并同意 <span class="link">有货卖家协议</span>
</div>
</template>

<script>
export default {
  name: 'OrderCheck',
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      val: this.value
    };
  },
  computed: {
    getClass() {
      return {
        iconfont: 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>
.agree {
  font-size: 24px;
  color: #999;
}

.link {
  color: #65ab85;
  text-decoration: underline;
  text-decoration-color: #65ab85;
}

.icon_color {
  color: #002B47;
}
</style>