<script setup lang="ts">
import { ref } from 'vue'
import { MAP_INJECTION_KEY } from '@/config/symbol'

interface DialogProps {
    title: string
    rawData: any
}
const parentApi = inject(MAP_INJECTION_KEY)

const emit = defineEmits(['handleConfrim'])

const visible = ref(false)
const dialogProps = ref<DialogProps>({
    title: '',
    rawData: {}
})
const isDisabled = computed(() => !dialogProps.value.rawData?.name || !dialogProps.value.rawData?.name.length)

function acceptParams(params: DialogProps) {
    dialogProps.value = params
    visible.value = true
}
const handleConfrim = async () => {
    const { name, polygonPaths, regionCode } = dialogProps.value.rawData
    const params = {
        name,
        regionId: regionCode,
        polygon: convertParam(polygonPaths)
    }
    visible.value = false
    emit('handleConfrim', params)
}
const handleCancel = () => {
    visible.value = false
    dialogProps.value.rawData = {}
    parentApi?.tcMap.value.removePolygon()
}
function convertParam(polygonPaths: any[]) {
    const flatArr = polygonPaths.map(polygon => polygon.lng + ' ' + polygon.lat)
    return `POLYGON((${flatArr.join(',')}))`
}
defineExpose({
    acceptParams
})
</script>

<template>
    <el-dialog v-model="visible" :title="dialogProps.title" width="20%" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <span>确认绘制区域为新的服务区？</span>
        <el-form class="form" :model="dialogProps.rawData">
            <el-form-item label="">
                <el-input v-model.trim="dialogProps.rawData.name" autocomplete="off" placeholder="请输入服务区名称" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" :disabled="isDisabled" @click="handleConfrim">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.form {
    margin-top: 10px;
}
</style>
