<template>
    <section v-if="loading==0">
        <div class="container">
            <div class="extra_page">
                <div class="row">
                    <div class="col-lg-3 col-md-4 ">
                        <div class="back_right">
                            <div class="name_ad">
                                <span>مشخصات کارشناس</span>
                                <div class="dashes">
                                    <img src="/uploads/img/dashes_3.png">
                                </div>
                                <img class="margin-bottom-15" style="border-radius: 50%" :src="expert.user.attachments?'/files?uid='+expert.user.attachments.uid+'&width=120&height=120':'/uploads/img/karshenas.png'">
                                <div class="table_2">
                                    <div>
                                        <span>تاریخ عضویت:</span>
                                        <span dir="rtl">{{expert.created_at|persian_date}}</span>
                                    </div>
                                    <div>
                                        <span>استان:</span>
                                        <span>{{state}}</span>
                                    </div>
                                    <div>
                                        <span>شهر:</span>
                                        <span>{{city}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-8 mt-4 mt-md-0 ">
                        <div class="back_left">
                            <div class="part_1">
                                <div class="row">
                                    <div class="col-lg-7">
                                        <div class="text">
                                            <span> کارشناس: {{expert.user.fname}} {{expert.user.lname}} </span>
                                            <strong>گروه های تحت کارشناسی: <small v-for="cat in expert.categories">{{cat.title}} ،</small></strong>
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="buttons">
                                            <a href="javascript:;" @click="assign">درخواست کارشناسی</a>
                                            <a href="javascript:;" v-scroll-to="'#comment'">نظرات</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="dashes">
                                    <img src="/uploads/img/dashes_2.png">
                                </div>

                                <div class="details">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="details_text">
                                                <span>توضیحات:</span>
                                                {{expert.description}}
                                            </div>
                                        </div>
                                        <div class="col-lg-6 d-flex flex-column justify-content-between">
                                            <div class="rating">
                                                <div class="flex-wrapper">
                                                    <div class="single-chart">
                                                        <svg viewBox="0 0 36 36" class="circular-chart">
                                                            <path class="circle-bg"
                                                                  d="M18 2.0845
                                                                  a 15.9155 15.9155 0 0 1 0 31.831
                                                                  a 15.9155 15.9155 0 0 1 0 -31.831"
                                                            />
                                                            <path class="circle"
                                                                  :stroke-dasharray="parseInt(point.point)*10+', 100'"
                                                                  d="M18 2.0845
                                                                  a 15.9155 15.9155 0 0 1 0 31.831
                                                                  a 15.9155 15.9155 0 0 1 0 -31.831"
                                                            />
                                                            <text x="18" y="17.35" class="percentage">
                                                                <tspan class="bold">{{parseInt(point.point)}}</tspan>
                                                                /10
                                                            </text>
                                                            <text x="18" y="22.35" class="percentage text_style">
                                                                امتیاز رضایت مشتریان
                                                            </text>
                                                        </svg>
                                                        <div class="votes">
                                                            <div>
                                                                <span>تعداد آراء ثبت شده:</span>
                                                                <span>{{point.count}} نفر</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="extra_commend" id="comment">
                                <div class="margin-top-45">
                                    <div class="comment_user">
                                        <div class="count">
                                            <span>نظرات ({{comments.length}} مورد)</span>
                                        </div>
                                        <div class="row" v-for="cm in comments">
                                            <div class="col-lg-2">
                                                <div class="user_avatar">
                                                    <img :src="cm.user.attachments?'/files?uid='+cm.user.attachments.uid+'&width=100&height=100':'/uploads/img/karshenas.png'">
                                                    <span>{{cm.user.fname}} {{cm.user.lname}}</span>
                                                </div>
                                            </div>
                                            <div class="col-lg-10">
                                                <div class="comment_details">
                                                    <p>{{cm.comment}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                expert:{},
                loading:4,
                state:null,
                city:null,
                point:{},
                comments:[],
            }

        },
        props:['expert_id','ad_id'],
        beforeMount(){
            axios.get('/expert/single?id='+this.expert_id).then(res=>{
                this.expert=res.data.data
                this.loading--
                axios.get('/advertisement/city?id='+this.expert.user.city_id).then(res2=>{
                    this.state=res2.data.state.title
                    this.city=res2.data.title
                    this.loading--
                })
                axios.post('/expert/get-point',{expert_id:this.expert_id}).then(res=>{
                    this.point=res.data.data
                    this.loading--
                })
                axios.get('/expert/comment/expert?id='+this.expert_id).then(res=>{
                    this.comments=res.data.data
                    this.loading--
                })

            })
        },
        watch:{

        },
        mounted() {

        },
        methods:{
            assign:function () {
                axios.post('/expert/assign',{adv_id:this.ad_id,expert_id:this.expert_id}).then(res=>{
                    if(res.data.status == 400){
                        $.toast({
                            text : 'ظرفیت این کارشناس تکمیل است!',
                            showHideTransition : 'slide',
                            bgColor : '#fa7953',
                            textColor : '#f6f6f6',
                            allowToastClose : false,
                            hideAfter : 5000,
                            stack : 5,
                            loader:false,
                            textAlign : 'right',
                            position : 'top-center'
                        })
                    }else if(res.data.status == 409) {
                        $.toast({
                            text : 'شما قبلا برای این کارشناس درخواست داده اید!',
                            showHideTransition : 'slide',
                            bgColor : '#fa7953',
                            textColor : '#f6f6f6',
                            allowToastClose : false,
                            hideAfter : 5000,
                            stack : 5,
                            loader:false,
                            textAlign : 'right',
                            position : 'top-center'
                        })
                    }else{
                        $.toast({
                            text : 'درخواست شما با موفقیت ثبت شد',
                            showHideTransition : 'slide',
                            bgColor : '#5fc8b0',
                            textColor : '#f6f6f6',
                            allowToastClose : false,
                            hideAfter : 5000,
                            stack : 5,
                            loader:false,
                            textAlign : 'right',
                            position : 'top-center'
                        })
                    }
                })
            }
        },
    }
</script>
