<template>
  <div title="消息" @click="showMessageLayer" style="height: 18px"
       :class="unreadCount > 0 ? 'twinkle' : ''">
    <el-badge :hidden="unreadCount <= 0" :value="unreadCount" :max="99" type="danger">
      <el-icon>
        <Message/>
      </el-icon>
    </el-badge>
  </div>
  <div v-if="messageLayerVisible" class="message-layer">
    <div style="position: absolute; top: 8px; left: 520px">
      <el-button circle type="info" plain icon="Close" @click="messageLayerVisible = false"></el-button>
    </div>
    <div class="sender">
      <div v-for="(item, index) in allSenders" :key="index" :style="activated(item.sender)"
           @click="handleClickSender(item)">
        <el-badge :value="item.unreadCount" :max="99" type="danger" :hidden="item.unreadCount <= 0">
          <div class="sender-info">{{ item.senderName }}</div>
        </el-badge>
      </div>
    </div>
    <div class="content">
      <p v-show="currentSender.senderName">{{ currentSender.senderName }}</p>
      <div style="height: 400px; overflow-y: auto">
        <div v-for="(itm, index) in allMessages" :key="index" class="message-body" :style="borderColor(itm.status)">
          <div class="content-title-box" :style="readStatus(itm.status)">
            <div class="content-title">
              {{ itm.title }}
            </div>
            <div class="content-time">{{ itm.sendDatetime }}</div>
          </div>
          <div class="content-box" v-html="itm.content"></div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
      title="重要系统通知"
      v-model="systemMessages.show"
      :append-to-body="true"
      :destroy-on-close="true"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
  >
    <div class="system-message-time">{{ systemMessages.list[systemMessages.current].sendDatetime }}</div>
    <div class="system-message-content">{{ systemMessages.list[systemMessages.current].content }}</div>
    <div class="system-message-footer">
      <el-button type="primary" icon="ArrowLeft" :disabled="systemMessages.current === 0" circle title="上一条"
                 @click="messageIndexIncrease(-1)"></el-button>
      <span class="system-message-count">{{ systemMessages.current + 1 }} / {{ systemMessages.list.length }}</span>
      <el-button
          type="primary"
          icon="Arrow-right"
          :disabled="systemMessages.current === systemMessages.list.length - 1"
          circle
          title="下一条"
          @click="messageIndexIncrease(1)"
      ></el-button>
    </div>
    <div style="width: 100%; text-align: right; margin-top: -30px">
      <el-button icon="Close" type="danger" :disabled="systemMessages.current !== systemMessages.list.length - 1"
                 @click="systemMessages.show = false">关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {computed, defineComponent, onMounted, ref, reactive} from 'vue'
import {onPageRefresh, fetchAllSenders, fetchAllMessages} from '../../../api/messages'
import store from '../../../store'
import {clone} from '../../../utils/clone'

export default defineComponent({
  name: 'message',
  setup() {
    const unreadCount = computed(() => {
      return store.state.app.unreadMessageCount
    })
    const systemMessages = reactive({
      show: false,
      list: [],
      current: 0,
    })
    const messageIndexIncrease = (val) => {
      systemMessages.current += val
      if (val === 1) {
        if (pushedMessageIds.value.indexOf(systemMessages.list[systemMessages.current].id) === -1) {
          store.commit('app/setSystemMessages', systemMessages.list[systemMessages.current].id)
        }
      }
    }
    const pushedMessageIds = ref([])

    const currentSender = ref({})
    const activated = (sender) => {
      return {
        background: currentSender.value.sender === sender ? '#0b85ff' : '',
        color: currentSender.value.sender === sender ? 'white' : '',
        fontWeight: currentSender.value.sender === sender ? 'bold' : '',
        borderRadius: '4px',
      }
    }
    const readStatus = (status) => {
      return {
        background: status === 0 ? 'rgba(233, 158, 158, 0.548)' : 'rgba(198, 231, 148, 0.452)',
      }
    }
    const borderColor = (status) => {
      return {
        borderColor: status === 0 ? 'red' : 'green',
      }
    }

    const allSenders = ref([])
    const allMessages = ref([])
    const messageLayerVisible = ref(false)
    const showMessageLayer = () => {
      if (!messageLayerVisible.value) {
        fetchAllSenders().then((res) => {
          allSenders.value = res
          messageLayerVisible.value = true
          handleClickSender(res[0])
        })
      } else {
        messageLayerVisible.value = false
      }
    }

    const handleClickSender = (messageIndex) => {
      currentSender.value = messageIndex
      fetchAllMessages(messageIndex.sender).then((res) => {
        allMessages.value = res
        let newCount = store.state.app.unreadMessageCount - messageIndex.unreadCount
        store.commit('app/setUnreadMessageCount', newCount)
        messageIndex.unreadCount = 0
      })
    }

    onMounted(() => {
      pushedMessageIds.value = clone(store.state.app.systemMessages)
      onPageRefresh(pushedMessageIds.value).then((res) => {
        store.commit('app/setUnreadMessageCount', res.unreadCount)
        if (res.systemMessage.length > 0) {
          systemMessages.list = res.systemMessage
          systemMessages.current = 0
          systemMessages.show = true
          if (pushedMessageIds.value.indexOf(systemMessages.list[0].id) === -1) {
            pushedMessageIds.value.push(systemMessages.list[0].id)
            store.commit('app/setSystemMessages', systemMessages.list[0].id)
          }
        }
      })
    })

    return {
      allSenders,
      allMessages,
      unreadCount,
      currentSender,
      systemMessages,
      messageLayerVisible,
      activated,
      readStatus,
      borderColor,
      messageIndexIncrease,
      showMessageLayer,
      handleClickSender,
    }
  },
})
</script>

<style lang="scss" scoped>

@keyframes fade {
  from {
    opacity: 1.0;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1.0;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1.0;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1.0;
  }
}

.twinkle {
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
}

i {
  font-size: 18px !important;
  cursor: pointer;
  font-size: 18px;

  &:focus {
    outline: none;
  }
}

.message-layer {
  display: flex;
  position: absolute;
  top: 60px;
  right: 100px;
  width: 560px;
  height: 460px;
  border: 1px solid gray;
  box-shadow: 2px 3px 10px 1px gray;
  background: white;
  z-index: 1000;

  .sender {
    width: 160px;
    border-right: 1px solid lightgray;

    > div {
      height: 32px;
      line-height: 32px;
      padding: 0 8px;
      margin: 8px;
      border: 1px solid lightgray;

      &:hover {
        cursor: pointer;
        background: #409eff;
        color: white;
        font-weight: bold;
      }
    }
  }

  .content {
    width: 400px;
    padding: 8px;

    > p {
      margin-top: 8px;
      font-size: 15px;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    > div {
      margin-bottom: 16px;
      border-radius: 4px;
      border: 2px solid rgb(53, 131, 221);
    }
  }
}

.sender-info {
  width: 106px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.message-body {
  margin: 8px;
  border: 1px dashed;
  border-radius: 4px;
}

.content-title-box {
  display: flex;
  height: 26px;
  line-height: 26px;
  padding: 0 4px;
  font-weight: bold;
  border-bottom: 1px dashed lightgray;
}

.content-title {
  width: 260px;
  padding-right: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.content-time {
  font-size: 12px;
  width: 130px;
}

.content-box {
  padding: 4px;
  margin-bottom: 12px;
  background: rgb(248, 247, 247);
}

.system-message-time {
  font-size: 13px;
  color: gray;
}

.system-message-content {
  margin-top: 16px;
  font-size: 16px;
  font-weight: bold;
}

.system-message-footer {
  margin-top: 20px;
  width: 100%;
  text-align: center;

  > span {
    font-size: 12px;
    color: gray;
    margin: 0 8px;
  }
}
</style>
