<template>
    <div v-if="loading==0" class="expertList">
        <div class="accordion" id="accordionExample">
            <div class="card" v-for="ex in experts">
                <div class="card-header" :id="'heading'+ex.id">
                    <h5 class="mb-0">
                        <button class="btn btn-link" type="button" data-toggle="collapse" :data-target="'#collapse'+ex.id" aria-expanded="true" :aria-controls="'collapse'+ex.id">
                            <img style="width: 64px;height: 64px;border-radius: 50%" :src="ex.user.attachments?'/files?uid='+ex.user.attachments.uid+'&width=64&height=64':'/uploads/img/karshenas.png'" />
                            <h5>{{ex.user.fname}} {{ex.user.lname}}</h5>
                        </button>
                    </h5>
                </div>

                <div :id="'collapse'+ex.id" class="collapse" :aria-labelledby="'heading'+ex.id" data-parent="#accordionExample">
                    <div class="card-body">
                        <textarea class="form-control" placeholder="نظر" v-model="cm"></textarea>
                        <div class="margin-top-10 text-left">
                            <button @click="submit(ex.id)">ثبت نظر</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                experts:[],
                loading:1,
                cm:'',
            }
        },
        beforeMount(){
            axios.get('/expert/list').then(res=>{
                this.experts=res.data.data
                this.loading--
            })
        },
        methods:{
            submit:function (id) {
                axios.post('expert/comment',{id:id,comment:this.cm}).then(res=>{
                    this.cm=''
                    $.toast({
                        text : 'نظر شما شما با موفقیت ثبت شد',
                        showHideTransition : 'slide',
                        bgColor : '#5fc8b0',
                        textColor : '#f6f6f6',
                        allowToastClose : false,
                        hideAfter : 5000,
                        stack : 5,
                        loader:false,
                        textAlign : 'right',
                        position : 'top-center'
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>