<template>
  <div class="preview-container">
    <!-- 当模板类型为标准模板时 -->
    <div style="width: 100%; height: 100%; background-color: #f5f5f5;" v-if="info.templateType === 1">
      <div class="header-container" :style="{ color: info.fontColor }">
        <el-image
          class="temp-bg"
          :src="info.bgUrl"
          fit="cover"
        />
        <div class="title-container">
          <div class="language-info" v-if="info.showChangeLanguage">语言设置</div>
          <div class="title">溯源</div>
        </div>
      </div>
      <div style="text-align: center; font-size: 16px; color: rgb(52,186,118); margin-top: calc(50% - 16px);">溯源内容展示区域</div>
      <div class="flex p-20 footer-container">
        <img class="icon-logo" src="@/assets/images/icon-logo.png"/>
        <div class="flex-col flex-fs fs-12">
          <div>中富通集团股份有限公司</div>
          <div>技术支持：0591-83768689</div>
          <div>地址：福建福州鼓楼区铜盘路软件大道89号F区4号楼20</div>
        </div>
      </div>

      <!-- 扫码图标 -->
       <div class="scan-record-icon" style="position: absolute; bottom: 150px; right: 10px; width: 50px; height: 50px;" v-if="info.showScanRecord">
        <img :src="info.scanRecordIconUrl" alt="" width="100%" height="100%"/>
       </div>
    </div>

    <!-- 当模板类型为自定义模板时 -->
    <div style="width: 100%; height: 100%; background-color: #f5f5f5; position: relative;" v-if="info.templateType === 2">
      <el-image
        class="temp-bg"
        :src="info.bgUrl"
        fit="cover"
      />
      <!-- 节点列表 -->
      <div
        class="node-item"
        v-for="item in nodeList"
        :key="item.id"
        :style="{ width: item.width + 'px', height: item.height + 'px', top: item.top, left: item.left }"
      >
        <div class="node-item-title" :ref="`nodeTitle${item.id}`" :style="{ top: item.textTop, left: item.textLeft }">{{ item.name }}</div>
        <el-image
          style="width: 100%; height: 100%;"
          :src="item.iconUrl"
        />
      </div>
    </div>

    <!-- 右下角图标 -->
    <div class="fixed-icon-container" v-if="info.templateType === 2">
      <el-image class="fixed-icon" :src="info.scanRecordIconUrl" v-if="info.showScanRecord" fit="contain"/>
      <el-image class="fixed-icon" :src="info.goodsDetailIconUrl" v-if="info.showGoodsDetail" fit="contain"/>
      <el-image class="fixed-icon" :src="info.aiIconUrl" v-if="info.showAi" fit="contain"/>
      <el-image class="fixed-icon" :src="info.shopIconUrl" v-if="info.showShop" fit="contain"/>
      <el-image class="fixed-icon" :src="info.changeLanguageIconUrl" v-if="info.showChangeLanguage" fit="contain"/>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    props:{
      info: {
        type: Object,
        default: ()=>{},
      },
      operateDate: {
        type: Object,
        default: ()=>{},
      },
    },
    watch: {
      info: {
        handler(newValue) {
          const that = this;
          if (newValue && newValue.bgUrl && newValue.bgUrl !== '') {
            const img = new Image();
            img.src = newValue.bgUrl;
            img.onload = function() {
              // 获取图片宽高
              const width = this.width;
              const height = this.height;
              // 计算缩放比例 375为手机宽度(这里是预览容器的宽度)
              const scale = width / 375;

              that.nodeList = newValue.templateItemList.map(item => {
                // 计算节点的位置 top: 图片原始的宽高 / 缩放比例 * 节点的 y 百分比 - 节点的高度
                item.top = height / scale  * (item.y / 100) - item.height + 'px';
                // 计算节点的位置 left: 图片原始的宽高 / 缩放比例 * 节点的 x 百分比 - 节点的宽度 / 2
                item.left = width / scale  * (item.x / 100) - item.width / 2 + 'px';
                item.textTop = '0px';
                item.textLeft = '0px';
                return item;
              });

              that.$nextTick(() => {
                // 节点列表渲染完成后，获取节点名字的宽高
                that.nodeList = that.nodeList.map(item => {
                  const dom = that.$refs[`nodeTitle${item.id}`][0];
                  if (dom) {
                    const titleWidth = dom.offsetWidth;
                    const titleHeight = dom.offsetHeight;
                    item.textTop = `-${titleHeight + 5}px`;
                    item.textLeft = `${(item.width - titleWidth) / 2}px`;
                  }
                  return item;
                });
              });
            }
          }
        },
        deep: true,
      },
    },
    data() {
      return {
        nodeList: [],
      }
    },
  }
</script>

<style lang="scss" scoped>
  .preview-container {
    width: 375px;
    height: 815px;
    background-color: #ffffff;
    overflow-y: scroll;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;

    .temp-bg {
      width: 100%;
    }

    .header-container {
      width: 100%;
      height: 90px;
      position: relative;
      overflow: hidden;

      .title-container {
        width: 100%;
        height: 45px;
        padding-top: 45px;
        position: absolute;
        left: 0;
        top: 0;
        line-height: 45px;
        .language-info {
          position: absolute;
          left: 20px;
          font-size: 11px;
        }
        .title {
          font-size: 24px;
          font-weight: bold;
          text-align: center;
        }
      }
    }

    .footer-container {
      position: absolute;
      bottom: 0;
      width: 100%;
    }

    .node-item {
      position: absolute;

      .node-item-title {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        // 原本只固定宽度, 高度自动换行, 这边说是要先全固定
        width: 122px;
        height: 28.5px;
        line-height: 20px;
        text-align: center;
        border: #C79E60 2px solid;
        border-radius: 20px;
        background-color: #fff;
        padding: 2px 10px;
      }
    }

    .fixed-icon-container {
      width: 89px;
      position: absolute;
      right: 0px;
      bottom: 10px;

      .fixed-icon {
        width: 89px;
        height: 53px;
        margin-top: 14px;
      }
    }
  }
</style>
