<template>
  <div class="container-dlg" v-if="showTips">
    <div class="text">
      <h1>免责声明</h1>
      <template v-if="type === '产品内测'">
        <div v-html="disclaimers"></div>
      </template>
      <p v-else>
        本文为用户投稿，用户在平台中发表的所有资料、言论等仅代表个人观点，与本平台立场无关，不对您构成任何投资建议。本平台对文中陈述、观点判断保持中立，不对所包含内容及数据的真实性、准确性、可靠性或完整性提供任何明示或暗示的保证。请读者仅作参考，并请自行承担全部责任。
      </p>
      <p class="hide-tips" @click="isHide">知道了</p>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, toRefs, ref } from "vue";
const props = defineProps({
  showTips: {
    type: Boolean,
    required: true,
    default: false,
  },
  reportInfo: {
    type: Object,
  },
  type: {
    type: String,
    default: "",
  },
  disclaimers: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["hideDlg"]);

const isHide = () => {
  emit("hideDlg");
};
</script>

<style lang="scss" scoped>
.container-dlg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  padding: 0px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  @media screen and (min-width: 790px) {
    padding: 0px 30px;
    width: 1200px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .text {
    width: 100%;
    background-color: #fff;
    border-radius: 20px;
    @media screen and (min-width: 790px) {
      width: 50%;
      border-radius: 20px;
    }
    h1 {
      padding-top: 30px;
      text-align: center;
      font: 32px "PingFang-SC-Regular";
      color: #333;
      text-align: center;
      margin-bottom: 17px;
      @media screen and (min-width: 790px) {
        padding-top: 15px;
        margin-bottom: 17px;
        font: 16px "PingFang-SC-Regular";
      }
    }
    p {
      padding: 0 30px;
      font-size: 26px;
      @media screen and (min-width: 790px) {
        padding: 0 15px;
        font-size: 14px;
      }
    }
    .hide-tips {
      margin-top: 20px;
      font-size: 28px;
      line-height: 80px;
      color: #2680eb;
      text-align: center;
      border-top: 1px solid #eaeaea;
      cursor: pointer;
      @media screen and (min-width: 790px) {
        margin-top: 10px;
        font-size: 14px;
        line-height: 40px;
      }
    }
  }
}
</style>
