<template>
  <cr-popup
    v-model="popupShow"
    get-container="body"
    round
    closeable
    position="bottom"
    class="protocol"
  >
    <div class="protocol-title">{{ title }}</div>
    <cr-divider :hairline="false" :style="{ color: '#F4F4F4', margin: 0 }" />
    <div
      class="protocol-content"
      v-if="content && scrollRefresh && !$slots.default"
      v-html="content"
    ></div>
    <iframe v-if="url && scrollRefresh" class="protocol-frame" :src="url" frameborder="0"></iframe>
    <div class="protocol-wrap" v-if="!content && scrollRefresh && $slots.default">
      <slot></slot>
    </div>
  </cr-popup>
</template>

<script>
const CHANGE_EVENT = "input";
export default {
  name: "SvgIcon",
  props: {
    value: null,
    title: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: ""
    },
    url: {
      type: String,
      default: ""
    }
  },
  watch: {
    value(val) {
      this.popupShow = val;
      if (val) {
        this.scrollRefresh = true;
      }
    },
    popupShow(val) {
      this.$emit(CHANGE_EVENT, val);
      if (!val) {
        setTimeout(() => {
          this.scrollRefresh = false;
        }, 300);
      }
    }
  },
  data() {
    return {
      popupShow: false,
      scrollRefresh: true
    };
  }
};
</script>

<style lang="less">
@import "../../../style/var.less";
.body-wrap-mixin {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 480px;
  padding: @padding-lg;
}
.protocol {
  z-index: 200;
  /deep/ .cr-icon {
    color: #d0cfcf;
    font-size: @font-size-18;
    top: 16px;
    right: 14px;
  }
  &-title {
    font-weight: @font-weight-bold;
    font-size: @font-size-18;
    color: @black;
    line-height: @line-height-lg + 1;
    padding: 13px 0 10px;
    text-align: center;
  }
  &-frame {
    height: 520px;
    width: 100vw;
  }
  &-wrap {
    .body-wrap-mixin();
  }
  &-content {
    .body-wrap-mixin();
    font-size: @font-size-12;
    color: @gray-5;
    line-height: @line-height-md - 2;
  }
}
</style>
