<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-03-17 15:12:41
 * @LastEditors: 无尘
 * @LastEditTime: 2020-03-20 15:35:11
 -->

<!--
<detail-preview ref="detailPreview" :previewData="previewData" v-model="previewVisible" @closePreview="closePreview"></detail-preview>

import detailPreview from '@/components/app/detail-preview.vue';
components: {
  detailPreview
}

previewVisible: false,
-->
<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="notice-date m-t-10 flex flex-space-between">
          <div class="notice-date-left font-10 color-88949C">{{ noticeData.announcementId ? noticeData.sendTime : new Date().getTime() | formatTimeYmdHms }}</div>

        </div> -->
        <!-- <div class="notice-body border-box color-222" v-htmlContent="noticeData.content"></div> -->
        <div class="detail-content border-box">
          <div class="detail-content-top border-box">
            <div class="task-title font-14 color-303133 font-w-500">{{ noticeData.title }}</div>
            <div class="task-des font-12 color-303133 font-w-400">{{ noticeData.taskDescription }}</div>
            <div class="task-over font-10 color-fd6b6d font-w-400">
              <span v-if="noticeData.taskStatus == 1">逾期剩余时长：{{ timeStampSpaces(noticeData.lastTime) }}</span>
              <span v-if="noticeData.taskStatus == 2">已完成</span>
              <span v-if="noticeData.taskStatus == 3">已放弃</span>
              <span v-if="noticeData.taskStatus == 4">已逾期</span>
              <span v-if="noticeData.taskStatus == 5">已完成</span>
            </div>
            <div class="task-people">
              <div class="task-item-cell" v-for="(item, index) in noticeData.taskRecordList" :key="index + 'record'">
                <div class="task-item-content">
                  <span class="iconfont icondingwei font-10 color-4b69e5"></span><span class="font-10 color-606266 opt-content">{{ item.optContent }}</span>
                </div>
                <div :class="['task-item-date', index != noticeData.taskRecordList.length - 1 ? 'item-border' : '']">
                  <span class="p-l-14 font-10 color-909399">{{ item.optTime }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="detail-content-bottom border-box m-t-10">
            <div class="user-info flex ">
              <div class="user-photo"><img :src="noticeData.memberInfo.imgUrl" alt="" /></div>
              <div class="user-name-body">
                <div class="user-name">
                  <span class="font-12 color-30313 font-w-500">{{ noticeData.memberInfo.memberName }}</span
                  ><span :class="['p-l-6 font-12 iconfont', noticeData.memberInfo.memberGender == 0 ? '' : noticeData.memberInfo.memberGender == 1 ? 'iconnan color-4b69e5' : 'color-ff8ea0 iconxingbienv']"></span>
                </div>
                <div class="user-age font-10 color-7f818a">
                  <span>{{ noticeData.memberInfo.memberAge }}岁</span><span class="dot"></span><span>生日 {{ noticeData.memberInfo.birthType == 0 ? '农历' : '阳历' }}{{ noticeData.memberInfo.birthday }}</span>
                </div>
              </div>
            </div>
            <div class="user-info-body">
              <ul class="flex font-10 flex-wrap">
                <li class="flex-1 line-h-16 m-b-10">
                  <span class="font-10 color-303133">会员卡：</span><span class="font-10 color-7f818a">{{ noticeData.memberInfo.memberGradeName }}</span>
                </li>
                <li class="flex-1 line-h-16 m-b-10">
                  <span class="font-10 color-303133">会员身份：</span><span class="font-10 color-7f818a">{{ noticeData.memberInfo.memberType == 1 ? 'pos会员' : '微信会员' }}</span>
                </li>
                <li class="flex-1 line-h-16 m-b-10">
                  <span class="font-10 color-303133">会员卡号：</span><span class="font-10 color-7f818a">{{ noticeData.memberInfo.cardNum }}</span>
                </li>
                <li class="flex-1 line-h-16 m-b-10">
                  <span class="font-10 color-303133">积 分：</span><span class="font-10 color-7f818a">{{ noticeData.memberInfo.accumulatPoints }}</span>
                </li>
                <li class="flex-1 line-h-16 m-b-10">
                  <span class="font-10 color-303133">消费总额：</span><span class="font-10 color-7f818a">{{ noticeData.memberInfo.costFee }}</span>
                </li>
                <li class="flex-1 line-h-16 m-b-10">
                  <span class="font-10 color-303133">消费次数：</span><span class="font-10 color-7f818a">{{ noticeData.memberInfo.costTimes }}</span>
                </li>
              </ul>
            </div>
            <div class="user-clerk">
              <span class="iconfont iconziyuan1 font-10 color-4b69e5"></span><span class="font-10 color-4b69e5 clerk-name">{{ noticeData.memberInfo.clerkName }}</span>
            </div>
          </div>
        </div>
        <!-- 关闭 -->
        <div class="qr-dialog__hd">
          <i class="el-icon-plus" @click.stop="closeDialog"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'detail-preview',
  props: {
    value: {
      type: Boolean,
      default() {
        return false;
      }
    },
    previewData: {
      type: Object,
      default() {
        return {
          title: '',
          taskDescription: '',
          lastTime: '',
          taskStatus: 1,
          executiveClerkId: '',
          bindFlag: 0,
          taskRecordList: [
            /* {
              optTime:'',
              optContent: ''
            } */
          ],
          taskType: 1,
          memberInfo: {
            cardNum: '',
            imgUrl: '',
            memberName: '',
            memberGender: '',
            memberAge: '',
            birthday: '',
            clerkName: '',
            costFee: '',
            memberGradeName: '',
            costTimes: '',
            lastCostFee: '',
            phoneNumber: '',
            openCardTime: '',
            memberType: '0',
            birthType: '',
            accumulatPoints: ''
          }
        };
      }
    }
  },
  directives: {
    htmlContent: {
      // 指令的定义
      bind: function(el, param) {
        el.innerHTML = param.value;
      },
      update: function(el, param) {
        el.innerHTML = param.value;
      }
    }
  },
  data() {
    return {
      noticeData: {
        title: '',
        taskDescription: '',
        lastTime: '',
        taskStatus: 1,
        executiveClerkId: '',
        bindFlag: 0,
        taskRecordList: [
          /* {
              optTime:'',
              optContent: ''
            } */
        ],
        taskType: 1,
        memberInfo: {
          cardNum: '',
          imgUrl: '',
          memberName: '',
          memberGender: '',
          memberAge: '',
          birthday: '',
          clerkName: '',
          costFee: '',
          memberGradeName: '',
          costTimes: '',
          lastCostFee: '',
          phoneNumber: '',
          openCardTime: '',
          memberType: '0',
          birthType: '',
          accumulatPoints: ''
        }
      },
      time: null
    };
  },
  methods: {
    timeStampSpaces(date) {
      if (!date) {
        return;
      }
      let date2 = new Date();
      let date3 = new Date(Number(date)).getTime() - date2.getTime(); //时间差的毫秒数
      console.log(date3);
      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 = {
        title: '',
        taskDescription: '',
        lastTime: '',
        taskStatus: 1,
        executiveClerkId: '',
        bindFlag: 0,
        taskRecordList: [
          /* {
              optTime:'',
              optContent: ''
            } */
        ],
        taskType: 1,
        memberInfo: {
          cardNum: '',
          imgUrl: '',
          memberName: '',
          memberGender: '',
          memberAge: '',
          birthday: '',
          clerkName: '',
          costFee: '',
          memberGradeName: '',
          costTimes: '',
          lastCostFee: '',
          phoneNumber: '',
          openCardTime: '',
          memberType: '0',
          birthType: '',
          accumulatPoints: ''
        }
      };
      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.lastTime);
        }, 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.lastTime);
      }, 60000);
    }
  },
  beforeDestroy() {
    const that = this;
    clearInterval(that.time);
    that.time = null;
  }
};
</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;
}
.color-fd6b6d {
  color: #fd6b6d;
}
.color-ff8ea0 {
  color: #ff8ea0;
}

.color-4b69e5 {
  color: #4b69e5;
}
.color-7f818a {
  color: #7f818a;
}
.line-h-16 {
  line-height: 16px;
}
.p-l-6 {
  padding-left: 6px;
}
.p-l-14 {
  padding-left: 14px;
}
.m-b-10 {
  margin-bottom: 10px;
}
.p-lr-5 {
  padding: 0 5px;
}
.dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #7f818a;
  border-radius: 50%;
  margin: 0 2px;
}
.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-top {
    width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 12px;
    .task-des {
      margin-top: 10px;
      line-height: 20px;
    }
    .task-over {
      margin-top: 18px;
    }
    .task-people {
      margin-top: 20px;
      padding: 12px 15px 0 15px;
      background: rgba(244, 244, 249, 1);
      border-radius: 5px;
      .task-item-cell {
        .task-item-content {
          line-height: 10px;
          .opt-content {
            display: inline-block;
            vertical-align: top;
            width: 266px;
          }
        }
        .task-item-date {
          position: relative;
          height: 25px;
          &.item-border {
            &::before {
              content: '';
              position: absolute;
              left: 5px;
              width: 0px;
              height: 120%;
              top: -4px;
              bottom: 0px;
              border-left: 1px dashed rgba(75, 105, 229, 1);
            }
          }
        }
      }
    }
  }
  .detail-content-bottom {
    position: relative;
    width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    .user-info {
      .user-photo {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        img {
          width: 30px;
          height: 30px;
          border-radius: 15px;
        }
      }
      .user-name-body {
        padding-left: 10px;
      }
      .user-name {
      }
      .user-age {
        margin-top: 5px;
      }
    }
    .font-12 {
      font-size: 12px;
    }
    .user-info-body {
      margin-top: 15px;
      ul {
        li {
          width: 50%;
          min-width: 50%;
          max-width: 50%;
        }
      }
    }
    .user-clerk {
      position: absolute;
      right: 15px;
      top: 16px;
      padding: 2px 5px 5px 3px;
      background: rgba(75, 105, 229, 0.1);
      border-radius: 5px;
      text-align: center;
      .clerk-name {
        padding-left: 3px;
      }
    }
  }
}

.qr-dialog {
  position: fixed;
  z-index: 5000;
  width: 387px;
  height: 792px;
  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;
  // overflow: hidden;
  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;
      /deep/ video {
        width: 100%;
        height: auto;
      }
      /deep/ img {
        width: 100%;
        height: auto;
      }
      /deep/ p {
        iframe {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .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: -85px;
  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>
