<template>
    <div id="main">
        <div class="container">
            <el-col :span="24">
                <div v-for="item in tableList" :key="item.id">
                <div style="width:100%;margin-bottom:15px;padding:10px;background-color: rgba(242, 242, 242, 1);">
                    <el-row style="height:50px;line-height:50px">
                    <div style="float:left">
                        <span v-if="!item.noticeType"></span>
                        <span v-if="item.noticeType == 10">系统</span>
                        <span v-if="item.noticeType == 20">待办</span>
                        <span v-if="item.noticeType == 30">审批</span>
                    </div>
                    <div style="float:right">
                        {{dateFormat(item.noticeTime)}}
                    </div>
                    </el-row>
                    <div class="title">
                    <p style="margin:0">{{item.content}}</p>
                    </div>
                    <div>
                        <p style="color:#cccccc">仓号:{{item.warehouse}}</p>
                        <p style="color:#cccccc">申请人:{{item.applyName}}</p>
                        <p style="color:#cccccc">申请部门:{{item.applyDept}}</p>
                        <p style="color:#cccccc">公司:{{item.orgName}}</p>
                    </div>
                    <div  style="text-align:right">
                        <el-button @click="signReadFn(item.id)">标为已读</el-button>
                    </div>
                </div>
                </div>
                <div class="pagination-container">
                <el-pagination
                    class="right"
                    :current-page.sync="listQuery.pageIndex"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[5,10,15,20]"
                    :total="total"
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    layout="total, sizes, prev, pager, next, jumper"
                ></el-pagination>
                </div>
            </el-col>
        </div>
    </div>
</template>
<script>
import { getUser } from '@/utils/auth'
import { informList,signRead } from '@/api/home'
export default {
  name: 'inform',
  data() {
    return {
      listQuery: {
        pageIndex: 1,
        pageSize: 5
      },
      total: 0,
      tableList: []
    }
  },
  created() {
    this.getinformList()
  },
  mounted() {
    
  },
  methods: {
    getinformList() {
      let data = {
          pageIndex: this.listQuery.pageIndex,
          pageSize: this.listQuery.pageSize,
          condition:JSON.stringify({readStatus:false}),
      }
      informList(data).then(res => {   
        if(res.code == 200){
          this.tableList =  res.data.records
          this.total = res.data.total
        }else{
          this.$message.error(res.msg)
        }
        
      })
    },
    signReadFn(id) {
        signRead(id).then(res => {
            if(res.code == 200){
                this.$message({
                  message: '标记已读状态成功',
                  type: "success"
                })
                this.getinformList()
            }
        })
    },
    sizeChange(v) {
      this.listQuery.pageSize = v;
      this.getinformList(this.listQuery);
    },
    pageChange(v) {
      this.listQuery.pageIndex = v;
      this.getinformList(this.listQuery);
    },
    dateFormat(timedate) {
      if (timedate === null || timedate === undefined) {
        return ''
      } else {
        let arr
        // 首先对日期进行拆解，获得日期字符串
        if (timedate.indexOf('T') > -1) {
          arr = timedate.split('T')
        } else {
          arr = timedate.split(' ')
        }
        var d = arr[0]
        var darr = d.split('-')
        var t = arr[1]
        var tarr = t.split('.000')
        var marr = tarr[0].split(':')
        var dd = parseInt(darr[0]) + '/' + parseInt(darr[1]) + '/' + parseInt(darr[2]) + ' ' + parseInt(marr[0]) + ':' + parseInt(marr[1]) + ':' + parseInt(marr[2])

        const date = new Date(Date.parse(dd))
        date.setTime(date.setHours(date.getHours() + 8))

        var year = date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
        * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
        * */
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        // 拼接
        return (year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds)
        // return (year + '-' + month + '-' + day)
      }
    },
  }

}
</script>
<style scoped>
.chart-container{
  width: 100%;
  height: calc(100vh - 84px);
  padding: 10px;
  overflow-y: scroll;
}
.pagination-container {
  margin-top:10px;
  margin-right:20px;
  text-align: right;
}
.title p:hover {
  color:blue
}
</style>
