<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-10-22 15:12:41
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-18 12:47:45
 -->

<!--
<material-preview ref="materialPreview" :materialPreviewData="materialPreviewData" v-model="previewVisible" @closePre="closePre"></material-preview>

import materialPreview from '@/components/app/material/material-preview.vue';
components: {
  materialPreview
}

previewVisible: false,
-->
<template>
  <div class="qr-dialog-content" style="opacity: 1;" v-if="value">
    <div class="qr-mask" @click.stop="closeDialog"></div>
    <div class="qr-dialog border-box">
      <div class="qr-dialog-body border-box">
        <h2 class="font-20 color-222 text-left main-title">{{ materialData.materialTitle }}</h2>
        <div class="notice-date m-t-10 flex flex-space-between">
          <div class="notice-date-left font-10 color-88949C">{{ materialData.materialId ? materialData.createTime : new Date().getTime() | timeStampToYmd }}</div>
          <div class="notice-date-right font-10 color-4d7fd0"></div>
        </div>
        <div class="notice-body border-box font-14 color-222" v-htmlContent="materialData.materialContent"></div>

        <div v-if="!!materialData.imgUrlList && !!materialData.imgUrlList.length" class="img-list-wrap">
          <ul class="flex flex-wrap">
            <li v-for="(item, index) in materialData.imgUrlList" :key="index + 'img'" class="border-box flex flex-align-center flex-pack-center">
              <img :src="item.imgUrl" alt="" />
            </li>
          </ul>
        </div>
        <div v-if="!!materialData.imageTextWechatId" class="image-text-link">
          <div class="flex cursor-pointer" @click="toUrl(materialData.mediaUrl)">
            <div class="flex-left-img flex flex-align-center flex-pack-center">
              <img :src="materialData.imageUrl" alt="" />
            </div>
            <div class="flex-right-title border-box">
              <div class="title-content font-14 color-606266">{{ materialData.titleName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 关闭 -->
    <div class="qr-dialog__hd">
      <i class="el-icon-plus" @click.stop="closeDialog"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'material-preview',
  props: {
    value: {
      type: Boolean,
      default() {
        return false;
      }
    },
    materialPreviewData: {
      type: [Object, Array],
      default() {
        return {
          materialId: '',
          imageTextWechatId: '', // 选择的参数
          imageTextGicId: '', // 选择的参数
          titleName: '', //预览需要
          imageUrl: '', //预览需要
          mediaUrl: '',
          rangeList: [],
          imgUrlList: [],
          materialTitle: '', // 标题
          materialContent: '', // 发送内容
          topFlag: false // 置顶
        };
      }
    }
  },
  directives: {
    htmlContent: {
      // 指令的定义
      bind: function(el, param) {
        el.innerHTML = param.value;
      },
      update: function(el, param) {
        el.innerHTML = param.value;
      }
    }
  },
  data() {
    return {
      materialData: {
        materialId: '',
        imageTextWechatId: '', // 选择的参数
        imageTextGicId: '', // 选择的参数
        rangeList: [],
        imgUrlList: [],
        mediaUrl: '',
        materialTitle: '', // 标题
        materialContent: '', // 发送内容
        topFlag: false // 置顶
      }
    };
  },
  methods: {
    toUrl(url) {
      window.open(url);
    },
    /**
     *  关闭预览窗口
     */
    closeDialog() {
      const that = this;
      that.$emit('input', false);
      that.$emit('closePre');
    }
  },
  watch: {
    value(newData, oldData) {
      const that = this;
      that.materialData = JSON.parse(JSON.stringify(that.materialPreviewData));
    },
    materialPreviewData(newData, oldData) {
      const that = this;
      that.materialData = JSON.parse(JSON.stringify(newData));
    }
  },
  mounted() {
    const that = this;
    that.materialData = JSON.parse(JSON.stringify(that.materialPreviewData));
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.font-10 {
  font-size: 10px;
}
.color-222 {
  color: #222222;
}
.color-88949C {
  color: #88949c;
}
.color-4d7fd0 {
  color: #4d7fd0;
}
.color-a5afb8 {
  color: #a5afb8;
}
.p-lr-5 {
  padding: 0 5px;
}
.qr-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.qr-dialog {
  position: fixed;
  z-index: 5000;
  width: 220px;
  height: 440px;
  padding: 58px 12px 30px 12px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
  background: url('../../../assets/iPhone_preview.png') no-repeat;
  .qr-dialog-body {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 15px 8px;
    text-align: left;
    // background: #ccc;
    overflow-y: auto;
    .main-title {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .notice-body {
      margin: 20px auto;
      font-size: 14px;
      white-space: pre-wrap;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      >>> video {
        width: 100%;
        height: auto;
      }
      >>> img {
        width: 100%;
        height: auto;
      }
      >>> p {
        iframe {
          width: 100%;
          height: auto;
        }
      }
    }
    .img-list-wrap {
      li {
        width: calc((100% - 4px) / 3);
        max-width: calc((100% - 4px) / 3);
        height: 60px;
        margin-bottom: 2px;
        margin-right: 2px;
        &:nth-child(3n + 3) {
          margin-right: 0px;
        }
        img {
          max-width: 100%;
          max-height: 60px;
        }
      }
    }
    .image-text-link {
      background: rgba(0, 0, 0, 0.4);
      .flex-left-img {
        width: 60px;
        height: 60px;
        max-width: 60px;
        img {
          max-width: 60px;
          max-height: 60px;
        }
      }
      .flex-right-title {
        width: calc(100% - 60px);
        padding: 12px;
        .title-content {
          white-space: pre-wrap;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-height: 18px;
        }
      }
    }
  }

  .qr-dialog__bd {
    padding: 0 1.6em 0.8em;
    min-height: 40px;
    font-size: 15px;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-all;
    color: #808080;

    #qrcode {
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .qr-dialog__p {
      padding: 20px 0;
      font-size: 14px;
      color: #606266;
    }
  }
}
.qr-dialog__hd {
  position: fixed;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  bottom: 15%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 5001;
  i {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
</style>
