<template>
    <div class="bg-img-in" >
        <user-dashboard-container page-class="announcements" panel-title="اعلانات" class="panelx">
      <div v-for="item in userAnnouncements" :key="item._id" class="item" >
        <el-collapse :key="item._id + 'co_parent'" accordion >
          <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>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PublicAnnouncements',
 
    data() {
      return {
        userAnnouncements:''
      }
    },
    mounted(){
      this.$axios.get('/api/public/announcement').then((res)=>{

        this.userAnnouncements = res.data

      })
    }
  }
  </script>
  <style lang="scss" scoped>
  .bg-img-in{
    background: url(@/static/assets/img/home/bg2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-top: groove;
  }
  .panelx{
    margin-top: 20%;
    margin-left: auto;
    margin-right: auto;
    width: 80% !important;
  }
  .fr-image{
    width: 17rem;
    height: 11rem;
    margin: auto;
    img{
      width: 100%;
      height:100%;
      object-fit: cover;
      border-radius: .5rem;
    }
  }
  </style>
  