<template>
  <el-drawer
    class="es-msgs-box"
    custom-class="es-msgs-main"
    direction="rtl"
    size="200px"
    :modal="false"
    :withHeader="false"
    :visible.sync="show"
  >
    <div class="es-msg-header">
      <span class="es-msg-title">消息提示</span>
      <span class="es-overlook" @click="handleIgnoreAll">全部忽略</span>
    </div>
    <div class="es-msg-lists-box">
      <div class="es-msg-lists">
        <el-scrollbar class="es-scrollbar">
          <div v-infinite-scroll="getMsg" :infinite-scroll-disabled="disabled">
            <el-card
              v-for="(item, index) in msgs"
              :key="item.id"
              class="es-msg-item"
            >
              <i
                class="el-icon-circle-close"
                title="忽略"
                @click="handleIgnore(item, index)"
              ></i>
              <div class="es-msg-item-title">{{ item.title }}</div>
              <div>
                <span class="es-msg-item-time">{{ item.time }}</span>
                <span
                  class="es-overlook"
                  v-show="item.handlerUrl"
                  @click="handleMessage(item, index)"
                  >处理</span
                >
              </div>
            </el-card>
            <p class="es-msg-tips" v-if="loading">加载中...</p>
            <p class="es-msg-tips" v-if="noMore && count > 0">没有更多了</p>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="es-msg-total">当前共有{{ count }}条消息记录</div>
    <es-dialog
      title="处理"
      name="manage"
      width="90%"
      height="80%"
      :visible.sync="dialog.show"
      :url="dialog.url"
      :param="dialog.params"
      @close="handleClose"
    ></es-dialog>
  </el-drawer>
</template>
<script>
import {
  sysMsgPage,
  ignoreSysMsg,
  ignoreAllSysMsg
} from 'eoss-ui/src/config/api.js';
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'message',
  provide() {
    return {
      deleteMessage: this.handleRemove
    };
  },
  props: {
    visible: Boolean,
    total: {
      type: Number,
      default: 0
    },
    winopen: Boolean
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    },
    count: {
      get() {
        return this.total;
      },
      set(val) {
        this.$emit('update:total', val);
      }
    },
    noMore() {
      return this.msgs.length >= this.count;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  watch: {
    total(val, old) {
      if (parseInt(val, 10) < parseInt(old, 10) && this.index !== null) {
        this.handleRemove();
      }
    }
  },
  data() {
    return {
      //加载数据
      loading: false,
      //消息页码
      pageNum: 1,
      pageSize: 20,
      pageCount: 1,
      //消息数据,
      msgs: [],
      dialog: {
        params: {},
        url: '',
        show: false
      },
      index: null,
      deleteId: null
    };
  },
  mounted() {
    util.win.deleteMsg = this.handleRemove;
  },
  methods: {
    //获取消息列表
    getMsg(reload) {
      if (this.pageNum <= this.pageCount) {
        this.loading = true;
        util
          .ajax({
            url: sysMsgPage,
            params: {
              pageNum: reload ? 1 : this.pageNum,
              pageSize: this.pageSize
            }
          })
          .then((res) => {
            if (res && res.rCode === 0) {
              this.pageCount = res.results.pageCount;
              this.loading = false;
              if (reload || this.pageNum == 1) {
                this.msgs = JSON.parse(JSON.stringify(res.results.records));
              } else {
                this.msgs = this.msgs.concat(res.results.records);
              }
              this.pageNum++;
            } else {
              let msg = res.msg || '系统错误，请联系管理员！';
              this.$message.error(msg);
            }
          })
          .catch((err) => {
            this.loading = false;
            if (err.message && err.message !== 'canceled') {
              this.$message.error(err.message);
            }
          });
      }
    },
    //忽略
    handleIgnore(res, i) {
      util
        .ajax({
          url: ignoreSysMsg,
          params: {
            id: res.id
          }
        })
        .then((res) => {
          if (res.rCode == 0) {
            this.count -= 1;
            this.msgs.splice(i, 1);
          } else {
            let msg = res.msg || '系统错误，请联系管理员！';
            this.$message.error(msg);
          }
        });
    },
    //全部忽略
    handleIgnoreAll() {
      util
        .ajax({
          url: ignoreAllSysMsg
        })
        .then((res) => {
          this.count = 0;
          this.msgs = [];
          this.$emit('ignore', { type: 'ignore', value: 'all' });
        })
        .catch((err) => {
          if (err.message && err.message !== 'canceled') {
            this.$message.error(err.message);
          }
        });
    },
    //处理消息
    handleMessage(item, index) {
      this.count -= 1;
      this.msgs.splice(index, 1);
      if (this.winopen) {
        const mywin = util.win.open(item.handlerUrl);
        if (mywin) {
          let times = setInterval(() => {
            if (mywin.closed) {
              clearInterval(times);
              this.$parent.$emit('bus-emit', 'waitdone');
            }
          }, 1000);
        }
      } else {
        this.dialog = {
          show: true,
          url: item.handlerUrl,
          data: {
            id: item.id,
            pendingId: item.pendingId,
            userId: item.userId
          }
        };
        this.index = index;
      }
    },
    handleRemove(id) {
      if (this.index !== null) {
        this.count -= 1;
        this.msgs.splice(this.index, 1);
        this.index = null;
      }
      if (id) {
        this.$emit('handle', id);
      }
      this.dialog.show = false;
    },
    handleClose() {
      this.$parent.$emit('bus-emit', 'waitdone');
    }
  }
};
</script>
