<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-18 10:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-21 16:33:09
 -->
<!--
<app-template :templateData="templateData"></app-template>

import appTemplate from '@/components/active-config/app-template.vue';
-->
<template>
  <div class="app-template-content">
    <div v-if="templateData.length > 0"></div>
    <div class="displayItem" v-for="(item, index) in templateData" :key="index" :class="['item' + item.key, { curedit: curIndex == index }]">
      <!-- 卡券 -->
      <div v-if="item.key == 'B7'" class="card-wrap" :class="{ 'no-padding-r15': (item.cardSetting.length == 1 && item.cardSetting[0].cardData.length > 2) || item.cardSetting.length > 2 }">
        <div class="img" v-if="item.cardStyle == 1">
          <img v-if="(item.cardSetting.length == 1 && item.cardSetting[0].cardData.length < 2) || item.cardSetting.length == 0" src="../../../static/img/style2-1.png" alt="" />
          <img v-if="(item.cardSetting.length == 1 && item.cardSetting[0].cardData.length == 2) || item.cardSetting.length == 2" src="../../../static/img/style2-2.png" alt="" />
          <img v-if="(item.cardSetting.length == 1 && item.cardSetting[0].cardData.length > 2) || item.cardSetting.length > 2" src="../../../static/img/style01.png" alt="" />
        </div>
        <div class="img" v-if="item.cardStyle == 2">
          <img v-if="(item.cardSetting.length == 1 && item.cardSetting[0].cardData.length < 2) || item.cardSetting.length == 0" src="../../../static/img/style1-1.png" alt="" />
          <img v-if="(item.cardSetting.length == 1 && item.cardSetting[0].cardData.length == 2) || item.cardSetting.length == 2" src="../../../static/img/style1-2.png" alt="" />
          <img v-if="(item.cardSetting.length == 1 && item.cardSetting[0].cardData.length > 2) || item.cardSetting.length > 2" src="../../../static/img/style02.png" alt="" />
        </div>
        <div class="img" v-if="item.cardStyle == 3">
          <img src="../../../static/img/style03.png" alt="" />
        </div>
      </div>
      <!-- 富文本 -->
      <div v-if="item.key == 'A1'" class="fu-text-wrap" v-html="item.richTextContent"></div>
      <!-- 图片广告 -->
      <el-carousel :style="{ height: 60 + 'px' }" v-if="item.key == 'A2'" style="overflow: hidden;">
        <el-carousel-item v-for="(list, index) in item.data" :key="index">
          <img :style="{ height: 60 + 'px' }" width="100%" v-if="list.qcloudImageUrl" :src="list.qcloudImageUrl" alt="" />
          <img :style="{ height: 60 + 'px' }" width="100%" v-else src="../../../static/img/ad.png" alt="" />
        </el-carousel-item>
      </el-carousel>
      <!-- 魔方 九宫格-->
      <div v-if="item.key == 'A3' && item.templateType == 9">
        <div class="main" style="padding: 4px;">
          <div class="column-item">
            <div class="mainbox">
              <div class="mainboxdraggable clearfix">
                <template v-if="index < 3">
                  <div class="mainboximg" :class="curjggIndex == index ? 'curitem' : ''" v-for="(list, index) in item.data" :key="index">
                    <img v-if="list.qcloudImageUrl" :src="list.qcloudImageUrl" alt="" />
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="column-item">
            <div class="mainbox">
              <div class="mainboxdraggable clearfix">
                <template v-if="index >= 3 && index < 6">
                  <div class="mainboximg" :class="curjggIndex == index ? 'curitem' : ''" v-for="(list, index) in item.data" :key="index">
                    <img v-if="list.qcloudImageUrl" :src="list.qcloudImageUrl" alt="" />
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div class="column-item">
            <div class="mainbox">
              <div class="mainboxdraggable clearfix">
                <template v-if="index >= 6 && index < 9">
                  <div class="mainboximg" :class="curjggIndex == index ? 'curitem' : ''" v-for="(list, index) in item.data" :key="index">
                    <img v-if="list.qcloudImageUrl" :src="list.qcloudImageUrl" alt="" />
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 魔方 自定义-->
      <div v-if="item.key == 'A3' && item.templateType == 8" class="phone-cube">
        <div
          v-if="(item.data.length > 0 && item.data[0].pos == '') || item.data.length < 1"
          :style="{
            height: (157 / item.lineSetting.column) * item.lineSetting.row + 'px'
          }"
        ></div>
        <div v-else :style="{ height: (157 / item.lineSetting.column) * item.lineSetting.row + 'px' }">
          <img class="img-cube" :src="itm.qcloudImageUrl" :alt="item.lineSetting.column" v-for="(itm, idx) in item.data" :key="idx" :style="{ width: (itm.pos[4] - itm.pos[0]) * (157 / item.lineSetting.column) + 'px', height: ((itm.pos[7] == 0 ? 10 : itm.pos[6]) - itm.pos[2]) * (157 / item.lineSetting.column) + 'px', left: itm.pos[0] * (157 / item.lineSetting.column) + 'px', top: itm.pos[2] * (157 / item.lineSetting.column) + 'px' }" />
        </div>
      </div>
      <!-- 文本 -->
      <div v-if="item.key == 'A5'" class="threecontent" v-html="enterLine(item.content)" :style="[{ color: item.fontColor, background: item.backgroundColor, textAlign: item.pos }, { padding: item.fillWay !== 0 ? '10px' : '' }]"></div>
      <!-- 横栏 -->
      <div class="crossbar" v-if="item.key == 'A6'">
        <!-- icon横栏 -->
        <ul v-if="parseInt(item.templateType) == 1">
          <li class="crossbar-list" :style="[{ background: item.backgroundColor }]" v-for="(list, index) in item.data" :key="index">
            <span class="crossbar-icon11">
              <img v-if="list.qcloudImageUrl" :src="list.qcloudImageUrl" alt="" />
              <img v-else src="../../../static/img/default.jpg" alt="" />
            </span>
            <span class="crossbar-icon2" :style="[{ color: item.fontColor }]">{{ list.title }}</span>
            <span class="crossbar-icon3"> <i class="el-icon-arrow-right" v-if="item.jumpHint"></i> </span>
          </li>
        </ul>
        <!-- 纯文字横栏 -->
        <ul v-if="parseInt(item.templateType) == 2">
          <li class="crossbar-list" :style="[{ background: item.backgroundColor }]" v-for="(list, index) in item.data" :key="index">
            <span class="crossbar-icon2" :style="[{ color: item.fontColor }]">{{ list.title }}</span>
            <span class="crossbar-icon3"> <i class="el-icon-arrow-right" v-if="item.jumpHint"></i> </span>
          </li>
        </ul>
        <!-- 双向横栏 -->
        <ul v-if="parseInt(item.templateType) == 3">
          <li class="crossbar-list" :style="[{ background: item.backgroundColor }]">
            <div class="double-heng-item" v-for="(list, index) in item.data" :key="index">
              <span class="crossbar-icon11">
                <img v-if="list.qcloudImageUrl" :src="list.qcloudImageUrl" alt="" />
                <img v-else src="../../../static/img/default.jpg" alt="" />
              </span>
              <span class="crossbar-icon2" :style="[{ color: item.fontColor }]">{{ list.title }}</span>
            </div>
          </li>
        </ul>
      </div>
      <!-- 辅助线 -->
      <div v-if="item.key == 'A7'">
        <div class="fuzhuline" :style="[{ borderColor: item.fontColor, borderStyle: parseInt(item.style) == 1 ? 'solid' : parseInt(item.style) == 2 ? 'dashed' : parseInt(item.style) == 3 ? 'dotted' : '' }, { margin: parseInt(item.fillWay) == 1 ? '2px 10px' : '' }]"></div>
      </div>
      <!-- 辅助空白 -->
      <div v-if="item.key == 'A8'">
        <div :style="{ height: item.fillWay + 'px' }"></div>
      </div>
      <!-- 进入积分 -->
      <div v-if="item.key == 'B1'">
        <div class="integral-list-page">
          <div class="integral-list-top" :style="{ height: item.setting !== 1 ? '65px' : '' }">
            <img class="integral-img" src="../../../static/img/credit-banner_bg.png" alt="" />
            <div class="integral-list-item">
              <p class="integral-num">10000</p>
              <p class="integral-item-title">可用积分</p>
            </div>
            <div class="integral-list-item">
              <p class="integral-num">300</p>
              <p class="integral-item-title">冻结积分</p>
            </div>
          </div>
          <div class="integral-list-bottom" style="overflow: hidden;">
            <img width="353" height="85" src="../../../static/img/credit-sign_bg.png" />
          </div>
        </div>
      </div>
      <!-- 数据icon -->
      <div v-if="item.key == 'B2'">
        <div class="customicon" v-if="parseInt(item.templateType) == 3">
          <template v-for="(list, index) in item.data">
            <div class="customicon-item" :class="{ dataiconflex: parseInt(item.amount) == 3 }" v-if="list.status == true" :key="index">
              <p :style="{ color: list.fontColor }">0</p>
              <p :style="{ color: list.fontColor }">
                <span>{{ list.title }}</span>
              </p>
            </div>
          </template>
        </div>
        <div class="customicon" v-if="parseInt(item.templateType) !== 3">
          <ul style="width: 100%">
            <template v-for="(list, index) in item.data">
              <li class="crossbar-list" :style="[{ background: item.backgroundColor }]" :key="index" v-if="list.status == true">
                <span class="crossbar-icon1" v-if="parseInt(item.templateType) == 1">
                  <img width="20" height="20" v-if="list.qcloudImageUrl" :src="list.qcloudImageUrl" alt="" />
                  <img width="20" height="20" v-else src="../../../static/img/default.jpg" alt="" />
                </span>
                <span class="crossbar-icon2" :style="[{ color: item.fontColor }]">
                  <span>{{ list.title }}</span>
                </span>
                <span class="crossbar-icon3">0</span>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app-template',
  props: {
    templateData: {
      type: [Array, Object],
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    enterLine(val) {
      if (val) {
        val = val.replace(/\n/g, '<br>');
      }
      return val;
    }
  }
};
</script>
<style lang="less" scoped>
.clearfix:after,
.clearfix:before {
  content: '';
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}
.app-template-content {
  .displayItem {
    width: 100%;
    border-bottom: 1px solid #eee;
    min-height: 10px;
    position: relative;
    box-sizing: border-box;
    // 卡券
    .card-wrap {
      padding: 10px 0px;
      min-height: 50px;
      background: #fff;
      &.no-padding-r15 {
        padding-right: 0;
      }
      .img {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
    .crossbar-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 30px;
      padding: 0;
      border-bottom: 1px solid #dcdfe6;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      text-align: left;
      font-size: 0;
      &:last-child {
        border-bottom: 0;
      }
    }
    .crossbar-icon2 {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: 15px;
      text-align: left;
      line-height: 20px;
      color: #232326;
      overflow: hidden;
    }
    .crossbar-icon3 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 25px;
      flex: 0 0 25px;
      font-size: 14px;
      color: #5a5a5a;
    }
    .crossbar-icon11 {
      img {
        width: 22px;
      }
    }

    .double-heng-item:first-child {
      width: 90px;
      margin-right: 15px;
      border-right: 1px solid #e3e5e9;
    }
    .crossbar .double-heng-item {
      width: 80px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .fu-text-wrap {
      width: 100%;
      min-height: 180px;
      text-align: left;
      line-height: 36px;
      white-space: pre-wrap;
      word-break: break-all;
    }
    .customicon {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      .customicon-item {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        min-height: 30px;
        line-height: 20px;
        font-size: 10px;
        text-align: center;
      }
    }
    &.itemA5 {
      min-height: 20px;
    }
    .threecontent {
      word-break: break-all;
    }
    .main {
      width: 177px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .column-item {
        width: 177px;
        .mainbox {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          .clearfix {
            zoom: 1;
          }
          .mainboximg:first-child {
            border-left: 1px solid #dcdfe6;
          }
          .mainboximg {
            width: 56px;
            min-height: 22px;
            max-height: 22px;
            float: left;
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid #dcdfe6;
            margin-right: -1px;
            margin-bottom: -1px;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
        }
      }
    }
    .phone-cube {
      border: 10px solid #fff;
      background: #d9d9d9;
      position: relative;
      .img-cube {
        position: absolute;
      }
    }
    .integral-list-page {
      padding-bottom: 24px;
      position: relative;
      .integral-list-top {
        height: 185px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        overflow: hidden;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        .integral-img {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
        }
        .integral-list-item {
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          z-index: 2;
          text-align: center;
          .integral-num {
            font-size: 12px;
            margin-top: 9px;
            text-align: center;
            color: rgb(223, 183, 114);
          }
          .integral-item-title {
            font-size: 10px;
            margin-top: 11px;
            text-align: center;
            color: #fff;
          }
        }
      }
      .integral-list-bottom {
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        img {
          width: 170px;
          height: auto;
        }
      }
    }
  }
}
</style>
