Vue.component('object-row', {
  props: {
    id: {},
    pagetitle: {
      type: String,
      required: true
    },
    totalarea: {
      type: String,
      required: true
    },
    uri: {
      /*type: String,
      required: true*/
    },
    rooms: {
      type: String,
      required: true
    },
    raion: {
        required: true
    },
    street: {
        type: String
    },
    dom: {
        type: String
    },
    allraion: {
        type:Object,
        required: true
    },
    floor: {
        type: String,
        required: true
    },
    floors: {
        type: String,
         required: true
    },
    description:
    {
      required: true
    },
    createdon: {
      type: String,
      required: true
    },
    image:{
        type: Array
    },
    cost: {
      type: String,
      required: true
    },
    contact_name: {
      type: String,
      required: true
    },
      friends: {
        type: Number,
        required: true
    }
  },
  template:
        '<li class="accordion_item">'+
         '<div class="share" >'+
            '<get-phone :id="id" :contact_name="contact_name"></get-phone>'+
         '</div>'+
         '<share :uri="uri"></share></div></div>'+
         ' <div class="collapsible-header title_block">'+
            '<div class="object flex" >'+
                    '<div class="pre-icon">'+
                        '<div class="preimg">'+
                            '<span><img :src="getcover"></span>'+
                            '<div v-if="friendsShow" class="friend-icon"></div>'+
                            '<div class="lot">{{ id }}</div>'+
                            '<div class="date">{{ date_c }} </div>'+
                        '</div>'+
                        '<i class="material-icons togle-close" >&#xE5CD;</i>'+
                    '</div>'+
                    '<div class="pre-description ">'+
                        '<div class="title">{{ pagetitle }}</div>'+
                        '<div class="price-sq flex"><div class="sq">'+
                            '{{ cost_b }} р., '+
                            '<span>{{ totalarea }} м<sup>2</sup></span></div> <span>'+
                            '{{ getRaionName(raion) }}</span></div></div></div>'+
         '</div>'+
         ' <div class="collapsible-body info">'+
                '<div class="load-content" >'+
                '<div class="big-prew">'+
                    '<div class="tabs_block">'+
                        '<ul class="tabs">'+
                            '<li class="active pict icon-prew"></li>'+
                            '<li  class="ping icon-prew"></li>'+
                        '</ul>'+
                            '<div class="boxs visible">'+
                                '<div class="slidgallery">'+
                                    '<div class="gallery-container">'+
                                        '<div class="gals">'+
                                            '<ul class="carousel carousel-slider" style="height: 362.078px;">'+
                                                '<li v-for="image in image"  class="carousel-item "><img :src=" image"  class="materialboxed responsive-img" /></li>'+
                                            '</ul>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                            '<div class="boxs">'+
                                '<div class="map"></div>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                    '<div class="tabs_block">'+
                        '<ul class="tabs">'+
                            '<li class="active">Детали</li>'+
                            '<li>Описание</li>'+
                            '<li v-if="friendsShow" @click="loadFriends" class="friend-tab">Покупатель</li>'+
                        '</ul>'+
                        '<div class="boxs visible params">'+
                            '<div class="param">'+
                                '<div class="col s6">'+
                                    '<p><span class="bold">Площадь:</span><span>{{ totalarea }} м<sup>2</sup></span></p>'+
                                    '<p><span class="bold">Комнат:  </span><span>{{ rooms }}</span></p>'+
                                    '<p><span class="bold">Этаж / Этажность:  </span><span>{{ floor }}/{{ floors }}</span></p>'+
                                '</div>'+
                                '<div class="col s6">'+
                                    '<p><span class="bold">Район:</span><span>{{ getRaionName(raion) }}</span></p>'+
                                    '<p><span class="bold">Улица: </span><span>{{ street }}</span></p>'+
                                    '<p><span class="bold">Номер дома:</span><span>{{ dom }}</span></p>'+
                                '</div>'+
                            '</div>'+
                            '<div class="price-call">'+
                                '<div class="price">Цена:<strong>{{ cost_b }} р</strong></div>'+
                                '<get-phone :id="id"  :contact_name="contact_name"></get-phone>'+
                            '</div>'+
                        '</div>'+
                        '<div v-if="friendsShow" class="boxs desbox"><span v-html="description"></span></div>'+
                        '<div v-if="friendsShow" class="boxs friendbox">' +
                            '<p>У нижеследующих риелторов есть потенциальный покупатель на этот объект</p>'+
                            '<get-friend v-for="friend in friendsList" :key="friend.id" :friend="friend"></get-friend>'+
                        '</div>'+
                    '</div>'+
                '</div>'+
         '</div>'+
        '</li>',

//------------------------

    computed: {
         date_c : function () {
          var date_arr = this.createdon.split(' ');
          var date = date_arr[0];
          date = date.split('-').reverse().join('.');
          return date;
        },
        cost_b : function () {
            var cost = this.cost;
            var sepcost = thousandSeparator(cost);
            return sepcost;
        },
        getcover: function () {
            let base = 'https://aska-crm.ru/';
            let cover = 'libraries/addobjs/images/no_card.jpg';

            if (this.image != undefined) {
                cover = this.image[0];
            }

            return base + cover;
        },
        friendsShow: function() {
            let show = false;
            if (this.friends > 0) {
                show = true;
            }

            return show;
        },
    },
    methods: {
        getRaionName : function (raion) {
            var raion_arr = this.allraion[raion].split('.');
            var raion = raion_arr[1];
            return raion;
        },
        loadFriends : function () {
            var params = {
                'module': 'Mobile',
                'view': 'Objects',
                'operation': 'getFriends',
                'lot': this.id
            };

            HttpHelper.load(params).then(
                response => {
                    this.friendsList = response;
                },
                error => {
                    MaterializeHelper.errorToast(error);
                }
            );

        }
    },
    data: function() {
        return {
            friendsList: []
        };
    },
    mounted: function() {


             $('.carousel.carousel-slider').carousel({
                    fullWidth: true,
                    indicators: true,
                    noWrap: true,
              });

            (function(i){
              $(function(){
                  var o, n;
                  i(".title_block").on("click", function() {
                    o = i(this).parents(".accordion_item"),
                    o.hasClass("active") ? (o.addClass("last").stop()) : (o.addClass("last_1").stop());
                  });
              });
            })(jQuery);

            (function(n){
            $(function(){
              var b;
              n(".openshare").on("click", function() {
                b = n(this).parents(".shareto"),
                  b.hasClass("active") ? (b.removeClass("active")) : (b.addClass("active"),
                    b.siblings(".active").removeClass("active"));
              });
            });
        })(jQuery);


        // --- Tabs
        (function(s) {
          $(function(){
            var n;
            s(".tabs").on("click", "li:not(.active)", function() {
                n = s(this).parents(".tabs_block"), s(this).dmtabs(n)
            }), s.fn.dmtabs = function(n) {
                s(this).addClass("active").siblings().removeClass("active"), n.find(".boxs").eq(s(this).index()).show(1, function() {
                    s(this).addClass("open_tab")
                }).siblings(".boxs").hide(1, function() {
                    s(this).removeClass("open_tab")
                })
            }
              });
        })(jQuery);
        // --- Share

    }
});

$('.materialboxed').materialbox();

Vue.component('get-phone', {
    template:'<div class="calling flex" v-on:click="showphone">' +
                '{{contact_name}}'+
                '<div  class="flex callto">'+
                    '<i class="material-icons callicon">&#xE0CD;</i><a :href="getTelNum" v-if="show">{{ phone }}</a><span v-if="!show">Показать</span>' +
                '</div>' +
            '</div>',
    props: {
        id: {
            required: true
        },
        contact_name: {

        }
    },
    methods: {
        showphone : function () {
            if (!this.show) {
                this.loadPhone();
            }

            this.show = true;
        },
        loadPhone : function () {
            this.showMainPreloader = true;
            Promise.all([
                this.$http.get('index.php?module=Mobile&view=Objects&operation=getObjectPhone&object_id='+this.id),
            ]).then(results => {
                    var objectPhone = results[0].body;
                    this.phone = objectPhone.result.phone;
                    this.clientname = objectPhone.result.name;
                    this.showMainPreloader = false;
                },response => {
                    this.showMainPreloader = false;
                    MaterializeHelper.errorToast('Сервер временно недоступен, попытайтесь позднее!');
                }
            );
        }
    },
    computed: {
        getTelNum: function() {
            if(!this.phone) {
                return '#';
            }
            return 'tel:' + this.phone;
        }
    },
    data: function() {
        return {
            //num: 'Показать',
            //phone: [],
            phone : '',
            clientname : '',
            show: false
        };
    }
});

Vue.component('preload', {
    template:'<div id="fountainG"><div id="fountainG_1" ></div><div id="fountainG_2"></div><div id="fountainG_3"></div><div id="fountainG_4"></div></div>',
    data: function() {
        return {};
    }
});

Vue.component('get-friend', {
    props: {
        friend: {
            type: Object,
            required: true
        }
    },
    template:'  <div class="friend-row">'+
                                '<div class="fr-klient">'+
                                    '<div class="sup">Клиент </div>'+
                                    '<div>{{ friend.event_id }}</div>'+
                                    '<div><span>{{ friend.client_name }}</span></div>'+
                                    '<div>до {{ friend.t_cost_do }}р</div>'+
                                    '<div class="sq">от {{ friend.t_square_ot }} м<sup>2</sup></div>'+
                                '</div>'+
                                '<div class="fr-rieltor">'+
                                    '<div class="sup">Риелтор </div>'+
                                    '<div><span>{{ friend.user_name }}</span></div>'+
                                    '<div>{{ friend.user_otdel }}</div>'+
                                    '<a class="call" :href="getTelNum"><i class="material-icons callicon">&#xE0CD</i></a>'+
                                '</div>'+
                            '</div>',
    computed: {
        getTelNum: function(ph) {
            if(!this.friend.user_phone) {
                return '#';
            }
            return 'tel:' + this.friend.user_phone;
        }
    },
    data: function() {
        return {};
    }
});

Vue.component('object-filter', {
    template : '<div class="filtr" id="filtr">' +
                    '<form name="filtr"><div>' +
                        '<a href="#" data-activates="filtr" class="hide-on-large-only">' +
                            '<i class="material-icons" style="color:#6f89e5; line-height: 1.4;">close</i>' +
                        '</a>' +
                        '<div class="filtrow chek"> ' +
                            '<div class="chekbox">' +
                                '<input name="kv" type="checkbox" @change="changeFilter">' +
                                '<label>Квартиры</label>' +
                            '</div>' +
                            '<div class="chekbox">' +
                                '<input name="dom" type="checkbox" @change="changeFilter">' +
                                '<label>Дома</label>' +
                            '</div>' +
                            '<div class="chekbox">' +
                                '<input name="arenda" type="checkbox" @change="changeFilter">' +
                                '<label>Аренда</label>' +
                            '</div>' +
                            '<div  class="chekbox">' +
                                '<input name="zem" type="checkbox" @change="changeFilter">' +
                                '<label>Земельные участки</label>' +
                            '</div>' +
                            '<div class="chekbox">' +
                                '<input name="commerc" type="checkbox" @change="changeFilter">' +
                                '<label>Коммерция</label>' +
                            '</div>' +
                        '</div>' +
                        '<div class="filtrow" style="display:none;"> ' +
                            '<label>Телефон:</label>' +
                            '<input type="number" pattern="[0-9]*" inputmode="numeric" @change="changeFilter">' +
                        '</div>' +
                        '<div class="filtrow"> ' +
                            '<label>№ лота:</label>' +
                            '<input name="id" type="number" pattern="[0-9]*" inputmode="numeric" @change="changeFilter">' +
                        '</div>' +
                        '<div class="filtrow">' +
                            '<label>Площадь:</label>' +
                            '<input name="sq_ot" type="number" pattern="[0-9]*" inputmode="numeric"  placeholder="от" @change="changeFilter">' +
                            '<input name="sq_do" type="number" pattern="[0-9]*" inputmode="numeric"  placeholder="до" @change="changeFilter">' +
                        '</div>' +
                        '<div class="filtrow"> ' +
                            '<label>Цена:</label>' +
                            '<input name="cost_ot" type="number" pattern="[0-9]*" inputmode="numeric" placeholder="от" @change="changeFilter">' +
                            '<input name="cost_do" type="number" pattern="[0-9]*" inputmode="numeric"  placeholder="до" @change="changeFilter">' +
                        '</div>' +
                        '<div class="filtrow"> ' +
                            '<label>Улица:</label>' +
                            '<input name="street" type="text"  @change="changeFilter">' +
                        '</div>' +
                        '<div class="filtrow"> ' +
                            '<label>Статус объекта:</label>' +
                            '<select name="published" @change="changeFilter">' +
                                '<option value="">Все</option>' +
                                '<option value="1">Опубликован</option>' +
                                '<option value="0">Неопубликован</option>' +
                            '</select>' +
                        '</div>' +
                        '<div class="filtrow" style="display:none">' +
                            '<label>Поиск по содержимому:</label>' +
                            '<input type="text" >' +
                        '</div>' +
                        '<div class="res">' +
                            '<a @click.prevent="search" class="submit" data-activates="filtr">НАЙТИ</a>' +
                            '<button @click.prevent="reset" class="del"><i class="material-icons" >delete</i></button>' +
                        '</div></div>' +
                    '</form>' +
                '</div>',
    props: {

    },
    methods: {
        reset: function () {
            window.location.href = "/index.php?module=Mobile&view=Objects";
        },
        search: function() {
            eventBus.$emit('search', this.filter);
        },
        changeFilter: function(el) {
            let data = el.target;
            this.filter[data.name] = data.value;
        }
    },
    computed: {

    },
    data: function() {
        return {
            filter: {}
        };
    }
});



Vue.component('share', {
  template: '<div class="shareto">'+
                '<div class="openshare"><i class="material-icons open"  >&#xE80D;</i><i class="material-icons close">&#xE5CD;</i></div>'+
                    '<div class="share-container" >'+
                        '<ul class="flex">'+
                            '<span> Поделиться объектом (ссылка на сайт) </span>'+
                            '<li ><a :href="getWhatsapp" class="watsapp">watsapp</a></li>'+
                            '<li><a :href="getViber" class="viber">Viber</a></li>'+
                            '<li><a :href="getTel" class="telegram">Telegram</a></li>'+
                        '</ul>'+
                '</div>'+
            '</div>',
    props: {
        uri: {
          /*type: String,
          required: true*/
        }
    },

    computed: {
        getWhatsapp: function() {
            return 'whatsapp://send?text=' + this.getFullUrl;
        },
        getViber: function() {
            return 'viber://forward?text=' + this.getFullUrl;
        },
        getTel: function() {
            return 'https://telegram.me/share/url?url=' + this.getFullUrl;
        },
        getFullUrl: function(){
            return this.base + '/' +this.uri;
        }
    },
  data: function() {
        return {
            base :'https://www.aska-realty.ru',
        };
    }
});




var app = new Vue({
    el: '#root',
    mounted: function() {
        this.loadData();
        this.scroll();
        eventBus.$on('search', this.search);
    },
    methods: {
        scroll: function(){
            window.onscroll = () => {
                let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
                if (bottomOfWindow) {
                    if (this.page != 99999999 && this.objectsLoading == false) {
                        this.objectsLoading = true;
                        this.loadObjects(this.page + 1);
                    }
                }
            };
        },
        loadData: function() {
            this.showMainPreloader = true;
            Promise.all([
                this.$http.get('/index.php?module=Mobile&view=Objects&operation=getRaions')
            ]).then(results => {
                var riaonsResponse = results[0].body;
                this.riaons = riaonsResponse.result;

                app.loadObjects();

            }, response => {
                this.showMainPreloader = false;
                MaterializeHelper.errorToast('Сервер временно недоступен, попытайтесь позднее!');
            });
        },
        loadObjects: function(page = 1, limit = 7) {
            this.page = page;
            this.limit = limit;

            let dop_q = '';

            if (Object.keys(this.filter).length > 0) {
                $.each(this.filter, function (ind, val) {
                    if (val == 0 || val == '') {
                        return;
                    }
                    dop_q += '&'+ind+'='+encodeURIComponent(val);
                });
            }

            let link = "/index.php?module=Mobile&view=Objects&operation=getCurrentUserObjects&page="+this.page+"&limit="+this.limit+dop_q;

            console.log(link);

            Promise.all([
                this.$http.get(link)
            ]).then(results => {
                var objectsResponse = results[0].body.result;

                if (Object.keys(objectsResponse).length < this.limit) {
                    app.page = 99999999;
                }

                Object.keys(objectsResponse).map(function(objectKey, index) {
                    app.objects.push(objectsResponse[objectKey]);
                });
                this.objectsLoading = false;
                this.showMainPreloader = false;
            }, response => {
                this.showMainPreloader = false;
                MaterializeHelper.errorToast('Сервер временно недоступен, попытайтесь позднее!');
            });
        },
        search: function(info) {
            this.objects = [];

            let typeArr = [];
            if (info.kv == 'on') {
                typeArr.push(12);
                delete info.kv;
            }

            if (info.dom == 'on') {
                typeArr.push(13);
                delete info.dom;
            }

            if (info.arenda == 'on') {
                typeArr.push(16);
                delete info.arenda;
            }

            if (info.zem == 'on') {
                typeArr.push(14);
                delete info.zem;
            }

            if (info.commerc == 'on') {
                typeArr.push(15);
                delete info.commerc;
            }
            if (typeArr.length) {
                info['type'] = typeArr;
            }

            this.filter = info;
            this.loadObjects();
        },
    },
    data: {
        showMainPreloader: false,
        objects: [],
        riaons: [],
        images: [],
        page : 1,
        limit: 7,
        filter: {},
        objectsLoading: false
    }
});

var thousandSeparator = function(str) {
    var parts = (str + '').split('.'),
        main = parts[0],
        len = main.length,
        output = '',
        i = len - 1;

    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = ' ' + output;
        }
        --i;
    }
    if (parts.length > 1) {
        output += '.' + parts[1];
    }
    return output;
};


(function($) {
    $(function(){
    var
        speed = 500,
        $scrollTop = $('<a href="#" title="Быстро вернуться наверх" class="scrollTop"><i class="fa fa-angle-double-up"></i></a>').appendTo('body');

        $scrollTop.click(function(e){
            e.preventDefault();

            $( 'html:not(:animated),body:not(:animated)' ).animate({ scrollTop: 0}, speed );
        });
        function show_scrollTop(){
            ( $(window).scrollTop() > 300 ) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut(600);
        }
        $(window).scroll( function(){ show_scrollTop(); } );
        show_scrollTop();
      });
})(jQuery);
    $('.collapsible').collapsible(
                {
                    topOffset: $('#menu-second').innerHeight()+50
                }
            );