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

<script>
/**
 * @description: 弹框，基于cr-pupop，针对iframe等业务场景进行简单封装
 * @param {type}
 * @return:
 */
const CHANGE_EVENT = "input";
export default {
  name: "PopupWithIframe",
  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" scoped>
@import "../style/var.less";
.body-wrap-mixin {
  overflow-x: hidden;
  overflow-y: auto;
  height: 80vh;
  padding: @padding-lg;
}
.protocol {
  z-index: 200;
  height: 80vh;
  padding-top: 48px;
  overflow: hidden;
  @{deep} .cr-icon {
    color: #d0cfcf;
    font-size: @font-size-18;
    top: 16px;
    right: 14px;
    z-index: 99;
  }
  &-head {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
  }
  &-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: 100%;
    min-width: 100%;
    *width: 100%;
    width: 1px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    &-wrap {
      // position: fixed;
      // bottom: 0;
      // left: 0;
      // z-index: 201;
      height: 80vh;
      overflow: scroll;
      width: 100vw;
      -webkit-overflow-scrolling: touch;
    }
  }
  &-wrap {
    .body-wrap-mixin();
  }
  &-content {
    .body-wrap-mixin();
    font-size: @font-size-12;
    color: @gray-5;
    line-height: @line-height-md - 2;
  }
}
</style>
