<!--
 * @Description: 催办通知
 * @Author: Hrc
 * @Date: 2022-01-24 16:20:47
-->
<template>
  <transition name="slide-in">
    <div v-if="visiable" class="urge-notification" :style="{height:JSON.parse(latestMsg).msgType == 'notice'?'190px':'166px'}">
      <div class="header" v-if="JSON.parse(latestMsg).msgType != 'notice'"><span>{{currentMsg.msgType == 'URGE_TASK' ? "任务催办" : currentMsg.msgType == 'URGE_CAR' ? '车辆催办' : currentMsg.msgType == 'URGE_SEAL' ? '印章催办' :JSON.parse(latestMsg).msgType=='URGE_CLOCK_NOTICE'?'打卡提醒' : '催办消息'}}</span></div>
      <div class="body" :style="{'margin-top':JSON.parse(latestMsg).msgType == 'notice'?'0px':'10px'}">
        <template v-if="JSON.parse(latestMsg).msgType == 'notice'">
          <p class="notice_title">{{JSON.parse(latestMsg).title}}</p>
          <p class="notice_content">{{processText(JSON.parse(latestMsg).content)}}</p>
        </template>
        <template v-else>
        <p v-if="JSON.parse(latestMsg).msgType=='URGE_CLOCK_NOTICE'"  class="title" style="margin-bottom: 10px;color: #3498DB;" >{{ JSON.parse(latestMsg).content }}</p>
        <p class="title" :style="JSON.parse(latestMsg).msgType=='URGE_CLOCK_NOTICE'?'color: #666666;':''">{{ currentMsg.applyUserName }}{{currentMsg.msgType == 'URGE_TASK' ? "发起任务催办请求" : currentMsg.msgType == 'URGE_CAR' ? '发起的车辆催办请求' : currentMsg.msgType == 'URGE_SEAL' ? '发起的印章催办请求' : JSON.parse(latestMsg).msgType=='URGE_CLOCK_NOTICE'?`${JSON.parse(latestMsg).clockType} : ${JSON.parse(latestMsg).clockTime}` :  '发起的审批催办请求'}}</p>
        <div :style="JSON.parse(latestMsg).msgType=='URGE_CLOCK_NOTICE'?'height: 27px;':''"  class="business-info">
          <span :style="JSON.parse(latestMsg).msgType=='URGE_CLOCK_NOTICE'?'color: #666666;':''">{{currentMsg.msgType == 'URGE_TASK' ? "任务名称：" : JSON.parse(latestMsg).msgType=='URGE_CLOCK_NOTICE'?` ${JSON.parse(latestMsg).companyName}` : "业务名称：" }}</span>
          <a href="javascript: void(0)" @click="toDetail">
            {{ currentMsg.businessName }}
          </a>
        </div>
      </template>
      </div>
      <div v-if="JSON.parse(latestMsg).msgType=='URGE_CLOCK_NOTICE'"  style="height: 29px; justify-content: end;" class="footer">
        <el-button  class="check-btn" type="primary" @click="closeNotice">我知道了</el-button>
      </div>
      <div v-else class="footer" :style="{justifyContent:(JSON.parse(latestMsg).msgType=='notice')?'flex-end':'space-between'}">
        <template v-if="JSON.parse(latestMsg).msgType=='notice'">
          <el-button v-if="JSON.parse(latestMsg).isCancel==1" @click="closeNotice">取消</el-button>
          <el-button class="check-btn" type="primary" @click="gotoNticeDetails">查看详情</el-button>
        </template>
        <template v-else>
        <el-button @click="ignore">忽略</el-button>
        <el-button class="check-btn" type="primary" @click="checkMsg">查看消息</el-button>
      </template>
      </div>
    </div>
  </transition>
</template>
<script>
import { parseJsonBy } from "@/utils/notice.js"
import imApi from "@/api/ImApi";
import store from "@/store/index.js";
import expMix from "@/mixins/imExpired.js"
import { Jump_home } from "@/nim/utils/imUtils";
export default {
  name: "UrgeNotification",
  mixins: [expMix],
  data() {
    return {
      urgeNotifyMsg: [],  // 催办列表
      latestMsg: null, // 最新催办通知
      visiable: false, // 是否显示
      NoticeDetails:{}
    }
  },
  computed: {
    currentMsg() {
      return this.latestMsg && parseJsonBy(this.latestMsg.text) || {}
    }
  },
  watch: {
    urgeNotifyMsg() {
      if (!this.urgeNotifyMsg.length) {
        this.closeNotice()
      }
    }
  },
  methods: {
    repeat(item) {
      return this.urgeNotifyMsg.find(ele => ele.ding_id == item.ding_id)
    },
    addNoticationDatas(data) {
      let _data = data
      if(data.hasOwnProperty('sender') && data.sender == 'IM_SYSTEM_ACCOUNT_QIGUAN'){
        this.NoticeDetails = data
        _data = data.text
      }
      if (!this.repeat(_data)) {
        this.urgeNotifyMsg.push(_data)
        this.latestMsg = _data
      }
    },
    processText(html) {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = html;
      const images = tempDiv.querySelectorAll('img');
      images.forEach(img => {
          const textNode = document.createTextNode('');
          img.parentNode.replaceChild(textNode, img);
      });
      return tempDiv.innerText.replace(/<div>|<\/div>/g, '').replace(/<br>/g, '\n').trim();
    },
    gotoNticeDetails(){
      this.closeNotice()
      let obj = {
        sequenceId :this.NoticeDetails.sequenceId,
        type:this.NoticeDetails.msgType,
        timelineId:this.NoticeDetails.timelineId,
        sender:this.NoticeDetails.sender,
        text:this.NoticeDetails.text,
        notice:true
      }
      Jump_home()
      store.commit('zjkjIm/jump_Chat',obj)
    },
    toDetail() {
      if (this.exp_entpIsDeregister(this.getQueryParams())) {
        this.ignore()
        return
      }
      this.checkMsg()
      store.commit("SET_OPEN_CHAT", this.latestMsg)
      store.commit("SET_OPEN_APPROVAL", {
        approver_type: this.currentMsg.applyType,
        _id: this.currentMsg.processId,
        objId: this.currentMsg.objId,
        companyId: this.currentMsg.companyNo,
        isApprove: this.currentMsg.msgType !== "URGE_TASK"  // 任务催办 不需要审批
      })
    },
    updateLatestMsg() {
      this.urgeNotifyMsg.pop()
      if (this.urgeNotifyMsg.length) {
        this.latestMsg = this.urgeNotifyMsg.slice(-1)[0]
      }
    },
    updateStatus() {
      return imApi.checkUrge({
        toUserId: store.state.loginUserInfo.imAccount,
        seqId: this.latestMsg.ding_id
      })
    },
    ignore() {
      this.updateStatus().then(resp => {
        if (resp.code === 200) {
          this.updateLatestMsg()
        }
      })
    },
	  // 判断当前设备
    isDevice() {
      const flag = navigator.userAgent.match(/(qgb|Electron)/i)
      return flag;
    },
    checkMsg() {
      if (this.isDevice()) {
        window.ipcRenderer && window.ipcRenderer.send("setHideTwinkle", { totalUnReadNum: 0, unReadMsgList: [] })
      } else {
        Jump_home()
        if (this.exp_entpIsDeregister(this.getQueryParams())) {
          this.ignore()
          return
        }
        this.updateStatus().then(resp => {
          if (resp.code === 200) {
            store.commit("SET_OPEN_CHAT", this.latestMsg)
            this.updateLatestMsg()
          }
        })
      }
    },
    openNotice() {
      this.visiable = true
    },
    closeNotice() {
      this.visiable = false;
      
    },
    // 验证企业的参数
    getQueryParams() {
      return {
        sequenceId: this.latestMsg.sequenceId,
        timelineId: this.latestMsg.timelineId,
        comNo: this.currentMsg.companyNo,
        cancellationState: this.currentMsg.cancellationState
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.urge-notification {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 2000;
  width: 300px;
  height: 166px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0px 1px 8px 2px #d8d8d8;
  border-radius: 4px;
  background: #ffffff;
  padding: 12px 15px;
  .header {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
  }
  .body {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333;
    margin-top: 12px;
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0;
    }
    .business-info {
      margin-top: 6px;
      height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .business-info > a {
      color: #0286DF;
      text-decoration: none;
      user-select: none;
      cursor: pointer;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 53px;
    box-sizing: border-box;
    .el-button {
      padding: 0 15px;
      border-radius: 4px;
      font-size: 14px;
      height: 30px;
      line-height: 30px;
    }
    .check-btn {
      background-color: #0286DF;
    }
  }
}
.slide-in-enter-active {
  transition: all .4s ease;
}
.slide-in-leave-active {
  transition: all .4s ease;
}
.slide-in-enter, .slide-in-leave-to  {
  transform: translateX(50%);
  opacity: 0;
}
.notice_title{
    height: auto !important;
    font-weight: 700;
    font-size: 14px;
    display: -webkit-box;          
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;       
    overflow: hidden;             
    text-overflow: ellipsis;     
    word-break: break-all;    
    color: #000000;   
    font-family: 'MicrosoftYaHei'; 
}
.notice_content{
    height: auto !important;
    display: -webkit-box;          
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 4 !important;        
    overflow: hidden;             
    text-overflow: ellipsis;      
    word-break: break-all;
    margin-top: 5px !important;   
    min-height: 80px;     
    color: #333333;
    font-size: 14px;
    font-family: 'MicrosoftYaHei';
}
</style>
