<template>
  <div>
    <Modal
        class="modalmessage"
        :mask-closable="true"
        v-model="isShow"
        :styles="styles"
        :footer-hide="true"
        @close="close">
            <p slot="header" class="header">
              <span @click="allRead(sysTitle)">全部已读</span>
            </p>
            <div style="text-align:left;margin-top:5px;padding:0 5px 0 0;">
               <div class="dialog_inner">
                <template v-if="messageUnreadCount">
                  <template v-for="(item,index) in messageList">
                  <div style="margin-bottom: 10px;border-bottom:1px solid #F1F1F1;display:flex;flex-direction:row" :key="index">
                    <Badge status="error" />
                    <span style="cursor: pointer;display:inline-block;margin-bottom:10px" @click="Read(item)">
                      {{item.content}}
                    </span>
                  </div>
                  </template>
                </template>
                <template v-else>
                  <div style="text-align: center">
                    <p style="font-size: 20px;line-height: 200px">无最新消息</p>
                  </div>
                </template>
               </div>
            </div>
    </Modal>
    </div>
</template>

<script>
export default {
  name: 'HMesNotificate',
  props: {
    sysTitle: {
      type: String,
      default: ''
    },
    messageUnreadCount: {
      type: Number,
      default: 0
    },
    messageList: {
      type: Array
    },
    messageShow: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      isShow: false,
      styles: {
        // top: '40px',
        // left: 'auto',
        // right: '0px',
        // width: '350px',
        // position: 'absolute',
        // height: '432px',
        // overflow: 'hidden'
        width: '340px',
        top: '40px',
        left: 'auto',
        right: '10%',
        position: 'absolute',
        height: '476px'
      }

    }
  },
  watch: {
    messageShow(val) {
      this.isShow = val
    }
  },
  methods: {
    close() {
      this.isShow = false
      this.$emit('valhandleClose', this.isShow)
    },
    Read(val) {
      this.$emit('handleRead', val)
    },
    allRead(val) {
      this.$emit('handleAllread', val)
    }

  }

}
</script>

<style lang="less">
.modalmessage {
  .ivu-modal-close i {
    color: #fff !important;
  }
  .header {
    color: #66FB09 !important;
    cursor: pointer;
    font-size: 14px;
  }
  .ivu-modal-header{
    background-color:#87CEEB;
  }
  .ivu-modal-body {
    padding: 16px;
    font-size: 12px;
    line-height: 1.5;
    overflow-y: scroll;
    height: 432px;
  }
}
</style>
