<template>
    <div class="message-container">
        <div class="message-list">
            <div class="message-panel-box" v-for="(item,index) in messageList" :key="index">
                <div class="message-panel-box-left">
                    <p class="message-title">
                        {{item.title}}
                    </p>
                    <p class="message-content">
                        {{item.content}}
                    </p>
                </div>
                <div class="message-panel-box-right">
                    <span>{{item.createDate}}</span>
                </div>
            </div>
        </div>
        <div class="btn-plus" @click="handleAddMessage"> <span>+</span> </div>
    </div>
</template>

<script>
  import {getMessageByClerkId} from '@/utils/utils.Request.aApi'

  export default {
    name: 'index',
    data() {
      return {
        // clerkId: '2003160512400400000',
        clerkId: '',
        messageList: []
      }
    },
    mounted() {
      this.clerkId = sessionStorage.getItem('userId')
      this.handleGetMessageByClerkId()
    },
    methods: {
      handleGetMessageByClerkId() {
        let _this = this
        let requestRarams = {clerkId: _this.clerkId}
        alert(JSON.stringify(requestRarams))
        getMessageByClerkId(requestRarams)
          .then(res => {
            if (res.result == 'success') {
              _this.messageList = res.data
            } else {
              _this.messageList = []
              _this.$toast(res.errorMsg);
            }
          })
          .catch(err => {

          })
      },
      handleAddMessage(){
        this.$router.push('/addMessage')
      }
    }
  }
</script>

<style scoped lang="scss">
.message-container{
    height: 100%;
    padding: 20px 10px 20px 20px;
    .message-panel-box{
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0 ;
        .message-panel-box-left{
            width: calc(100% - 135px);
            .message-title,.message-content{
                width: 100%;
                overflow: hidden;
            }
            .message-title{
                font-size: 16px;
                font-weight: 500;
                color: black;
                line-height: 30px;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .message-content{
                font-size: 12px;
                color: #2d2a2a;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        }
        .message-panel-box-right{
            color: #ccc;
        }
        &:not(last-child){
            border-bottom: 1px solid #f3eaea;
        }
    }
    .btn-plus{
        position: fixed;
        right: 30px;
        bottom: 30px;
        font-size: 40px;
        font-weight: bold;
        width: 50px;
        height: 50px;
        border: 2px solid #ccc;
        border-radius: 50%;
        text-align: center;
        color: green;
        line-height: 1;
    }
}
</style>