<template>
  <transition name="el-drawer-fade" @after-enter="handleMouse(false)">
    <div
      class="es-notice-box"
      v-show="data.length"
      @mouseover="handleMouse(true)"
      @mouseout="handleMouse(false)"
    >
      <div class="es-msgs-box" :class="{ 'es-in': data.length }">
        <div class="es-msg-header">
          <span class="es-notice-title">通知消息</span>
        </div>
        <div class="es-msg-lists-box">
          <div class="es-msg-lists">
            <el-scrollbar class="es-scrollbar">
              <el-card
                v-for="(item, index) in data"
                :key="item.id"
                class="es-msg-item"
              >
                <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>
            </el-scrollbar>
          </div>
        </div>
        <div
          class="es-notice-footer"
          style="display: flex; justify-content: space-between"
        >
          <span @click="handleIgnoreAll">忽略全部</span
          ><span @click="afterEnter">我知道了</span>
        </div>
      </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 { 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: {},
  data() {
    return {
      //加载数据
      loading: false,
      //消息页码
      pageNum: 1,
      //消息数据,
      msgs: [],
      //即时消息
      sysMsg: '',
      dialog: {
        params: {},
        url: '',
        show: false
      },
      index: null
    };
  },
  methods: {
    afterEnter() {
      this.$emit('opened');
    },
    handleMouse(flag) {
      this.$emit('opened', flag);
    },
    //全部忽略
    handleIgnoreAll() {
      util
        .ajax({
          url: ignoreAllSysMsg
        })
        .then((res) => {
          this.count = 0;
          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) {
      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');
    }
  }
};
</script>
