<template>
  <transition name="el-drawer-fade" @after-enter="handleMouse(false)">
    <div
      class="es-simplicity-notice-box"
      :class="{ 'es-in': msgs.length }"
      v-show="msgs.length"
      @mouseover="handleMouse(true)"
      @mouseout="handleMouse(false)"
    >
      <div class="es-simplicity-notice-header">
        <span class="es-notice-title">通知消息</span>
      </div>
      <el-scrollbar
        class="es-simplicity-notice-lists es-simplicity-message-lists"
      >
        <div
          v-for="(item, index) in msgs"
          :key="item.id"
          class="es-simplicity-message-item"
        >
          <div class="es-simplicity-message-item-title">
            {{ item.title }}
          </div>
          <div>
            <span class="es-simplicity-message-item-time">
              {{ item.time }}
            </span>
            <span
              class="es-simplicity-message-handler"
              v-show="item.handlerUrl"
              @click="handleMessage(item, index)"
            >
              处理
            </span>
            <span
              class="es-simplicity-message-overlook"
              @click="handleIgnore(item, index)"
            >
              忽略
            </span>
          </div>
        </div>
      </el-scrollbar>
      <div class="es-notice-footer">
        <span class="es-simplicity-message-overlook" @click="handleIgnoreAll"
          >忽略全部</span
        >
        <span class="es-simplicity-message-handler" @click="afterEnter"
          >我知道了</span
        >
      </div>
      <es-dialog
        title="处理"
        name="manage"
        width="90%"
        height="80%"
        :visible.sync="dialog.show"
        :url="dialog.url"
        :param="dialog.params"
        @close="handleClose"
      ></es-dialog>
    </div>
  </transition>
</template>
<script>
import { ignoreSysMsg, ignoreAllSysMsg } from 'eoss-ui/src/config/api.js';
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'Notice',
  provide() {
    return {
      deleteNotice: this.handleRemove
    };
  },
  props: {
    visible: Boolean,
    winopen: Boolean,
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {},
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(val) {
        this.msgs = val;
      }
    }
  },
  data() {
    return {
      //加载数据
      loading: false,
      //消息数据,
      msgs: [],
      //即时消息
      sysMsg: '',
      dialog: {
        params: {},
        url: '',
        show: false
      },
      index: null
    };
  },
  mounted() {
    const bus = this.bus || this.$root.Bus;
    bus && bus.$on('deleteNotice', this.handleRemove);
  },
  methods: {
    afterEnter() {
      this.$emit('opened');
    },
    handleMouse(flag) {
      this.$emit('opened', flag);
    },
    //忽略
    handleIgnore(res, i) {
      util
        .ajax({
          url: ignoreSysMsg,
          params: {
            id: res.id
          }
        })
        .then((res) => {
          if (res.rCode == 0) {
            this.msgs.splice(i, 1);
          } else {
            let msg = res.msg || '系统错误，请联系管理员！';
            this.$message.error(msg);
          }
        });
    },
    //全部忽略
    handleIgnoreAll() {
      util
        .ajax({
          url: ignoreAllSysMsg
        })
        .then((res) => {
          this.msgs = [];
          this.$emit('ignore', { type: 'ignore', value: 'all' });
          this.$emit('opened', false);
        })
        .catch((err) => {
          if (err.message && err.message !== 'canceled') {
            this.$message.error(err.message);
          }
        });
    },
    //处理消息
    handleMessage(item, index) {
      const openModel = util.getStorage('openModel');
      if (openModel && openModel == 'dialog') {
        let { handlerUrl, title, id, metaData } = item;
        metaData &&
          (title =
            metaData.title ||
            metaData.pendtitle ||
            metaData.meetName ||
            title ||
            '办理');
        const jsonData =
          metaData && metaData.jsonData ? JSON.parse(metaData.jsonData) : {};
        util.busEmit(this, {
          method: 'windowOpen',
          args: {
            url: handlerUrl,
            title: title,
            id: id,
            ...jsonData,
            callback: 'deleteNotice'
          }
        });
        return;
      }
      if (item.urlopenmode === 1 || 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,
          params: {
            id: item.id,
            pendingId: item.pendingId,
            userId: item.userId
          }
        };
        this.index = index;
      }
    },
    handleRemove() {
      if (this.index === null) {
        this.count -= 1;
        this.msgs = this.msgs.splice(this.index, 1);
      }
      this.dialog.show = false;
    },
    handleClose() {
      this.$parent.$emit('bus-emit', 'waitdone');
    },
    destroyed() {
      const bus = this.bus || this.$root.Bus;
      bus.$off('deleteNotice', this.handleRemove);
    }
  }
};
</script>
