<template>
  <cr-popup v-model="show" round>
    <div class="max-popup">
      <div class="max-popup__head">
        MAX会员规则说明
      </div>
      <div class="max-popup__content" v-html="ruleHtml" />
      <div class="max-popup__foot">
        <cr-button type="primary" shape="circle" block @click="show = false">
          知道了
        </cr-button>
      </div>
    </div>
    <cr-icon type="close" size="33px" color="#fff" @click="show = false" />
  </cr-popup>
</template>
<script>
export default {
  props: {
    value: Boolean,
    rule: String
  },
  data() {
    return {
      show: false
    };
  },
  computed: {
    ruleHtml() {
      return this.rule.replace(/(\n|\r\n)/g, '<br />');
    }
  },
  watch: {
    value(val) {
      this.show = val;
    },
    show(val) {
      this.$emit('input', val);
    }
  }
};
</script>
<style lang="less" scoped>
@import './dialog.less';
.max-popup {
  &__content {
    height: 240px;
    overflow: auto;
    padding-bottom: 0;
  }
  &__foot {
    padding-top: @padding-xs;
  }
}
</style>
