<!-- 隐私服务模块 -->
<template>
  <el-form class="check-form-warp" :model="ruleForm" :rules="rules" ref="ruleForm">
    <el-form-item prop="checkValue">
      <div class="check-warp">
        <el-checkbox v-model="ruleForm.checkValue" class="checkbox-agreement" @change="change">我已阅读并同意</el-checkbox>
        <div class="text-warp">
          <el-link class="line" type="primary" @click.stop="open">服务协议</el-link>
          和
          <el-link class="line" type="primary">隐私政策</el-link>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'CheckAgreement',
  props: {
    //是否同意协议
    consentCheck: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleForm: {
        checkValue: this.consentCheck
      },
      rules: {
        checkValue: [
          {
            required: true,
            message: '请阅读并同意以下条款'
          },
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请阅读并同意以上条款'));
              } else {
                callback();
              }
            },
            trigger: ['blur']
          }
        ]
      }
    };
  },
  methods: {
    open() {
      console.log('打开协议');
    },
    //更新参数传递给父组件
    change() {
      this.$emit('changeOpinion', this.ruleForm.checkValue);
    },
    //校验规则
    verify() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          return true;
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
//隐私协议
.check-form-warp {
  .el-form-item {
    margin-bottom: 20px;
  }
}
// 勾选不变化文本样式
:deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #a8a8ab;
}
.check-warp {
  display: flex;
  font-size: 12px;
  color: #a8a8ab;
  margin-top: 10px;
  :deep .el-checkbox__label {
    font-size: 12px;
  }
  .checkbox-agreement {
    color: #a8a8ab;
    line-height: 20px;
  }
  .text-warp {
    line-height: 20px;

    .line {
      vertical-align: baseline;
      font-size: 12px;
      color: #3a86ff;
      margin: 0 8px;
    }
  }
}
</style>