<template>
  <el-col :span="12">
    <el-form-item label="经度" :prop="longitudeProps" style="flex: 1">
      <el-input :value="longitude" disabled />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <div style="display: flex">
      <el-form-item label="纬度" :prop="latitudeProps" style="flex: 1">
        <el-input :value="latitude" disabled />
      </el-form-item>
      <el-form-item label-width="10px">
        <el-button type="primary" @click="mapVisible = true">
          点击定位
        </el-button>
      </el-form-item>
    </div>
  </el-col>
  <app-map-selector
    v-model:visible="mapVisible"
    v-model:longitude="longitude"
    v-model:latitude="latitude"
  />
</template>

<script setup>
import { ref } from "vue";
import AppMapSelector from "./map.vue";
import { ElCol, ElFormItem, ElInput, ElButton } from "element-plus";
import "element-plus/es/components/col/style/css";
import "element-plus/es/components/form-item/style/css";
import "element-plus/es/components/input/style/css";
import "element-plus/es/components/button/style/css";

defineOptions({
  name: "AppMap",
});
defineProps({
  longitudeProps: { type: String, default: "longitude" },
  latitudeProps: { type: String, default: "latitude" },
});
const longitude = defineModel("longitude", {
  type: [Number, String],
  required: true,
  default: "",
});
const latitude = defineModel("latitude", {
  type: [Number, String],
  required: true,
  default: "",
});
const mapVisible = ref(false);
</script>

<style scoped lang="scss"></style>
