
<!--
  @description: 供应商-桌面-消息通知
  @Modifier：wxy
  @routerPath:/procurement/procurementDesktopSupplier
  @date：  2020-09-01 16:22:13
-->
<template>
  <div class="contentBox">
    <div class="contentt p0-16">
      <p class="title fl">
        <i class="iconfonts iconfont icon-notice" />消息通知
      </p>
      <p class="fr">
        <!-- <i class="iconfonts iconfont icon-shuaxin pointer" @click="refresh" /> -->
        <span class="pointer" @click="toMessage">更多</span>
      </p>
    </div>
    <div class="p0-16 contentb">
      <p v-for="(item,index) in tableData" :key="index" class="pointer clearfix" @click="todetail(item)">
        <!-- <i class="iconfonts iconfont icon-arrow"/> -->
        <el-tooltip class="item" effect="light" :content="item.title" placement="left">
          <span class="fl item-left"> <i v-if="item.viewState=== '00'" class="iconfonts el-icon-caret-right" /> {{ item.title }}</span>
        </el-tooltip>
        <span class="contentbs-time fr">{{ item.createTime }}</span>
      </p>
    </div>
    <procurementDesktopMessageNotificationDialog v-if="dialogData.dialog" :dialog-data="dialogData" :current-id="currentId" />
  </div>
</template>

<script>
import procurementDesktopMessageNotificationDialog from './procurementDesktopMessageNotification-dialog'
/* api接口*/
import { getMailToastList } from '@/api/procurement/commonDesk'
import { commonMxin } from '@/mixins/commonMxin'
export default {
  components: {
    procurementDesktopMessageNotificationDialog
  },
  mixins: [commonMxin],
  data() {
    return {
      // 消息通知数据
      tableData: [

      ],
      dialogData: {
        dialog: false // // false 关闭 true 打开
      },
      paginationData: {
        pageNo: 1,
        pageSize: 7
      },
      // 传递的消息id
      currentId: ''
    }
  },
  created() {
    this.getMailToastList()
  },
  methods: {
    // 获取消息列表
    getMailToastList() {
      getMailToastList(this.paginationData).then(res => {
        if (res.header.ret === '0') {
          this.tableData = [...res.data.records]
          this.tableData.forEach(item => {
            // momentSaveFormat
            item.createTime = this.$Moment(item.createTime).format(this.momentDateTime)
          })
        }
      })
    },
    // 消息详情
    todetail(item) {
      this.dialogData.dialog = true
      item.flag = '01'
      this.currentId = item.id
    },
    // 刷新
    refresh() {
      this.$forceUpdate() // 数据强制刷新
    },
    // 跳转消息中心
    toMessage() {
      this.$router.push({
        path: '/procurement/procurementUserMessageList'
      })
    },
    cloneDialog(val) {
      if (val === false) {
        this.getMailToastList(this.paginationData)
      }
    }
  }
}
</script>

<style lang='less' scoped>
@import '~@assets/style/common/public.less';
.contentBox{
  border-left: 1px solid @cut-off;
  border-right: 1px solid @cut-off;
  border-bottom: 1px solid @cut-off;
  margin-bottom: 14px;
  margin-top: -1px;
  background: #fff;
}
div{
    width: 100%;
    margin: 1px 0;
.contentt{
    border-top: 1px solid @hyacinthine;
    border-bottom: 1px solid @border-gray;
    width: 100%;
    height: 40px;
    margin-bottom: 2px;
    p{
        line-height: 40px;
        .iconfonts{
         color:@hyacinthine;
         margin-right:8px;
    }
    }

}
.contentb{
    width: 100%;
    height: 400px;
    p{
      font-size: 12px;
      border-bottom: 1px dotted @border-gray;
      line-height: 50px;
      position: relative;
        .iconfonts{
         color:@hyacinthine;
         margin-right:8px;
        }
    }
    .item-left{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      height: 50px;
      width: 67%;
      line-height: 50px;
    }
}
.contentbs-time{
    color: @light-font;
    position: absolute;
    right: 0;
    top: 0;
}
}
</style>
