<template>
    <div>
        <el-dialog
            v-model="dialogVisible"
            width="90%"
        >
            <div>
                <div class="dialog-map" ref="areaRef"></div>
                <div class="dialog-content service-wrap">
                    <div class="service-item" v-for="(item, i) in boxList" :key="i">
                        <div class="service-l">
                            <img class="service-img" :src="item.icon" />
                            {{ item.userName || "农服" }}
                        </div>
                        <div class="service-c">{{ item.userType === 1 ? (item.area || 50) + '亩' : (item.serviceType == 1 ? "技术类" : "劳力类") }}</div>
                        <div class="service-r">
                            <!-- <el-checkbox
                                :true-value="1"
                                :false-value="0"
                                v-model="item.selected"
                                size="large"
                            /> -->
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">
                一键提醒
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import eventBus from '@/api/eventBus';
import { onMounted, ref } from 'vue';
import AreMap from "../areaMap";

const areaRef = ref();
const dialogVisible = ref(false)
onMounted(() => {
    
})

const boxList = ref([])
let areMap = null
const handleEvent = (data) => {
    boxList.value = data
    dialogVisible.value = true
    setTimeout(() => {
        if (!areMap) {
            areMap = new AreMap();
            areMap.initMap("POINT(113.1093017627431 22.574540836684672)", areaRef.value);
            areMap.setPoints(data.filter((item) => item.userType === 1).map((item) => item.point));
        }
}, 100)
}
eventBus.on("enterBox:showDialog", handleEvent)
</script>

<style lang="scss" scoped>
.dialog-map {
    width: 100%;
    height: 150px;
}
.service-wrap {
                padding: 12px 0;
                .service-item {
                    margin-top: 8px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #DDDDDD;
                    padding: 0 12px;
                    height: 48px;
                    color: #000000;
                    font-size: 14px;
                    border-radius: 8px;
                    .service-img {
                        width: 32px;
                        margin-right: 8px;
                        border-radius: 50%;
                    }
                    .service-c {
                        flex: 1;
                        text-align: center;
                        color: #666666;
                    }
                }
                .service-bottom {
                    padding-top: 12px;
                    .service-btn {
                        padding-top: 12px;
                        width: 100%;
                        .btn {
                            width: 100%;
                        }
                    }
                }
            }
</style>