<template>
    <div class="container myFabrika" v-if="loading==0">
        <div class="row margin-top-50 margin-bottom-50">
            <div class="col-lg-3 col-md-4 ">
                <div class="back_right">
                    <div class="name_ad">
                        <span>{{user.fname}} {{user.lname}}</span>
                        <div class="dashes">
                            <img src="/uploads/img/dashes_3.png">
                        </div>
                        <img class="margin-bottom-15" :src="user.attachments?'/files?uid='+user.attachments.uid+'&width=120&height=120':'/uploads/img/karshenas.png'">
                        <ul>
                           <li><a href="javascript:;" @click="()=>tabs='editUser'" :class="tabs=='editUser'?'active':''">ویرایش مشخصات</a> </li>
                           <li><a href="javascript:;" @click="()=>{tabs='chatUser';chatId=null}" :class="tabs=='chatUser'?'active':''">پیام شخصی</a> </li>
                           <li><a href="javascript:;" @click="()=>tabs='favoriteAd'" :class="tabs=='favoriteAd'?'active':''">آگهی های مورد علاقه من</a> </li>
                           <li v-if="user.isExpert"><a href="javascript:;" @click="()=>tabs='editExpert'" :class="tabs=='editExpert'?'active':''">ویرایش مشخصات کارشناس</a> </li>
                           <li v-if="!user.isExpert"><a href="javascript:;" @click="()=>tabs='createExpert'" :class="tabs=='createExpert'?'active':''">ثبت نام کارشناس</a> </li>
                           <li><a href="javascript:;" @click="()=>tabs='createShop'" :class="tabs=='createShop'?'active':''">ساخت فروشگاه</a> </li>
                           <li v-for="(shop,index) in user.shop"><a href="javascript:;" @click="()=>{tabs='editShop'+index;editedShop=shop}" :class="tabs=='editShop'+index?'active':''">ویرایش {{shop.title}}</a> </li>
                           <li v-for="(shop,index) in user.shop" ><a href="javascript:;" @click="()=>{tabs='createShopAd'+index;shopId=shop.id}" :class="tabs=='createShopAd'+index?'active':''">ثبت آگهی برای {{shop.title}}</a> </li>
                           <li><a href="javascript:;" @click="()=>tabs='shopList'" :class="tabs=='shopList'?'active':''">لیست فروشگاه ها</a> </li>
                           <li><a href="javascript:;" @click="()=>tabs='expertComment'" :class="tabs=='expertComment'?'active':''">درخواست های کارشناسی</a> </li>
                           <li><a href="javascript:;" @click="logout">خروج</a> </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-8 mt-4 mt-md-0 ">
                <div class="back_left">
                    <div class="tabs-parent">
                        <div v-if="tabs=='editUser'">
                            <editUser :user="user"></editUser>
                        </div>
                        <div v-if="tabs=='favoriteAd'">
                            <favoriteAds></favoriteAds>
                        </div>
                        <div v-if="tabs=='editExpert'">
                            <editExpert :cat="user.expert.categories" :desc="user.expert.description"></editExpert>
                        </div>
                        <div v-if="tabs=='createExpert'">
                            <createExpert></createExpert>
                        </div>
                        <div v-if="tabs=='createShop'">
                            <createShop></createShop>
                        </div>
                        <div v-for="(shop,index) in user.shop" v-if="tabs=='editShop'+index">
                            <editShop :shop="shop"></editShop>
                        </div>
                        <div v-for="(shop,index) in user.shop" v-if="tabs=='createShopAd'+index">
                            <createShopAd :shop="shop.id"></createShopAd>
                        </div>
                        <div v-if="tabs=='shopList'">
                            <shopsList :shops="user.shop"></shopsList>
                        </div>
                        <div v-if="tabs=='chatUser'">
                            <chatUser></chatUser>
                        </div>
                        <div v-if="tabs=='chat'">
                            <chat :id="chatId"></chat>
                        </div>
                        <div v-if="tabs=='expertComment'">
                            <expert-reqs></expert-reqs>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import editUser from './myFabrika/editUser'
    import favoriteAds from './myFabrika/favoriteAds'
    import editExpert from './myFabrika/editExpert'
    import createExpert from './myFabrika/createExpert'
    import createShop from './myFabrika/createShop'
    import editShop from './myFabrika/editShop'
    import createShopAd from './myFabrika/createShopAd'
    import shopsList from './myFabrika/shopsList'
    import chatUser from './myFabrika/chatList'
    import chat from './myFabrika/chat'
    import expertReqs from './myFabrika/expertReqs'
    export default {
        components: {
            editUser,
            favoriteAds,
            editExpert,
            createExpert,
            createShop,
            editShop,
            createShopAd,
            shopsList,
            chatUser,
            chat,
            expertReqs,
        },
        data() {
            return {
                tabs:'editUser',
                user:{},
                loading:1,
                editedShop:null,
                shopId:null,
                chatId:null
            }

        },
        beforeMount(){
            axios.get('/core/user').then(res=>{
                this.user=res.data.data
                this.loading--
            })
        },
        watch:{
            chatId:function () {
                if(this.chatId){
                    this.tabs = 'chat'
                }
            }
        },
        mounted() {
            this.$on('userChat',data=>{
                this.chatId = data
            });
        },
        methods:{
            logout:function () {
                window.localStorage.setItem('Login',null);
                window.location.replace("/logout");
            }
        },
    }
</script>
