<template>
<div class="agree">
  <span @click="onClick"><Check v-model="val"></Check> 我已阅读并同意</span> <span class="link"
                                                                            @click="onLinkClick">{{desc}}</span>
</div>
</template>

<script>

import Check from './check';

export default {
  name: 'OrderCheck',
  props: {
    value: {
      type: Boolean,
      default: true
    },
    desc: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    }
  },
  components: {
    Check
  },
  data() {
    return {
      val: this.value
    };
  },
  watch: {
    value(newVal) {
      this.val = newVal;
    }
  },
  methods: {
    onClick() {
      this.val = !this.val;

      this.$emit('input', this.val);
    },
    onLinkClick() {
      if (this.url) {
        this.$xianyu.goXianyuNewPage({url: this.url});
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.agree {
  font-size: 24px;
  color: #999;
  height: 76px;
  background-color: white;
  padding: 0 40px;
  line-height: 76px;
}

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

</style>