<template>
    <v-dialog v-model="visible" persistent max-width="1400px">
        <v-card>
            <v-toolbar flat dark color="primary">
                <v-toolbar-title v-if="item.id">Detale biura</v-toolbar-title>
                <v-spacer></v-spacer>
                        <v-btn flat icon color="white" @click="close">
                            <v-icon>close</v-icon>
                        </v-btn>
                        </v-toolbar>
                        <v-container>
                            <v-layout row wrap>
                            <v-flex class="text-xs-center">
                                <div id="mapI" class="mapI">
                                    <v-flex d-flex>
                                        <img
                                        height="600px"
                                        >
                                    </v-flex>
                                </div>
                                <img v-bind:src="`/img/${item.path}`" alt="" height="0" v-on:load="refreshGetContent(item.path )">
                                <img v-bind:src="`/img/${item.path}`" alt="" height="0" @load="initZoom(item.path)">
                            </v-flex>
                            </v-layout>

                            <v-expansion-panel>
                                <v-expansion-panel-content>
                                <div slot="header">Przypisz miejsce użytkownikowi</div>
                                    <v-container grid-list-md text-xs-center>
                                           <v-layout row wrap>
                                            <v-flex xs3>
                                                 wysokość: <input v-model="this.messagea" id="lati">
                                             </v-flex>
                                             <v-flex xs3>
                                                szerokość: <input v-model="this.messages" id="longi">
                                            </v-flex>
                                            <v-flex xs3>
                                               <v-select
                                                :items="userSelect"
                                                label="Pracownicy"
                                                prepend-icon="perm_identity"
                                                ></v-select>
                                            </v-flex>
                                            <v-flex xs3>
                                                <div>
                                                    tutaj na zmiennych
                                                    /{{ lat }}/{{lng}}
                                                    <v-btn color="black" flat @click="saveAs()">Zapisz</v-btn>
                                                </div>
                                            </v-flex>
                                           </v-layout>
                                       </v-container>
                                  <v-footer class="pa-3" color="primary">
                                    <v-spacer></v-spacer>

                                </v-footer>
                                </v-expansion-panel-content>

                            </v-expansion-panel>

							<div id="coords"></div>

                        </v-container>
                        <usersInOffice
                            :officeId="item.id"
                            ref="userRef"
                        ></usersInOffice>
            <v-divider></v-divider>
            <v-card-actions class="primary">
                <v-spacer></v-spacer>
                <v-btn color="white" flat @click="close">Anuluj</v-btn>
            </v-card-actions>

            <div class="module-loader" v-if="loading">
                <v-container fluid fill-height absolute>
                    <v-layout row wrap align-center>
                        <v-flex class="text-xs-center">
                            <v-progress-circular indeterminate :size="150" :width="2" color="green"></v-progress-circular>
                        </v-flex>
                    </v-layout>
                </v-container>
            </div>
        </v-card>
    </v-dialog>
</template>

<script>
import usersInOffice from '../office/usersInOffice/index.vue'

    export default {
        props:[
            'branchOfCompanies'
        ],
        components: {
            usersInOffice
        },
        data() {
            return {
                lat:'',
                lng:'',
				mapI: null,
				coord:'',
				visible: false,
				loading: false,
				valid: true,
                default: {
                    id: 0,
                    path:'',
                },
                item: {},
                userSelect: ['Foo', 'Bar', 'Fizz', 'Buzz']
            }
		},
		mounted(){
            //this.initZoom();
            this.refreshGetContent();
        },
        created() {
            this.item = _.cloneDeep(this.default);
        },
        methods: {
            saveAs(x,y){
                this.lat=document.getElementById("lati").value;
                this.lng=document.getElementById("longi").value;
            },
			initZoom(val){
            if(this.mapI!=null)
            {
                this.mapI.off();
                this.mapI.remove();
            }
           this.mapI = L.map('mapI', {
                    minZoom: -1,
                    maxZoom: 2,
                    center: [250, 500],
                    dragging:false,
                    zoom: 0 ,
                    gestureHandling: true,
                    crs: L.CRS.Simple
                });

                var bounds = [[500,0], [0,1000]];
                var image = L.imageOverlay("/img/"+val, bounds).addTo(this.mapI);
                // var southWest = map.unproject([0, 6], 1);
                // var northEast = map.unproject([10, 0], 1);

                this.mapI.fitBounds(bounds);

                var sol = L.latLng([ 160, 455 ]);
                var sol2 = L.latLng([ 160, 533.5 ]);
                L.marker(sol).addTo(this.mapI);
                L.marker(sol2).addTo(this.mapI);
                this.mapI.setView( [270, 500], 0);

                this.mapI.on('click',
                    function(e){
                        this.coord = e.latlng.toString().split(',');
                        this.lat = this.coord[0].split('(');
                       	this.lng = this.coord[1].split(')');
						document.getElementById("lati").value=this.lat[1];
                        document.getElementById("longi").value=this.lng[0];
                        return this.lat = this.coord[0].split('(');
                    });
                    console.log(this.lat)
					console.log(this.messagea)

            },
            refreshGetContent() {
                this.$refs.userRef.getContent();
            },
            show(item) {
                if (item) {
                    this.item = _.cloneDeep(item);

                } else {
                    this.item = _.cloneDeep(this.default);
                }
                this.visible = true;
            },
            close() {
                this.visible = false;
            },
        }
    }
</script>