<template>
	<div class="notification">
		<el-dropdown>
      <span @click="handleNotification">
        <el-badge class="item el-dropdown-link" :value="calAllMsgCount" :max="99" :hidden="calAllMsgCount == 0">
          <span class="has-unread">
            <i class="el-icon-bell" style="font-size: 16px; color: #ffffff"></i>
          </span>
        </el-badge>
      </span>
			<el-dropdown-menu slot="dropdown" v-if="calAllMsgCount == 0">
				<el-dropdown-item>
					当前无消息
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
    <!-- 列表弹框 -->
    <el-dialog width="80%" title="消息列表" :visible.sync="dialogTableVisible" @close="closeList">
      <div class="content">
        <div class="notice-item" v-for="(item, idx) in diaData" :key="idx" @change="getDiaData">
          <div class="notice-title">
            <div class="notice-sndusr">
              备忘录：<span style="color:#FF0000">[{{ item.nam }}]</span>
            </div>
            <div class="notice-sndtim">
              柜员：<span style="color:#FF0000">[{{ item.ownusr }}]</span>
            </div>
            <div class="notice-ntftxt">
              发送内容：<span style="color:#000000">[{{ item.inftxt }}]</span>
            </div>
          </div>
          <el-badge is-dot>
            <el-button class="notice-button" size="small" type="primary" @click="handleDiaDetail(idx,$event)">
              详情
            </el-button>
          </el-badge>
        </div>
        <div class="notice-item" v-for="(item, idx) in noticeData" :key="idx + 'noticeData'" @change="getData">
          <div class="notice-title">
            <div class="notice-sndusr">
              发送人：<span style="color:#FF0000">[{{ item.sndusr }}]</span>
            </div>
            <div class="notice-sndtim">
              发送时间：<span style="color:#FF0000">[{{ item.sndtim }}]</span>
            </div>
            <div class="notice-ntftxt">
              发送内容：<span style="color:#000000">[{{ item.ntftxt.slice(0,5) + "......"}}]</span>
            </div>
          </div>
          <el-badge is-dot>
            <el-button class="notice-button" size="small" type="primary" @click="handleDetail(idx,$event)">
              详情
            </el-button>
          </el-badge>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="clearNotice">一键已读</el-button>
      </div>
    </el-dialog>
    <!-- 详情弹框 -->
    <el-dialog width="80%" title="消息详情" :visible.sync="dialogDetailVisible" append-to-body @close="closeDetail">
      <div>
          {{curTitle}}
      </div>
    </el-dialog>

    <el-dialog title="交易备忘录详情" :visible.sync="showDiaFlg" @close="closeDetail" center>
      <el-form :model="form" ref="diaInfo" label-suffix="：" :disabled=true>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="业务类型" :label-width="formLabelWidth">
              <c-select style="width: 100%" v-model="form.frmtyp" placeholder="" :isShowKeyAndLabel="true"
                dbCode="BUSTXT" :isCache="false">
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="业务编号" :label-width="formLabelWidth" prop="objref">
              <c-input style="width: 100%" v-model="form.objref" placeholder="">
              </c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="交易码" :label-width="formLabelWidth" prop="frm">
              <c-select style="width: 100%" v-model="form.frm" placeholder="" dbCode="ATPTXT" :isCache="false"
                :isShowKeyAndLabel="true">
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="业务摘要" :label-width="formLabelWidth" prop="ownrefDesc">
              <c-input style="width: 100%" v-model="form.ownrefDesc" placeholder="">
              </c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="提示日期" :label-width="formLabelWidth" prop="dat">
              <el-date-picker type="date" style="width: 100%" v-model="form.dat" value-format="yyyy-MM-dd"
                placeholder="">
              </el-date-picker>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="备忘录原因" :label-width="formLabelWidth" prop="cod">
              <c-select style="width: 100%" v-model="form.cod" placeholder="" dbCode="DIATXT"
                :isShowKeyAndLabel="true" :isCache="false">
              </c-select>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="描述" :label-width="formLabelWidth" prop="nam">
              <c-input style="width: 100%" v-model="form.nam" placeholder="">
              </c-input>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="是否已处理" :label-width="formLabelWidth" prop="donflg">
              <el-radio v-model="form.donflg" label="X">已处理</el-radio>
              <el-radio v-model="form.donflg" label="">未处理</el-radio>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="24">
            <el-form-item label="详细信息" :label-width="formLabelWidth" prop="inftxt">
              <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.inftxt">
              </el-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="客户编号" :label-width="formLabelWidth" prop="ptyextkey" v-if="form.cod == 'RAM'">
              <c-input style="width: 100%" v-model="form.ptyextkey" placeholder="">
              </c-input>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="客户名称" :label-width="formLabelWidth" prop="ptynam" v-if="form.cod == 'RAM'">
              <c-input style="width: 100%" v-model="form.ptynam" placeholder="">
              </c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="付款币种" :label-width="formLabelWidth" prop="paycur" v-if="form.cod == 'RAM'">
              <c-select style="width: 100%" v-model="form.paycur" placeholder="" dbCode="CURTXT"
                :isShowKeyAndLabel="true" :isCache="false">
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="付款金额" :label-width="formLabelWidth" prop="payamt" v-if="form.cod == 'RAM'">
              <c-input type="number" style="width: 100%" v-model="form.payamt" placeholder="">
              </c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="预计核验日期" :label-width="formLabelWidth" prop="prechkdat" v-if="form.cod == 'RAM'">
              <el-date-picker type="date" style="width: 100%" v-model="form.prechkdat" value-format="yyyy-MM-dd"
                placeholder="">
              </el-date-picker>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="经办柜员" :label-width="formLabelWidth">
              <c-input style="width: 100%" v-model="form.ownusr">
              </c-input>
            </el-form-item>
          </c-col>
          <c-col :span="12" v-if="form.cod != 'RAM'">
            <el-form-item label="修改柜员" :label-width="formLabelWidth" prop="usr">
              <c-input style="width: 100%" v-model="form.usr">
              </c-input>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24" v-if="form.cod == 'RAM'">
          <c-col :span="12">
            <el-form-item label="修改柜员" :label-width="formLabelWidth" prop="usr">
              <c-input style="width: 100%" v-model="form.usr">
              </c-input>
            </el-form-item>
          </c-col>
        </c-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <c-button @click="closeDetail">返  回</c-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
import commonFunctions from "~/mixin/commonFunctions.js";
import {
  queryUnRcvMsg,
  queryReadMsg,
  updateReadTim,
  batchUpdateReadTim
} from "~/service/manage/ntf";
import { queryUndealMsg, queryById } from "~/service/manage/dia";
import Dia from "~/page/Statics/Dia/Dbidia/Dia.js";

export default {
  name: "Notification",
  mixins: [commonFunctions],
  data() {
    return {
      dialogTableVisible: false,
      dialogDetailVisible: false,
      curTitle: "",
      notifications: 0,
      diacount: 0,
      noticeData: [],
      allData: [],
      diaData: [],
      // 只获取一次dia数据
      diaflg: false,
      objtyp: '',
      nam: '',
      inftxt: '',
      dat: '',
      form: new Dia().data,
      formLabelWidth: "130px",
      showDiaFlg: false,
    };
  },
  destroyed() {
    clearInterval(this.timer);
  },
  computed: {
    calAllMsgCount() {
      return this.notifications + this.diacount;
    }
  },
  mounted() {
    this.noticeList();
    if(!this.diaflg) {
      this.getDiaData();
    }
    // 实现轮询
    this.timer = setInterval(() => {
      this.getData();
    }, 120000);
  },
  methods: {
    // 通过请求获取消息列表
    noticeList() {
      const loading = this.loading();
      this.getData();
      queryReadMsg({}).then(res => {
        if (res.respCode == SUCCESS) {
          this.noticeData = res.data.list;
        }
      });
      loading.close();
    },
    // 请求实时消息
    getData() {
      queryUnRcvMsg().then(async res => {
        if (res.respCode == SUCCESS) {
          this.notifications = res.data;
          if (res.data > 0) {
            let lastNoticeData = this.noticeData;
            let response = await queryReadMsg({});
            if (response.respCode == SUCCESS) {
              this.noticeData = response.data.list;
            }
            if (this.noticeData.length > lastNoticeData.length) {
              this.dialogTableVisible = true;
            }
            //比较两次通知的结果 inr
            let lastInrList = [];
            lastNoticeData.forEach(item => {
              lastInrList.push(item.inr);
            });
            this.noticeData.forEach(item => {
              if (!lastInrList.includes(item.inr)) {
                this.dialogTableVisible = true;
              }
            });
          }
        }
      });
    },
    // 通过请求获取dia数据
    getDiaData() {
      queryUndealMsg().then((res) => {
        if(res.respCode == SUCCESS) {
          this.diaflg = true
          this.diaData = res.data
          if(this.diaData) {
            this.diacount = this.diaData.length
          }
        }
      })
    },
    // 点击按钮后弹出消息列表
    handleNotification() {
      this.noticeList();
      this.getDiaData();
      if (this.calAllMsgCount !== 0) {
        this.dialogTableVisible = true;
      } else {
        this.dialogTableVisible = false;
      }
    },
    // 点击详情后消息列表更新
    handleDetail(val, e) {
      let params = {
        inr: this.noticeData[val].inr
      };
      const loading = this.loading();
      updateReadTim(params).then(res => {
        if (res.respCode == SUCCESS) {
          this.curTitle = res.data.ntftxt;
        }
      });
      loading.close();
      if (e.target.tagName === "SPAN") {
        this.noticeData.splice(val, 1);
        this.getData();
      }
      this.dialogTableVisible = false;
      this.dialogDetailVisible = true;
    },
    handleDiaDetail(val, e) {
      let params = {
        inr: this.diaData[val].inr
      };
      const loading = this.loading();
      queryById(params).then(res => {
        if (res.respCode == SUCCESS) {
          this.form = res.data
          this.showDiaFlg = true;
        } else {
          this.$message.error(res.respMsg)
        }
      });
      loading.close();
      // this.dialogTableVisible = false;
    },
    // 关闭消息列表
    closeList() {
      this.dialogTableVisible = false;
    },
    // 关闭消息详情
    closeDetail() {
      this.showDiaFlg = false;
      this.dialogDetailVisible = false;
      if (this.calAllMsgCount !== 0) {
        this.dialogTableVisible = true;
      } else {
        this.dialogTableVisible = false;
      }
    },
    // 一键已读
    clearNotice() {
      this.$confirm("备忘录信息不会被清除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 清除操作
        // this.noticeData = [];
        this.dialogTableVisible = false;
        batchUpdateReadTim(this.noticeData).then((res) => {
          if (res.data) {
            this.getData();
            this.$notify.success("成功！");
          } else {
            this.$notify.info(res.respMsg);
          }
        })
      })
    }
  }
};
</script>

<style scoped lang="less">
.item {
  margin-right: 30px;
}
.has-unread {
  position: relative;
  cursor: pointer;
}
.content {
  padding: 12px 12px 0;
  .notice-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px;
    font-size: 12px;
    .notice-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      .notice-sndusr {
        margin-right: 5px;
      }
      .notice-ntftxt {
        margin-right: 5px;
      }
      a {
        color: #4e4e4e;
        text-decoration: none;
        font-size: 12px;
        line-height: 40px;
      }
    }
    .notice-title::before {
      content: "";
      background: rgb(87, 95, 200);
      display: inline-block;
      width: 8px;
      height: 8px;
      position: relative;
      margin-right: 5px;
    }
    .notice-button {
      border: none;
      height: 32px;
      padding: 0px 15px;
      border-radius: 0px;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }
  }
  .notice-item:hover {
    background: rgba(198, 154, 218, 0.3);
  }
}
.notification /deep/ .el-dialog__body {
  height: calc(100% - 110px);
}
</style>