<template>
  <div class="viewer__mask_banner_manage">
    <div class="content">
      <i class="el-icon-circle-close" style="color: #fff; font-size: 40px" @click="previewImgShowHanlder"></i>
      <div class="applet-preview">
        <h6>小程序预览图</h6>
        <div class="applet-img" :style="`background-image:url(${previewList.IndexImg})`">
          <div class="text">
            <p :style="{ 'font-size': renderMainTitleApplet() }">{{ previewList.mainTitle }}</p>
            <p>{{ previewList.twoTitle }}</p>
            <img class="preview_bg" src="~@/assets/img/rai_m/preview_bg.png" alt="" />
          </div>
        </div>
      </div>

      <div class="pc-preview">
        <h6>网页版预览图</h6>
        <!-- T1 预览图 -->
        <div class="pc-item one-item" :style="`background-image:url(${previewList.Img1})`">
          <p :style="{ 'font-size': renderMainTitle(35) }">{{ previewList.mainTitle }}</p>
          <p>{{ previewList.twoTitle }}</p>
        </div>
        <!-- T2 预览图 -->
        <div class="box-img-text tow-item">
          <div class="pc-item" :style="`background-image:url(${previewList.Img2})`">
            <p :style="{ 'font-size': renderMainTitle(26) }">{{ previewList.mainTitle }}</p>
            <p>{{ previewList.twoTitle }}</p>
          </div>
          <div class="pc-item" :style="`background-image:url(${previewList.Img3})`">
            <p :style="{ 'font-size': renderMainTitle(18) }">{{ previewList.mainTitle }}</p>
            <p>{{ previewList.twoTitle }}</p>
          </div>
        </div>
        <!-- T3 预览图 -->
        <div class="box-img-text three-item">
          <div class="pc-item" :style="`background-image:url(${previewList.Img2})`">
            <p :style="{ 'font-size': renderMainTitle(26) }">{{ previewList.mainTitle }}</p>
            <p>{{ previewList.twoTitle }}</p>
          </div>
          <div class="pc-item" :style="`background-image:url(${previewList.Img4})`">
            <p :style="{ 'font-size': renderMainTitle(0) }">{{ previewList.mainTitle }}</p>
            <p>{{ previewList.twoTitle }}</p>
          </div>
          <div class="pc-item" :style="`background-image:url(${previewList.Img4})`">
            <p :style="{ 'font-size': renderMainTitle(0) }">{{ previewList.mainTitle }}</p>
            <p>{{ previewList.twoTitle }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    previewList: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 关闭预览
    previewImgShowHanlder() {
      this.$parent.isShowPreview = false;
    },

    // 渲染主标题
    renderMainTitle(num) {
      let size = this.previewList.mainTitle.length < num ? 32 : 24;
      return size + "px";
    },

    // 渲染标题
    renderMainTitleApplet() {
      let size =
        this.previewList.twoTitle.length && this.previewList.mainTitle.length > 15
          ? 18
          : this.previewList.twoTitle.length && this.previewList.mainTitle.length < 15
          ? 20
          : this.previewList.twoTitle.length
          ? 22
          : 24;
      return size + "px";
    },
  },
};
</script>
<style lang="scss">
.viewer__mask_banner_manage {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .9);
  z-index: 9999999;
  .content {
    position: relative;
    width: 1745px;
    margin: 0 auto;
    .el-icon-circle-close {
      position: absolute;
      right: 60px;
      top: 60px;
      cursor: pointer;
    }
    h6 {
      font-size: 32px;
      color: #fff;
      text-align: center;
      margin-bottom: 5px;
    }
    .applet-preview {
      width: 375px;
      height: 320px;
      margin: 10px auto 80px;
      .applet-img {
        position: relative;
        width: 375px;
        height: 210px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        .text {
          width: 341px;
          height: 95px;
          margin: 0 auto;
          color: #fff;
          p {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 14px;
          }
          p:nth-child(1) {
            font-weight: 500;
            margin-bottom: 5px;
          }
        }
        .preview_bg {
          position: absolute;
          width: 375px;
          top: 10px;
          left: 0;
        }
      }
    }
    .pc-preview {
      div {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 100px;
        margin-bottom: 20px;
      }
      .box-img-text {
        display: flex;
        align-items: center;
      }
      .pc-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        height: 117px;
        p {
          width: 100%;
          font-size: 20px;
          margin: 0 auto;
        }
      }
      .one-item {
        width: 1745px;
        margin-bottom: 35px;
        p {
          width: 1180px;
        }
      }
      .tow-item {
        height: 117px;
        div:first-child {
          width: 1043px;
          margin-right: 20px;
          p {
            width: 836px;
          }
        }
        div:last-child {
          width: 682px;
          p {
            width: 546px;
          }
        }
      }
      .three-item {
        height: 117px;
        div {
          width: 331px;
          p {
            width: 264px;
          }
        }
        div:first-child {
          width: 1043px;
          margin-right: 20px;
          p {
            width: 836px;
          }
        }
        div:nth-child(2) {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
