<template>
  <user-dashboard-container page-class="announcements" panel-title="اعلانات">
    <div v-for="item in userAnnouncements" :key="item._id" class="item" :class="!item.seen && 'unread'">
      <el-collapse :key="item._id + 'co_parent'" accordion @change="seeAnnouncement">
        <el-collapse-item :key="item._id + 'co_item'" :name="item._id" >
          <template slot="title">
            <h3>{{ item.title }}</h3>
          </template>
          <div  v-if="!item.image" class="col-12">
              <p>{{ item.caption }}</p>

            </div>
          <div v-if="item.image" class="row">
            <div class="col-md-6 col-sm-12">
              <p>{{ item.caption }}</p>

            </div>
            <div class="col-md-6 col-sm-12">
              <div class="fr-image">
                <img :src="'/uploads/images/announcement/'+item.image" alt="">

              </div>
            </div>
          </div>
          
        </el-collapse-item>
      </el-collapse>
    </div>
    <h3 v-if="!userAnnouncements.length" style="text-align: center; margin-top: 50px">هیچ اعلانی موجود نیست</h3>
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountUserAnnouncements',
  layout: 'user',
  data() {
    return {}
  },
  computed: {
    userAnnouncements() {
      return this.$store.state.front.userAnnouncements
    }
  },
  methods: {
    seeAnnouncement(id) {
      if (!id) return
      const item = this.userAnnouncements.find(item => item._id === id)
      if (!item.seen) this.$userSocket.emit('user:updateAnnouncement', id)
    }
  }
}
</script>
<style lang="scss" scoped>
.fr-image{
  width: 17rem;
  height: 11rem;
  margin: auto;
  img{
    width: 100%;
    height:100%;
    object-fit: cover;
    border-radius: .5rem;
  }
}
</style>
