<template>
  <div class="chart-container">
    <div style="border-bottom: 1px solid #d8dce5;margin-bottom:10px">
      <p style="margin:5px 0">公告</p>
    </div>
    <el-col :span="20">
        <div v-for="item in allList" :key="item.title">
          <div style="width:100%;border:1px solid #333333;margin-bottom:15px;padding:10px" @click="detailClickFn(item.id)">
            <el-row style="height:50px;line-height:50px">
              <div style="float:left">
                {{dateFormat(item.publishTime)}}
              </div>
              <div style="float:right;width:80px;height:30px;line-height:30px;text-align:center;">
                <div v-if="item.readStatus" style="background:green;color:#ffffff">已读</div>
                <div v-if="!item.readStatus" style="background:#d8dce5">未读</div>
              </div>
            </el-row>
            <div class="title">
              <p style="margin:0">{{item.title}}</p>
            </div>
            <div>
              <p>{{removeTAG(item.content)}}</p>
            </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>
    <el-col :span="4" style="padding: 0 10px">
      <div>
        <p>创建公告</p>
      </div>
      <div style="height:50px;width:100%;background-color:#cccccc;" @click="addNotice">
        <p style="line-height:50px;text-align:center">新建+</p>
      </div>
    </el-col>
  </div>
</template>
<script>
import { getUser } from '@/utils/auth'
import { noticeList,noticeDetail } from '@/api/home'
export default {
  name: 'Notice',
  data() {
    return {
      activeName: 'first',
      listQuery: {
        pageIndex: 1,
        pageSize: 5
      },
      total: 0,
      allList: []
    }
  },
  created() {
    this.getNoticeList()
  },
  mounted() {
    
  },
  methods: {
    getNoticeList() {
      let data = this.listQuery
      noticeList(data).then(res => {   
        if(res.code == 200){
          this.allList =  res.data.records
          this.total = res.data.total
        }else{
          this.$message.error(res.msg)
        }
        
      })
    },
    sizeChange(v) {
      this.listQuery.pageSize = v;
      this.getNoticeList(this.listQuery);
    },
    pageChange(v) {
      this.listQuery.pageIndex = v;
      this.getNoticeList(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)
      }
    },
    removeTAG(str){
      return str.replace(/<[^>]+>/g, "");
    },
    detailClickFn(id) {
      this.$router.push({ path: '/notice/noticeDetail',query: {id: id} })
    },
    addNotice() {
      if(JSON.parse(getUser()).depotId == '1'){
        this.$router.push({ path: "/notice/addnotice",query: { state: 'add',orgType: '1' } })
      }else{
        this.$router.push({ path: "/notice/addnotice",query: { state: 'add',orgType: '2' } })
      }
    }
  }

}
</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>
