<!--
  @description:注册须知
  @Modifier:徐媛媛
  @routerPath:/register/registerFinishReg
  @date:2020/8/3-19：34
-->
<template>
  <div class="registerRules">
    <div class="registerRules-content">
      <el-scrollbar style="height:530px;">
        <div style="padding:26px 22px;white-space: pre-line;" v-html="contentHtml" />
      </el-scrollbar>
    </div>
    <div class="is-agree">
      <el-checkbox v-model="isAgree">
        我已阅读并同意
        <span>《用户注册协议和隐私条款》</span>
      </el-checkbox>
    </div>
    <div class="no_wrap">
      <el-button size="default" @click="resver">
        上一步
      </el-button>
      <el-button :disabled="!isAgree" type="primary" size="default" @click="agree">
        同 意
      </el-button>
    </div>
    <!-- 同意/不同意 end -->
  </div>
</template>

<script>
import { getSystemConfigByConfigType } from '@/api/common/tools'
export default {
  name: 'RegisterRules',
  data() {
    return {
      // 状态值 切换butten可用或者禁用
      isAgree: false,
      contentHtml: ''// 注册须知内容
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 同意跳转注册页
    agree() {
      if (!this.isAgree) {
        this.$message({
          message: '请勾选，我已阅读并同意《用户注册协议和隐私条款》',
          type: 'warning'

        })
        return
      }
      this.$emit('stepPage', 'next', {}) // 步骤条切换方法 next 下一步
    },
    // 返回首页login
    resver() {
      this.$emit('stepPage', 'prev', {}) // 步骤条切换方法 prev 上一步
    },
    // 获取注册须知
    initData() {
      const data = {
        configType: 'registration-policy'
      }
      getSystemConfigByConfigType(data).then(res => {
        this.contentHtml = res.data[0] && res.data[0].configValue
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import url("~@/assets/style/common/public.less");
  .registerRules {
  .registerRules-content {
    font-size: 14px;
    border: 1px solid @border-gray;
    line-height: 26px;
    background-color: #F5F7F9;
    box-sizing: border-box;
    height: 530px;
  }
  .is-agree {
    text-align: center;
    margin-top: 10px;
  }
}
.no_wrap {
  white-space: nowrap;
  width: 100%;
  text-align: center;
  margin-top: 16px;
}
</style>
