<template>
    <div class = "noticeList">
        <ul>
            <li class = "item" >
              <div class = "title">[속보] 히나미자와 대 화산폭발사건에 관한 진상규명위원회 편찬중</div>
              <div class = "noticeInfo">
                <span class = "site">소노자키 일보</span>
                <span class = "date">쇼와 69년 7월</span>
              </div>
            </li>
            <li class = "item" >
              <div class = "title">[광고] 구합니다.</div>
              <div class = "noticeInfo">
                <span class = "site">선입금은</span>
                <span class = "date">언제나 환영</span>
              </div>
            </li>
          <li class = "item" v-for="notice in noticeList" :key="notice.date">
            <a v-bind:href="notice.link"><div class = "title">{{notice.title}}</div></a>
              <div class = "noticeInfo">
                <span class = "site">{{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:5px;
  }
  .item{
    background: white;
    height: 50px;
    display: flex;
    position: relative;
    padding: 15px;
    width: 800px;
    border-radius:5px;
  }
  .noticeInfo{
    position: absolute;
    bottom:15px;
  }
  .date{
    color: grey;
  }
</style>