<template>
  <el-dialog title="车位详情" v-model="showDialog" width="800px">
    <el-descriptions
      class="margin-top"
      :title="'车位编号：'+data.parkingNumber"
      :column="3"
      border
    >
      <el-descriptions-item width="250px" label="区县">
        {{ data.districtName }}
      </el-descriptions-item>
      <el-descriptions-item width="250px" label="小区">
        {{ data.communityName }}
      </el-descriptions-item>
      <el-descriptions-item width="250px" label="楼号">
        {{ data.buildingNumber }}
      </el-descriptions-item>
      <el-descriptions-item label="车位类型">
        {{ data.parkingType == 1 ? "车库" : "车位" }}
      </el-descriptions-item>
      <el-descriptions-item label="面积">
        {{ data.area }}
      </el-descriptions-item>
      <el-descriptions-item label="售卖方式">
        <el-tag style="margin: 0px 3px" v-if="data.isSale==1">出售</el-tag>
        <el-tag style="margin: 0px 3px" v-if="data.isHire==1">出租</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="售价">
        {{ data.isSale == 1 ? data.salePrice : "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="租金">
        {{ data.isHire == 1 ? data.hirePrice : "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="销售情况">
        <el-tag type="info" style="margin: 0px 3px" v-if="data.isSale==1&&data.saleStatus==1">已售</el-tag>
        <el-tag type="success" style="margin: 0px 3px" v-if="data.isSale==1&&data.saleStatus==0">待售</el-tag>
        <el-tag type="info" style="margin: 0px 3px" v-if="data.isHire==1&&data.hireStatus==1">已租</el-tag>
        <el-tag type="success" style="margin: 0px 3px" v-if="data.isHire==1&&data.hireStatus==0">待租</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="地图标记">
        {{ data.mapId == 0 ? "未标记" : "已标记" }}
      </el-descriptions-item>
    </el-descriptions>
    <parkingView v-if="data.mapId !=0" ref="parkingViewRef" style="margin-top: 20px" :imgUrl="data.mapUrl"
                 :mapId="data.mapId"
                 :value="[data]"></parkingView>

  </el-dialog>
</template>

<script setup>

import { ref } from "vue";
import parkingView from "./parkingView.vue";

let showDialog = ref(false);


defineExpose({
  open
});

let parkingViewRef = ref();
let data = ref({});

function open(event) {
  let e = Object.assign({}, event);
  data.value = e;
  showDialog.value = true;
  setTimeout(() => {
    if (data.value.mapId != 0) {
      parkingViewRef.value.setImgSize(e.mapUrl);
    }
  }, 100);
}

</script>

<style scoped>

</style>
