<template>
    <div>
        <div class="container">
            <div class="font-weight-semibold font-size-large mb-4">Розміщення зданих в оренду кавоварок</div>
            <div class="row">
                <div class="col-12 col-md-6 col-lg-8 mb-3 mb-md-0 d-flex">
                    <div class="border w-100" style="min-height: 300px;">
                        <div id="map" style="height: 100%"></div>
                        <div id="notifications"></div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4 d-flex">
                    <div class="card w-100">
                        <div class="card-body d-flex flex-column justify-content-between">
                          <div class="row justify-content-between mb-4">
                              <div class="col-auto font-weight-bold font-size-large">Всього:</div>
                              <div class="col-auto font-weight-bold font-size-large">{{dashboard_state.all}}</div>
                          </div>
                          <div class="row justify-content-between mb-2">
                              <label class="col-auto col-lg-12 col-xl-auto">Автоматичних:</label>
                              <div class="col-auto col-lg-12 col-xl-auto my_gray-700 font-weight-medium">{{dashboard_state.automatic}}</div>
                           </div>
                           <div class="row justify-content-between">
                              <label class="col-auto col-lg-12 col-xl-auto">Суперавтоматів:</label>
                              <div class="col-auto my_gray-700 font-weight-medium">{{dashboard_state.supermarkets}}</div>
                           </div>
                           <div class="row justify-content-between">
                              <label class="col-auto col-lg-12 col-xl-auto">Напівавтоматичних:</label>
                              <div class="col-auto my_gray-700 font-weight-medium">{{dashboard_state.semi_automatic}}</div>
                           </div>
                           <div class="row justify-content-between">
                              <label class="col-auto col-lg-12 col-xl-auto">Чалдових:</label>
                              <div class="col-auto my_gray-700 font-weight-medium">{{dashboard_state.chalds}}</div>
                           </div>
                           <div class="row justify-content-between mt-4">
                               <div class="col-auto font-weight-bold font-size-large">З телеметрією:</div>
                               <div class="col-auto font-weight-bold font-size-large">{{dashboard_state.with_telemetry}}({{Math.round(100*dashboard_state.with_telemetry/dashboard_state.all)}}%)</div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.container-->
        <div class="container-fluid mt-5">
            <div class="container">
                <div class="font-weight-semibold font-size-large mb-4">Лог критичних сповіщень</div>
                <notifications></notifications>

                <div class="row mt-5">
                    <div class="col-12 col-md-6 col-lg-8 mb-3 mb-md-0">
                        <div class="font-weight-semibold font-size-large mb-4">Примусово відключені кавоварки</div>
                        <div class="table-responsive mt-3">
                            <table class="table table-bordered l_r_p_0">
                                <thead>
                                <tr>
                                    <th>Кавоварка</th>
                                    <th>Контрагент</th>
                                    <th>Дата відключення</th>
                                    <th>Причина</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(disabled_coffee_maker, index) in disabled_coffee_makers" :key="index">
                                    <td>{{disabled_coffee_maker.name}}</td>
                                    <td>{{disabled_coffee_maker.contractor}}</td>
                                    <td>{{disabled_coffee_maker.date}}</td>
                                    <td>{{disabled_coffee_maker.reason}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="font-weight-semibold font-size-large mb-4">Скорінг контрагентів</div>
                        <div class="table-responsive mt-3">
                            <table class="table table-bordered l_r_p_0">
                                <thead>
                                <tr>
                                    <th>Контрагент</th>
                                    <th>Скорінг</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(scoring_of_contractor, index) in scoring_of_contractors" :key="index">
                                    <td>{{scoring_of_contractor.contractor}}</td>
                                    <td>{{scoring_of_contractor.scoring}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Scroll to Top Button-->
        <a class="scroll-to-top rounded" href="#page-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>
</template>

<script>
    import Notifications from './Notifications'
    import marker_icon from '../../assets/images/pin 1.png'
    export default {
        components: {
            Notifications
        },
        methods: {
            notify: function(coffeemachine_id,text, callback, close_callback, style) {

                var time = this.time_stamp;
                var $container = $('#notifications');


                var html = $('<div class="alert alert-info hide">' + " " + coffeemachine_id + '<br>' + " " + text + '</div>');



                $container.prepend(html)
                html.removeClass('hide').hide().fadeIn('slow')

                function remove_notice() {
                    html.stop().fadeOut('slow').remove()
                }

                var timer =  setInterval(remove_notice, time);

                $(html).hover(function(){
                    clearInterval(timer);
                }, function(){
                    timer = setInterval(remove_notice, time);
                });

                html.on('click', function () {
                    clearInterval(timer)
                    callback && callback()
                    remove_notice()
                });


            },
            loadScript (src) {
                return new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = src;
                    script.async = false;
                    script.onerror = reject;
                    script.onload = resolve;
                    document.body.appendChild(script);
                });
            },
            initialMap(){
                const element = document.getElementById('map');
                const config = {
                    zoom: 14,
                    center: new google.maps.LatLng(this.map_data.center.lat, this.map_data.center.lng),
                    mapTypeControl: false,
                    scaleControl: false,
                    streetViewControl: false,
                    fullscreenControl: true,
                    styles: this.$map_style
                }
                this.map_data.map = new google.maps.Map(element, config);

                this.map_data.markers.forEach(marker => {
                    const position = new google.maps.LatLng(marker.lat, marker.lng);
                    marker.map = this.map_data.map;
                    marker.position = position;
                    marker.icon = marker_icon;
                    const createdMarker = new google.maps.Marker(marker);
                });
            }
        },
        created(){
            const url = `https://maps.googleapis.com/maps/api/js?key=${this.$map_api_key}`;
            this.loadScript(url).then(() => this.initialMap()).catch(e => console.log('load map error', e));
        },
        data () {
            return {
                time_stamp: 5000,
                map_data: {
                    map: null,
                    center: {lat: 50.450256, lng: 30.523132},
                    markers: [
                        {
                            lat: 50.4487257, lng: 30.5305134
                        },
                        {
                            lat: 50.4498734, lng: 30.505365
                        },
                        {
                            lat: 50.4548466, lng: 30.529226
                        }
                    ]
                },
                dashboard_state: {
                    all: 2134,
                    automatic: 980,
                    supermarkets: 25,
                    semi_automatic: 680,
                    chalds: 500,
                    with_telemetry: 34
                },
                scoring_of_contractors: [
                    {
                        id: 1,
                        contractor: 'Вася Пупкін',
                        scoring: 8.5
                    },
                    {
                        id: 2,
                        contractor: 'Вася Пупкін 2',
                        scoring: 81.5
                    }
                ],
                disabled_coffee_makers: [
                    {
                        id: 1,
                        name: 'NB 707',
                        contractor: 'Фірма',
                        date: '12.05.2017',
                        reason: 'Підозра на шахрайство'
                    },
                    {
                        id: 2,
                        name: 'NB 707_2',
                        contractor: 'Фірма',
                        date: '13.05.2017',
                        reason: 'причина'
                    }
                ],
                notifications: [
                    {
                        id: 1,
                        date: '15.05.17',
                        importance: {
                            message: 'Важливо',
                            state: 'warning'
                        },
                        message: 'Наближається термін ТО кавоварки',
                        contractor: 'Фірма',
                        trade_point: 'вул. Коновальця 3',
                        coffee_maker: 'NB 707'
                    },
                    {
                        id: 2,
                        date: '15.05.17',
                        importance: {
                            message: 'Важливо',
                            state: 'success'
                        },
                        message: 'Наближається термін ТО кавоварки',
                        contractor: 'Фірма',
                        trade_point: 'вул. Коновальця 3',
                        coffee_maker: 'NB 707'
                    },
                    {
                        id: 3,
                        date: '15.05.17',
                        importance: {
                            message: 'Важливо',
                            state: 'danger'
                        },
                        message: 'Наближається термін ТО кавоварки',
                        contractor: 'Фірма',
                        trade_point: 'вул. Коновальця 3',
                        coffee_maker: 'NB 707'
                    }
                    ,
                    {
                        id: 3,
                        date: '15.05.17',
                        importance: {
                            message: 'Важливо',
                            state: 'purple'
                        },
                        message: 'Наближається термін ТО кавоварки',
                        contractor: 'Фірма',
                        trade_point: 'вул. Коновальця 3',
                        coffee_maker: 'NB 707'
                    }
                ]
            }
        },
        mounted(){
            setInterval(() => {
                this.notify('asda','Asdaadadfsadfafdas', null,null, 'info')
            }, 3000)
        }
    }
</script>

<style scoped>
    #map{
    border: none;
    }
    #notifications{
	cursor: pointer;
	position: fixed;
	right: 0px;
	z-index: 9999;
	bottom: 0px;
	margin-bottom: 22px;
	margin-right: 15px;
	max-width: 300px;
    background-color: white;
    }

</style>