<template>
    <div :class="nxSelectPositionClass">
        <Input :value="latlng" readonly style="width:200px" icon="md-locate" @on-click="showMap"></Input>
        <span class="error">{{fieldError}}</span>
    </div>
</template>
<script>
import Vue from 'vue';
import Item from '../mixins/item';
import SelectPositionMap from './select-position-map'

export default {
    name: 'XSelectPosition',
    data() {
        return {
            lat: 29.9,
            lng: 120.46
        }
    },
    components: {},
    mixins: [Item],
    props: {},
    computed: {
        latlng() {
            return "" + this.lat + "," + this.lng;
        },
        style() {
            return {

            }
        },

        nxSelectPositionClass() {
            return {
                'ivu-form-item-error': this.fieldError
            };
        }
    },
    mounted() {
    },
    methods: {
        /*表单数据改变*/
        formValueChange(value) {
            if (value) {
                this.lat = value[this.prop + "_lat"];
                this.lng = value[this.prop + "_lng"];
            }
        },
        /*获取数据*/
        getValue() {
            let v = {};
            // v[`${prop}_lat`] = this.lat;
            // v[`${prop}_lng`] = this.lng;

            return v;
        },

        showMap() {
            const self = this;
            const D = Vue.extend(SelectPositionMap);

            const $vm = new D({
                data: Object.assign({}, {
                    lat: this.lat,
                    lng: this.lng
                }),
                methods: {
                    fnOK(data) {
                        if (data) {
                            self.lat = data.lat;
                            self.lng = data.lng;
                        }
                    }
                }
            });

            $vm.$mount();
            document.body.appendChild($vm.$el);
        }
    }
};

</script>
<style >


</style>
