<template>
  <el-dialog :title="title" v-model="showDialog" width="80%" @close="closeDialog">
    <el-row :gutter="20">
      <el-col :span="18">
        <mapSetting height="60vh"  :imgUrl="data.mapUrl" :mapId="data.mapId" :value="data.parkingList" @change="getInitData"></mapSetting>
      </el-col>
      <el-col :span="6">
        <el-radio-group v-model="showType">
          <el-radio-button label="未绑定"></el-radio-button>
          <el-radio-button label="全部"></el-radio-button>
        </el-radio-group>
        <el-table :data="showType=='全部'?allData:unMapData"  border
                  style="margin-top: 10px;border: #8c939d 1px solid;height: 60vh" highlight-current-row>
          <el-table-column prop="parkingNumber" label="车位编号"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import request from "/@/api/request";
import { parking, building } from "/@/api/controllerUrls";
import mapSetting from "./mapSetting.vue";

let showDialog = ref(false);

defineExpose({
  open
});

let data = ref({});

let showType = ref("未绑定");
let allData = ref([]);
let unMapData = ref([]);
let buildingId = ref('')

function open(event) {
  buildingId.value = event
  getInitData();
  showDialog.value = true;
}


let title = ref("");

function getInitData() {
  request.index(building, {
    id: buildingId.value
  }, "detail").then((res) => {
    if (res.code == 1) {
      console.log(res.data);
      title.value = `${res.data.districtName} / ${res.data.communityName} / ${res.data.buildingNumber}`;
      data.value = res.data;
      allData.value = res.data.parkingList;
      unMapData.value = [];
      for (let i in allData.value) {
        if (allData.value[i].mapId == 0) {
          unMapData.value.push(allData.value[i]);
        }
      }
    }
  });
}

const emit =defineEmits(['close'])
function closeDialog(){
  emit('close')
}


</script>
<style scoped lang="scss">


</style>
