<template>
    <el-dialog top="120px" width="1200px" custom-class="zdlx_dialog" v-model="props.isShow" destroy-on-close
        :show-close="false" :close-on-click-modal="false">
        <template #title>
            <div class="my-header">
                <div class="left">
                    <span>制定路线</span>
                </div>
                <el-icon color="#23c3f3" @click="closeDialog">
                    <Close />
                </el-icon>
            </div>
        </template>
        <div class="contant-dialog">
            <el-steps style="max-width: 600px" :active="stepActive" finish-status="success">
                <el-step title="步骤1" />
                <el-step title="步骤2" />
                <el-step title="步骤3" />
            </el-steps>
            <div v-if="stepActive == 0">
                <el-input v-model="listQuery.zb" placeholder="请选择巡逻路线">
                    <template #append><el-button type="primary" @click="chackLat('line', 'zdlx')">开始绘制</el-button></template>
                </el-input>
                <div class="mapBox relative mb10">
                    <GdMap v-if="mapShow" mapid="mapSmall"></GdMap>
                </div>
            </div>
            <div v-else-if="stepActive == 1">
                <el-button type="primary" style="margin-bottom: 10px;" @click="addEditPoint('add')">新增</el-button>
                <div>
                    <MyTable :tableData="listQuery.bxds" :tableColumn="pageData.tableColumn"
                        :tableHeight="pageData.tableHeight" :key="pageData.keyCount"
                        :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
                        <template #ewm="{ row }">
                            <el-image :src="`${baseUrl}${row.ewm}`" preview-teleported>
                            </el-image>
                        </template>
                        <template #bxdLx="{ row }">
                            <DictTag :value="row.bxdLx" :tag="false" :options="D_BZ_BXDLX" />
                        </template>
                        <template #controls="{ row }">
                            <el-link type="primary" @click="addEditPoint('edit', row)">编辑</el-link>
                            <el-link type="danger" @click="deleteRow(row)">删除</el-link>
                        </template>
                    </MyTable>
                </div>
            </div>
            <XfrwDialog v-else-if="stepActive == 2" @close="closeDialog" @saveFn="getXfrwInfo" />
            <div style="text-align:center;margin-top: 10px;" v-if="stepActive == 0 || stepActive == 1">
                <el-button @click="closeDialog">取消 </el-button>
                <el-button @click="saveFn"> 下一步 </el-button>
            </div>
        </div>
    </el-dialog>
    <AddPoints ref="addPoint" @changeDxd="changeDxd" :dic="{ D_BZ_BXDLX }" />
</template>

<script setup>
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { ref, defineProps, defineEmits, reactive, onMounted, getCurrentInstance, nextTick, onUnmounted } from 'vue'
import GdMap from "@/components/GdMap/index.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import AddPoints from "./addPoints.vue";
import XfrwDialog from "./xfrwDialog.vue";
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();
const { D_BZ_BXDLX } = proxy.$dict("D_BZ_BXDLX");
const emits = defineEmits(["update:modelValue", 'closeDialog']);
const props = defineProps({
    isShow: Boolean
})
const addPoint = ref();
const stepActive = ref(0)
const listQuery = ref({
    bxds: []
})
const pageData = reactive({
    keyCount: 0,
    tableConfiger: {
        rowHieght: 61,
        showSelectType: "null",
    },
    tableHeight: 400,
    controlsWidth: 200,
    tableColumn: [
        { label: "巡逻点位名称", prop: "bxdMc" },
        { label: "经度", prop: "jd" },
        { label: "纬度", prop: "wd" },
        { label: "二维码", prop: "ewm", showSolt: true },
        { label: "巡逻点位类型", prop: "bxdLx", showSolt: true },
    ]
});
const mapShow = ref(false)
// 關閉
function closeDialog(params) {
    emits('update:modelValue', false)
    emits('closeDialog', false)
}
onMounted(() => {
    setTimeout(() => {
        mapShow.value = true
    }, 100);
    emitter.on("coordString", (res => {
        console.log(res, 'res');
        if (res?.flag == 'zdlx') listQuery.value.zb = res.coord;
    }))
})
// 详情
const addEditPoint = (type, row) => {
    if (!listQuery.value.zb) return proxy.$message.warning("请先选择巡逻路线");
    nextTick(() => {
        addPoint.value.init(type, row, listQuery.value.zb);
    });
};
// 删除
const deleteRow = (row) => {
    listQuery.value.bxds.splice(row, 1);
    emitter.emit("deletePointArea", 'lxdw');
    emitter.emit("removePlot", 'lxdw');
};
// 选择经纬度
const chooseJwd = (row) => {
    changeItem.value = row;
    emitter.emit("deletePointArea", 'bxd' + row.id);
    emitter.emit("removePlot", 'point' + row.id);
    emitter.emit("drawShape", { type: 'point', flag: 'point' + row.id });
};
// 选择巡逻路线
const chackLat = (type, flag) => {
    emitter.emit("removeAll");
    emitter.emit("removePlot", flag);
    listQuery.value.zb = [];
    emitter.emit("drawShape", { type, flag, isclear: true })
}
// 保存
const saveFn = () => {
    switch (stepActive.value) {
        case 0:
            if (!listQuery.value.zb) proxy.$message.warning("请先规划路线");
            else stepActive.value++
            break
        case 1:
            if (!listQuery.value.bxds || listQuery.value.bxds.length == 0) proxy.$message.warning("请先新增巡逻点位");
            else stepActive.value++
            break
    }
}
// 提交数据
const getXfrwInfo=(val)=>{
    let params={...val,...listQuery.value}
    qcckPost(params,"/mosty-jmxf/jbldBxx/addBxxBxd").then(res=>{
        proxy.$message.success("新增成功");
        closeDialog()
    })
}
// 新增或者编辑比巡店
const changeDxd = (val) => {
    if (val.type == 'add') {
        listQuery.value.bxds.push(val.data);
    } else {
        let index = listQuery.value.bxds.findIndex(item => item.id == val.data.id);
        listQuery.value.bxds.splice(index, 1, val.data);
    }
    listQuery.bxdsl = listQuery.value.bxds.length;
    pageData.keyCount++;
};
onUnmounted(() => {
    emitter.off("coordString");
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.my-header {
    background: url("~@/assets/images/add-title.png") no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
    padding: 0 10px 0 20px;
    box-sizing: border-box;
    font-size: 30px;

    .left {
        display: flex;
        align-items: center;

        span {
            font-family: "HANYILINGXINTIJIAN";
        }
    }
}

.contant-dialog {
    padding: 10px 20px;
    box-sizing: border-box;
}

.el-form {
    max-height: 60vh;
    overflow: hidden;
}

::v-deep.el-input__inner {
    color: #000;
}

.mapBox {
    width: 100%;
    height: 400px;
    overflow: hidden;
}
</style>
<style lang="scss">
.zdlx_dialog {
    .el-dialog__header {
        padding: 0;
    }
}
</style>