<template>
  <div class="contract">
    <cr-checkbox
      v-model="isCheck"
      shape="round"
      class="contract-checkbox"
      btn-size="mini"
      @change="change"
    />
    <p class="contract-list">
      勾选同意
      <span
        v-for="contract in contractList"
        :key="contract.contractName"
        @click="goview(contract.contractVisitUrl)"
      >
        《{{ contract.contractName }}》</span
      >
    </p>
  </div>
</template>
<script>
export default {
  name: 'Contract',
  props: {
    contractList: Array,
    value: Boolean
  },
  data() {
    return {
      isCheck: this.value
    };
  },
  methods: {
    goview(url) {
      window.location.href = url;
    },
    change(e) {
      this.$emit('input', e);
    }
  }
};
</script>
<style lang="less">
.contract {
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  color: @gray-5;
  .text-size(10);
  &-list {
    color: @gray-5;
    span {
      color: @red;
    }
  }
}
</style>
