

<template>
  <el-dialog v-model="state.dialogVisible" title="地图选点" draggable ref="dialogRef" width="60%" append-to-body destroy-on-close>
    <Amap v-model="location" ref="AmapRef"/>
    <template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog" class="default-button">取 消</el-button>
					<el-button type="primary" @click="confirm" :loading="state.loading" :disabled="disabled">确定</el-button>
				</span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import {reactive, defineAsyncComponent, ref, computed} from "vue";
const Amap = defineAsyncComponent(() => import('/@/views/business/order/components/amap-select.vue')); //地图组件
// 定义变量内容
const state = reactive<any>({
  dialogVisible: false,
});
const location = ref({});
// 打开弹窗
const openDialog = (val: any) => {
  location.value = val;
  state.dialogVisible = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialogVisible = false;
};
const disabled = computed(()=>{
  return !AmapRef.value?.location?.longitude
})
// 确定
const AmapRef = ref<RefType>();
const emit = defineEmits(['confirm']);
const confirm = ()=>{
  const location = AmapRef.value?.location;
  emit('confirm',location);
  closeDialog();
}
defineExpose({
  openDialog,
  closeDialog
})
</script>
<style scoped lang="scss">

</style>