<template>
  <div class="msgDialog" v-show="messageVisible" @mouseleave="mouseleaveHandle()">
    <el-button v-show="activeName === 'first'" class="all-read-button" type="text" @click="handleAllRead">全部已读</el-button>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <span slot="label" class="">
          <el-badge :is-dot="noticeList.length > 0" class="notice-point">
            <span>通知</span>
          </el-badge>
        </span>
        <div class="content">
          <el-row v-for="(item, index) in noticeList" :key="index" class="row">
            <el-col :span="4">
              <img :src="getSvg(item.title)" alt />
            </el-col>
            <el-col :span="20">
              <el-row :gutter="10" style="margin-bottom: 10px">
                <el-col :span="14" class="title">
                  <span>{{ item.title }}</span>
                </el-col>
                <el-col :span="10" class="create-time">
                  <span>{{ item.createTime }}</span>
                </el-col>
              </el-row>
              <div class="text">
                <span class="subtitle" v-html="item.text"></span>
                <div v-if="item.meetingInfo !== undefined" class="meeting-card">
                  <p class="meeting-title">{{ item.meetingInfo.meetingTitle }}</p>
                  <p>
                    <span class="meeting-label">会议地点：</span>
                    {{ item.meetingInfo.meetingPlace }}
                  </p>
                  <p>
                    <span class="meeting-label">会议时间：</span>
                    {{ item.meetingInfo.meetingTime }}
                  </p>
                </div>
              </div>
              <div class="source">来源：{{ item.appName }}</div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <!--      <el-tab-pane label='消息分类2' name='second'>消息分类2</el-tab-pane>-->
      <!--      <el-tab-pane label='消息分类3' name='third'>消息分类3</el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    messageVisible: {
      type: Boolean,
      default: false
    },
    messageList: {
      type: Array
    }
  },
  data() {
    return {
      activeName: 'first',
      noticeList: []
    }
  },
  watch: {
    immediate: true,
    deep: true,
    noticeList(val) {
      val.forEach(item => {
        if (item.text.indexOf('\n\n会议主题：') !== -1) {
          const arr = item.text.split('\n\n')
          const meetingInfo = {
            meetingTitle: arr[1].substring(arr[1].indexOf('会议主题：') + 5),
            meetingPlace: arr[2].substring(arr[2].indexOf('会议地点：') + 5),
            meetingTime: arr[3].substring(arr[3].indexOf('会议时间：') + 5)
          }
          item.text = arr[0]
          item.meetingInfo = meetingInfo
        }
      })
    },
    messageList(val) {
      this.noticeList = val
    }
  },
  methods: {
    mouseleaveHandle() {
      this.$emit('update:messageVisible', false)
    },
    getSvg(title) {
      switch (title) {
        case '会议提醒':
          return require('@/assets/images/base/meeting.svg')
        case '换届提醒':
          return require('@/assets/images/base/change-notice.svg')
        case '换届选举':
          return require('@/assets/images/base/change-approval.svg')
        case '任务提醒':
          return require('@/assets/images/base/task-notice.svg')
      }
    },
    handleClick(tab, event) {
      if (tab.index === '0') {
        this.$emit('getMessageDataList')
      }
    },
    handleAllRead() {
      this.$emit('handleAllRead')
    }
  }
}
</script>
<style lang="scss" scoped>
.msgDialog {
  width: 374px;
  height: 600px;
  padding: 20px;
  background-color: #fff;
  right: 16px;
  z-index: 10;
  top: 72px;
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 7px 12px 15px 1px rgba(0, 0, 0, 0.12);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.all-read-button {
  z-index: 1;
  position: absolute;
  top: 15px;
  right: 10px;
  font-size: 14px;
}

.content {
  color: #333333;
  height: 600px;
  overflow-y: auto;
  padding-right: 10px;

  .row {
    margin-top: 10px;
  }

  .row:first-child {
    margin-top: 0;
  }

  .title {
    font-weight: 700;
    font-size: 16px;
  }

  .create-time {
    float: right;
  }

  .text {
    .subtitle {
      color: #999999;
    }

    white-space: pre-wrap;

    .meeting-card {
      padding: 0 20px;
      background-color: #f3f3f3;
      line-height: 20px;

      &:last-child {
        padding-bottom: 1px;
      }

      .meeting-title {
        font-weight: 700;
        color: #333333;
        font-size: 18px;
        padding-top: 10px;
      }

      .meeting-label {
        color: #9e9e9e;
      }
    }
  }

  .source {
    margin-top: 8px;
    padding: 5px;
    line-height: 14px;
    background: #f7f7f7;
    width: fit-content;
    text-align: center;
    white-space: nowrap; /*强制span不换行*/
    text-overflow: ellipsis; /*超出部分以点号代替*/
    overflow: hidden; /*超出宽度部分隐藏*/
  }
}
</style>
