<template>
    <div class = "noticeList">
        <ul>
          <li class = "item" v-for="notice in noticeList" :key="notice.date">
            <a v-bind:href="notice.link" target="_blank"><div class = "title">{{notice.title}}</div></a>
              <div class = "noticeInfo">
                <span class = "site khu" v-if="notice.site == '경희대학교 공지사항'">경희대</span>
                <span class = "site sw" v-else-if="notice.site == '소프트웨어 융합대학 공지사항'">SW융합</span>
                <span class = "site janghak" v-else-if="notice.site == '경희대학교 장학센터'">장학센터</span>
                <span class = "date">{{notice.date}}</span>
              </div>
          </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  el: '.noticeList',
  data () {
    return {
      noticeList: []
    }
  },
  components: {
  },
  created () {
    this.fetchNoticeList()
  },
  methods: {
    fetchNoticeList () {
      axios
        .post('/api/fetchNoticeList', {})
        .then((noticeList) => {
          console.log(noticeList.data)
          this.noticeList = noticeList.data
        })
    }
  }
}
</script>

<style>
  .imfoList{
    width: 800px;
    background: grey;
  }
  ul{
    display: flex;
    flex-direction: column;
    margin: 0 auto 10px auto;
  }
  li{
    margin-bottom:2px;
  }
  .item{
    background: white;
    height: 32px;
    display: flex;
    position: relative;
    padding: 6px 15px 18px;
    width: 700px;
    border-radius:5px;
  }
  .title{
    font-size:15px;
  }
  a{
    color: #34495e;

  }
  a:visited{
    color: grey;
  }
  .noticeInfo{
    position: absolute;
    bottom:12px;
    font-size:12px;
  }
  .date{
    color: grey;
  }
  .site{
    color: white;
    font-size:10px;
    padding: 2px 10px;
  }
  .khu{
    background-color: #C0392B;
  }
  .sw{
    background-color: #3498DB;
  }
  .janghak{
    background-color: #632300;
  }
</style>