<template>
    <el-dialog :title="title" width="800px" :model-value="modelShow" append-to-body @close="closed" :destroy-on-close="true" :close-on-click-modal="false">
        <el-form :model="listQuery" inline :rules="rules" ref="formRef" :label-width="130" >
            <el-form-item label="区域名称" prop="qymc">
                <MOSTY.Other width="100%" clearable v-model="listQuery.qymc" placeholder="请输入区域名称"/>
            </el-form-item>
            <el-form-item label="区域类型" prop="qylx">
                <MOSTY.Select v-model="listQuery.qylx" filterable :dictEnum="props.dic.D_ZDY_QYLX" width="100%" clearable placeholder="请选择区域类型"/>
            </el-form-item>
            <el-form-item label="区域级别" prop="qyjb">
                <MOSTY.Select v-model="listQuery.qyjb" filterable :dictEnum="props.dic.D_ZDY_QYJB" width="100%" clearable placeholder="请选择区域类型"/>
            </el-form-item>
            <el-form-item label="行政区划" prop="xzqhdm" v-if="listQuery.qylx == 'xzqh'">
                <MOSTY.Select v-model="listQuery.xzqhdm" filterable :dictEnum="props.dic.D_BZ_XZQHDM" width="100%" clearable placeholder="请选择行政区划"/>
            </el-form-item>
            <el-form-item label="地图范围" prop="pgis" class="ww100">
                <div class="flex ww100">
                    <el-input v-model="listQuery.pgis" readonly placeholder="请输入地图范围" style="flex: 1;"></el-input>
                    <el-button type="primary" style="width: 136px;" class="ml10" @click="chooseMap">
                        <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
                        <span style="vertical-align: middle">选择地图范围</span>
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item label="感知源信息" class="ww100">
                <div class="flex ww100">
                    <div class="boo">
                        <span v-if="!listQuery.sxts || listQuery.sxts.length == 0" class="f14 ml10" style="color: #e1e1e1;">感知源信息</span>
                        <el-tag class="ml4 mr4" v-for="(it,idx) in listQuery.sxts" :key="idx">{{ it.sbmc }}</el-tag>
                    </div>
                </div>
            </el-form-item>
            <div class="mapbox" v-if="showMap" v-loading="disabled"><GdMap></GdMap></div>
            <div class="mt10 flex just-center">
                <el-button @click="closed">取 消</el-button>
                <el-button type="primary" @click="submit" v-loading="loading">确 定</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import emitter from "@/utils/eventBus.js";
import GdMap from "@/components/GdMap/index.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ref, defineProps, onMounted, nextTick ,onUnmounted} from "vue";
const props = defineProps({
    dic: {
        type: Object,
        default: () => ({})
    },
});
const disabled = ref(false)
const loading = ref(false)
const modelShow = ref(false);
const emit = defineEmits(["change"]);
const title = ref("新增区域");
const listQuery = ref({sxts:[],pgis:[]});
const formRef = ref();
const showMap = ref(false);
const rules = {
    qymc: [{ required: true, message: "请输入区域名称", trigger: "blur" }],
    qylx: [{ required: true, message: "请选择区域类型", trigger: "change" }],
    qyjb: [{ required: true, message: "请选择区域级别", trigger: "change" }],
    xzqhdm: [{ required: true, message: "请选择行政区划", trigger: "change" }],
    pgis: [{ required: true, message: "请输入地图范围", trigger: ['change','blur'] }],
    sxts: [{ required: true, message: "请输入感知元信息", trigger: "blur" }],
};

onMounted(()=>{
    emitter.on('coordString',val=>{
        if(val.flag == 'bkqy_ht') {
            listQuery.value.pgis = val.coord;
            emitter.emit('deletePointArea','gzy_ht');
            disabled.value = true;
            qcckPost({pgis:val.coord[0]},'/mosty-gsxt/tbGsxtBkQy/getSxtList').then(res=>{
                listQuery.value.sxts = res || [];
                let icon = require('@/assets/point/sp.png');
                emitter.emit('addPointArea',{flag:'gzy_ht',icon,coords:listQuery.value.sxts});
                disabled.value = false;
            }).catch(()=>{
                disabled.value = false;
            })
        }
    })
})

// 初始化
const init = (type,row) => {
    listQuery.value = {sxts:[],pgis:[]};
    title.value = type === "add" ? "新增区域" : "编辑区域";
    modelShow.value = true;
    nextTick(() => {
        showMap.value = true;
    });
    if(type === "edit") getDateById(row.id)
};

// 更具id获取数据
const getDateById = (id) =>{
    qcckGet({id},'/mosty-gsxt/tbGsxtBkQy/selectByid').then(res=>{
        res.pgis = res.pgis ? [res.pgis]:[[[]]]
        let icon = require('@/assets/point/sp.png');
        nextTick(()=>{
            if(res.sxts && res.sxts.length > 0)  emitter.emit('addPointArea',{flag:'gzy_ht',icon,coords:res.sxts});
            if(res.pgis){
                let obj = { position: res.pgis, text:'', id: res.id };
                emitter.emit("echoPlane", { coords: [obj],  flag: "bkqy", type: "polygon" });
            }
        })
        listQuery.value = res || {};
    })
}

// 地图选择
const chooseMap = () =>{
    listQuery.value.pgis = [];
    listQuery.value.sxts = [];
    emitter.emit('removeEara','bkqy_ht')
    emitter.emit('deletePointArea','bkqy')
    emitter.emit('deletePointArea','gzy_ht')
    emitter.emit('drawShape',{type:'polygon',flag:'bkqy_ht'})
}

// 提交
const submit = () => {
    formRef.value.validate(valid => {
        if(!valid) return false;
        loading.value = true;
        let params = { ...listQuery.value }
        params.pgis = params.pgis[0]
        let url = title.value == '新增区域' ? '/mosty-gsxt/tbGsxtBkQy/add' :'/mosty-gsxt/tbGsxtBkQy/update'
        qcckPost(params,url).then(res=>{
            loading.value = false;
            emit('change');
            closed();
        }).catch(()=>{
            loading.value = false;
        })
    });
};
const closed = () => {
    emitter.emit('removeEara','bkqy_ht')
    emitter.emit('deletePointArea','gzy_ht')
    showMap.value = false;
    formRef.value.resetFields();
    modelShow.value = false;
};

onUnmounted(()=>{
    emitter.off("coordString");
})
defineExpose({
    init
});

</script>

<style scoped lang="scss">
.mapbox{
    position: relative;
    margin-left: 40px;
    width: calc(100% - 40px);
    height: 320px;
    background: red;
}
.boo{
    width: 100%;
    min-height: 32px;
    max-height: 74px;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
    letter-spacing: 1px;
}
</style>