<template>
  <div class="qr-dialog-content" style="opacity: 1;" v-show="value">
    <div class="qr-mask" @click.stop="closeDialog"></div>
    <div class="qr-dialog border-box">
      <div class="qr-dialog-body border-box">
        <div class="detail-content border-box">
          <div class="detail-content-card detail-content-top">
            <div class="task-title">
              <p class="font-16 color-242835 font-w-500 lh-23">{{ noticeData.groupSendTaskVO.taskTitle }}</p>
              <p class="copyBtn">复制任务内容</p>
            </div>
            <p class="taskDescription">{{ noticeData.groupSendTaskVO.taskDescription }}</p>
            <p class="implementor">执行人：{{ noticeData.groupSendTaskVO.executeClerkName }}</p>
            <p class="remain-time" v-if="noticeData.groupSendTaskVO.taskStatus === 1">逾期剩余时长：{{ timeStampSpaces(noticeData.groupSendTaskVO.overdueTime) }}</p>
            <p class="finished font-12`" v-else>已完成</p>
          </div>
          <div class="detail-content-card detail-content-bottom">
            <div class="title">群发素材内容</div>
            <ul class="source-material">
              <li class="source-material-item" v-for="material in noticeData.materialDTOList" :key="material">
                <p class="source-material-item-text" v-if="material.materialType === 1">{{ material.materialContent }}</p>
                <template v-else>
                  <img :src="material.materialType === 5 ? file_icon : material.imgUrl" alt="" />
                  <p class="source-material-item-title">{{ material.materialTitle }}</p>
                </template>
              </li>
            </ul>
          </div>
        </div>
        <!-- 关闭 -->
        <div class="qr-dialog__hd">
          <i class="el-icon-plus" @click.stop="closeDialog"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import file_icon from '../../assets/file_icon.png';
export default {
  name: 'detail-preview',
  props: {
    value: {
      type: Boolean,
      default() {
        return false;
      }
    },
    previewData: {
      type: Object,
      default() {
        return {
          groupSendTaskVO: {
            taskTitle: '', // 任务标题
            taskDescription: '', // 任务描述
            overdueTime: '', // 逾期期限
            executeClerkName: '' // 执行人
          },
          materialDTOList: [
            // {
            //   materialId: 'b28cb87aa4814e619dd9ac93fb302f8e',
            //   materialTitle: 12, // 素材标题
            //   materialType: 1,  // 素材类型, 1 : 文本, 2 : 图片, 3 : 网页,4 : 视频, 5 : 文件
            //   categoryId: -1, // 素材分类
            //   materialContent: 123, // 素材内容
            //   staffName: '飞飞哥',
            //   imgUrl: null, // 图片地址
            //   wxImgUrl: null, // 微信图片链接
            // }
          ]
        };
      }
    }
  },
  data() {
    return {
      file_icon,
      noticeData: {
        groupSendTaskVO: {
          taskTitle: '', // 任务标题
          taskDescription: '', // 任务描述
          overdueTime: '', // 逾期期限
          executeClerkName: '' // 执行人
        },
        materialDTOList: [
          // {
          //   materialId: 'b28cb87aa4814e619dd9ac93fb302f8e',
          //   materialTitle: 12, // 素材标题
          //   materialType: 1,  // 素材类型, 1 : 文本, 2 : 图片, 3 : 网页,4 : 视频, 5 : 文件
          //   categoryId: -1, // 素材分类
          //   materialContent: 123, // 素材内容
          //   staffName: '飞飞哥',
          //   imgUrl: null, // 图片地址
          //   wxImgUrl: null, // 微信图片链接
          // }
        ]
      },
      time: null
    };
  },
  methods: {
    timeStampSpaces(date) {
      if (!date) {
        return;
      }
      let date2 = new Date().getTime();
      let date3 = Number(date) - date2; //时间差的毫秒数
      if (date3 < 0) {
        return '已逾期';
      }
      //计算出相差天数
      let days = Math.floor(date3 / (24 * 3600 * 1000));
      //计算出小时数
      let leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      let hours = Math.floor(leave1 / (3600 * 1000));
      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      let minutes = Math.floor(leave2 / (60 * 1000));
      //计算相差秒数
      // let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      // let seconds = Math.round(leave3 / 1000);
      return `${days}天${hours}小时${minutes}分`;
    },
    /**
     *  关闭预览窗口
     */
    closeDialog() {
      const that = this;

      that.$emit('input', false);
      that.$emit('closePreview');
      that.noticeData = {
        groupSendTaskVO: {
          taskTitle: '', // 任务标题
          taskDescription: '', // 任务描述
          overdueTime: '', // 逾期期限
          executeClerkName: '' // 执行人
        },
        materialDTOList: [
          // {
          //   materialId: 'b28cb87aa4814e619dd9ac93fb302f8e',
          //   materialTitle: 12, // 素材标题
          //   materialType: 1,  // 素材类型, 1 : 文本, 2 : 图片, 3 : 网页,4 : 视频, 5 : 文件, 6 : 小程序
          //   categoryId: -1, // 素材分类
          //   materialContent: 123, // 素材内容
          //   staffName: '飞飞哥',
          //   imgUrl: null, // 图片地址
          // }
        ]
      };
      clearInterval(that.time);
    }
  },
  watch: {
    previewData(newData, oldData) {
      const that = this;
      if (Object.keys(newData).length) {
        that.noticeData = JSON.parse(JSON.stringify(newData));
        that.time = setInterval(function() {
          that.timeStampSpaces(that.previewData.groupSendTaskVO.overdueTime);
        }, 60000);
      }
    }
  },
  mounted() {
    const that = this;
    if (Object.keys(that.previewData).length) {
      that.noticeData = JSON.parse(JSON.stringify(that.previewData));
      that.time = setInterval(function() {
        that.timeStampSpaces(that.previewData.groupSendTaskVO.overdueTime);
      }, 60000);
    }
  },
  beforeDestroy() {
    const that = this;
    clearInterval(that.time);
    that.time = null;
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.color-242835 {
  color: #242835;
}
.lh-20 {
  line-height: 20px;
}
.lh-23 {
  line-height: 23px;
}
.mb-13 {
  margin-bottom: 13px;
}
.qr-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.detail-content {
  width: 100%;
  .detail-content-card {
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 24px;
    box-sizing: border-box;
  }
  .detail-content-top {
    // height: 175px;
    .task-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 12px;
      .copyBtn {
        width: 96px;
        height: 23px;
        color: #2c3038;
        font-size: 12px;
        line-height: 23px;
        text-align: center;
        border-radius: 12px;
        border: 1px solid #cacaca;
      }
    }
    .taskDescription {
      height: 60px;
      margin-bottom: 13px;
      font-size: 14px;
      font-weight: 400;
      color: #242835;
      line-height: 20px;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .implementor {
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #7f818a;
      line-height: 17px;
    }
    .remain-time {
      font-size: 12px;
      font-weight: 400;
      color: #fd6b6d;
      line-height: 17px;
    }
  }
  .detail-content-bottom {
    .title {
      font-size: 15px;
      font-weight: 500;
      color: #242835;
      line-height: 21px;
      margin-bottom: 15px;
    }
    .source-material {
      width: 100%;
      max-height: 470px;
      overflow: scroll;
      .source-material-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height: 70px;
        padding: 10px;
        margin-bottom: 8px;
        background: #f4f4f9;
        box-sizing: border-box;
        img {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }
        .source-material-item-title {
          font-size: 16px;
          font-weight: 500;
          color: #242835;
          line-height: 23px;
        }
        .source-material-item-text {
          font-size: 16px;
          font-weight: 400;
          color: #242835;
          line-height: 23px;
        }
      }
    }
  }
}

.qr-dialog {
  position: fixed;
  z-index: 5000;
  width: 344px;
  height: 715px;
  padding: 58px 12px 55px 12px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  border-radius: 3px;
  background: url('../../assets/iphone.png') no-repeat;
  background-size: 100%;
  .qr-dialog-body {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    text-align: left;
    // background: #ccc;
    background: rgba(241, 242, 247, 1);
    overflow-y: auto;
    .notice-body {
      padding: 20px 0;
      font-size: 12px;
      white-space: pre-wrap;
      word-break: break-all;
      >>> video {
        width: 100%;
        height: auto;
      }
      >>> img {
        width: 100%;
        height: auto;
      }
      >>> p {
        iframe {
          width: 100%;
          height: auto;
        }
      }
    }
  }
}
.qr-dialog__hd {
  position: fixed;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  bottom: -65px;
  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>
