<template>
  <div class="daibanChat">
    <div>
      <div class="m-header">
        <!-- <p>待办通知<span class="right1" @click="letSmall">—</span></p> -->
        <p class="yiwei">
          <!-- <span :class="{islook:isread==0}" @click="readMe(0)">未读</span>
          <span :class="{islook:isread==1}" @click="readMe(1)">已读</span> -->
          <span>全部提醒</span>
          <img src="../../assets/chat/all.png" class="allImg">
          <!-- <el-popover placement="bottom" width="100" trigger="click">
            <span slot="reference" class="allL">全部</span>
          </el-popover> -->
        </p>
      </div>
      <div class="m-body">
        <div v-if="isEmty" class="isEmty"><img src="../../assets/xiaotubiao/zanwuxx.png" alt="">
          <p class="meiyou">暂时没有消息哟~</p>
          <p class="jishizw">及时掌握消息，是提高内部工作效率的必要前提!</p>
        </div>
        <ul v-loading="loading">
          <li v-for="(item,index) in list" @click="goJumpPage(item)">
            <div class="left-m"></div>
            <div class="right-m">
              <p><span>{{item.createUserName}}</span><span class="typeName">【{{item.bulletinTypeName}}】</span><span
                v-if="item.expiredFlag" class="reds">已过期</span>
                <!-- <el-tooltip content="标记已读" placement="top" v-if="item.flag==0">
                  <img src="../../assets/chat/noread.png" class="isRead" @click.stop="readMsg(item)">
                </el-tooltip> -->

                <span class="daibanChat-count">{{index + 1}}</span>

              </p>
              <p class="d-content"><span>{{item.content}}</span><span
                class="d-content-ml">{{item.createTime | reTime}}</span></p>
              <div id="triangle"></div>
            </div>
          </li>
          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" style="text-align:center;">
            <span v-if="!isEmty">{{isLoad}}</span>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import infiniteScroll from 'vue-infinite-scroll'
  Vue.use(infiniteScroll)
  import $ from 'jquery';
  import {getApi, postApi, getMessage} from "../../api/commonApi";
  export default {
    name: 'daibanChat',

    data() {
      return {
        isread: '0',
        list: [],
        isEmty: false,
        loading: false,
        isLoad: '加载中....',
        page: '1',
        busy: false, //是否正在加载过程中
        totalPage: '',
        windowHeight: window.screen.height, //分辨率高度
      }
    },
    created() {
      this.getList()
    },
    mounted() {
    },
    watch: {
      isread() {
        this.page = 1
        this.list = []
        this.getList()
      }
    },
    methods: {
      getList() {
        let that = this;
        that.loading = true
        getApi('/system/noticeInfo/msg/list', {
          userId: localStorage.getItem('userId'), //用户id【必传】
          flag: that.isread, // 0.未读 1.已读【必传】
          bulletinType: '', //类型【可选 字典表type0057 筛选全部时可不传】
          page: that.page
        }, function (data) {
          for (var i = 0; i < data.list.list.length; i++) {
            that.list.push(data.list.list[i])
          }
          that.totalPage = data.list.totalPage
          if (that.list.length == 0) {
            that.isEmty = true
            that.busy = false
          } else {
            that.isEmty = false
            that.busy = false
          }
          that.loading = false
        }, function (data) {

        });

      },
      //缩小窗口
      letSmall() {
        this.$emit('isSmall', true)
      },
      //已读未读
      readMe(index) {
        this.isread = index
      },
      //加载更多
      loadMore() {

        //官方示例中延迟了1秒，防止滚动条滚动时的频繁请求数据
        setTimeout(() => {
          this.page++
          if (this.page > this.totalPage) {

            this.isLoad = '没有更多了....'
          } else {
            this.busy = true;
            this.getList()
          }

          //这里请求接口去拿数据，实际应该是调用一个请求数据的方法

        }, 1500);
      },
      //标记已读
      readMsg(item) {
        let that = this;
        item.flag = 1
        postApi('/system/noticeUser/update', item, function (data) {
          getMessage('标记已读成功', 'success')
          that.isread = 1
          that.getList()
        }, function (data) {
          getMessage(data.msg, 'error')
        });
      },

      /**
       * 跳转index.html里的对应页面
       */
      goJumpPage(item) {

        let that = this;
        // window.resizeTo(70,70);
        window.moveTo(0, that.windowHeight);
        console.log(item);

        let message;
        if (item.operateCode == 0) {
          message = {
            flag: 0,
            url: item.content
          }
        } else if (item.operateCode == 1) {
          message = {
            flag: 1,
            caseId: item.businessId,
            selects: 1,
            select: 0,
            steps: '3',
            caseStatus: item.operateCode,
            childStatus: '2'
          }
        } else if (item.operateCode == 2) { //跳转案件的
          message = {
            flag: 2,
            caseId: item.businessId,
            selects: 1,
            select: 0,
            steps: '3',
            caseStatus: item.operateCode,
            childStatus: '3'
          }
        } else if (item.operateCode == 5) { //跳转案件的指派律师步骤
          message = {
            flag: 3,
            caseId: item.businessId,
            selects: 1,
            select: 0,
            steps: '4',
            caseStatus: '4'
          }
        } else if (item.operateCode == 6) { //跳转个人中心任务页
          message = {
            flag: 6,
            caseStatus: item.operateCode
          }
        } else if (item.operateCode == '3') { //跳转未完成案件列表页
          message = {
            flag: 3,
            selects: 2,
            select: 0,
            isShen: item.operateCode
          }
        } else if (item.operateCode == '7') { //跳转案件的检索报告步骤
          message = {
            flag: 7,
            caseId: item.businessId,
            selects: 1,
            select: 0,
            steps: '3',
            caseStatus: '3.2',
            childStatus: '1'
          }
        } else if (item.operateCode == '3.3') {
          message = {
            flag: '3.3',
            caseId: item.businessId,
            selects: 1,
            select: 0,
            steps: '3',
            caseStatus: item.operateCode,
            childStatus: '3'
          }
        } else if (item.operateCode == '3.4') {
          message = {
            flag: '3.4',
            caseId: item.businessId,
            selects: 1,
            select: 0,
            steps: '3',
            caseStatus: item.operateCode,
            childStatus: '4'
          }
        } else if (item.operateCode == '3.5') {
          message = {
            flag: '3.5',
            caseId: item.businessId,
            selects: 1,
            select: 0,
            steps: '3',
            caseStatus: item.operateCode,
            childStatus: '5'
          }
        }
        getApi("/message/webSocket", {
          userId: localStorage.getItem("userId"),
          type: 8,
          message: message
        }, function (data) {


        }, function (data) {
        });
      },
    }
  }
</script>

<style scoped>
  @import "../wechat/wechat.css";
  @import "../wechat/daibanChat.css";

  .d-content-ml {
    margin-left: 20px;
  }

  .daibanChat-count {
    position: absolute;
    font-size: 40px;
    right: 25px;
    color: #f5f7f7;
  }

  .jishizw {
    font-size: 14px;
    margin-top: 15px;
    opacity: 0.8;
  }

  .daibanChat > div {
    height: 100%;

  }
</style>
<style>

</style>
