<template>
  <div class="treaty-block">
    <cr-dialog v-model="showDialogSlot" confirm-button-text="我已阅读并同意">
      <div slot="title" class="title">请阅读以下协议</div>
      <div class="treaty-content">
        <div class="treaty-register" @click="handleOpenTreaty('showRegister')">
          《羊小咩注册协议》
        </div>
        <div class="treaty-rivacy" @click="handleOpenTreaty('showRivacy')">
          《羊小咩用户隐私协议》
        </div>
      </div>
    </cr-dialog>
    <cr-dialog v-model="showRegister" confirm-button-text="已阅读">
      <div slot="title">羊小咩注册协议</div>
      <div class="content">
        <treaty-register />
      </div>
    </cr-dialog>
    <cr-dialog v-model="showRivacy" confirm-button-text="已阅读">
      <div slot="title">羊小咩用户隐私协议</div>
      <div class="content">
        <treaty-rivacy />
      </div>
    </cr-dialog>
  </div>
</template>

<script>
import treatyRegister from './treatyRegister';
import treatyRivacy from './treatyRivacy';
export default {
  components: {
    treatyRegister,
    treatyRivacy
  },
  data() {
    return {
      showDialogSlot: true,
      showRegister: false,
      showRivacy: false
    };
  },
  watch: {},
  created() {},
  methods: {
    handleOpenTreaty(name) {
      this[name] = true;
    }
  }
};
</script>

<style scoped lang="less">
.treaty-content {
  color: @font-color-search;
  overflow-y: scroll;

  .treaty-register {
    margin-top: 10px;
  }

  .treaty-rivacy {
    margin-top: 10px;
  }
}

::v-deep {
  .cr-dialog--header {
    padding: 10px 0 0;
  }

  .cr-dialog--message {
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .cr-hairline--top {
    margin-bottom: 10px;
    &:after {
      content: '';
      border: 0;
    }
  }
  .cr-button {
    border-radius: 30px;
    width: 50%;
    background: @red;
    margin: 0 auto;
    color: #fff;
    display: block;
    height: 40px;
    line-height: 40px;
  }
}
</style>
