<template>
  <div class="card">
    <div class="row" style="min-height: 400px">
      <div class="col-md-8">
        <div class="card-header toolbar">
          <div class="toolbar-start">
            <template v-if="isCanBack == true">
              <button class="btn btn-light" @click="$router.go(-1)">
                <i class="pli-back fs-5"></i>
                <span class="d-none d-lg-inline-block ms-lg-2">Back</span>
              </button>
            </template>
            <slot name="action-e" :item="content"> </slot>
          </div>
        </div>
        <div class="card-body h-100 px-xl-3">
          <div class="list-group list-group-borderless gap-0 mb-0">
            <template v-for="item in schema">
              <slot v-if="item.type != 'map'" :name="item.value" v-bind="content">
                <template v-if="item.type != 'section'">
                  <ListField :label="item.label" :value="valueResolver(content, item.value, '.') ?? '-'"></ListField>
                </template>
                <template v-if="item.type == 'section'">
                  <div class="mb-4">
                    <h3 id="section-title">{{ item.label }}</h3>
                    <hr />
                    <template v-for="sectionItem in item.children">
                      <ListField :label="sectionItem.label" :value="valueResolver(content, sectionItem.value, '.') ?? '-'
                        "></ListField>
                    </template>
                  </div>
                </template>
              </slot>
            </template>
          </div>
        </div>
      </div>
      <template v-for="item in schema">
        <div v-if="item.type == 'map'" :class="`col-md-${item.cols != null ? item.cols : 4}`">
          <div class="card-body bg-light h-100 rounded text-white p-2">
            <MapViewer :long="valueResolver(content, item.long, '.') ?? 0"
              :lat="valueResolver(content, item.lat, '.') ?? 0" />
          </div>
        </div>
      </template>
      <div v-if="isExist == false" :class="`col-md-4 d-none d-lg-inline-block`">
        <div
          class="card-body bg-gray-600 h-100 rounded text-white text-center d-flex align-items-center justify-content-center">
          <i class="pli-letter-open" style="font-size: 200px"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { PropertySchema } from "@/types/property_schema";
const props = defineProps({
  schema: {
    type: Array<PropertySchema>,
    default: [],
  },
  content: {
    type: Object,
    default: {},
  },
  isCanBack: {
    type: Boolean,
    default: true,
  },
});

let isExist = false;
const exist = () => {
  props.schema.forEach((element) => {
    if (element.type == "map") {
      isExist = true;
    }
  });
};

const valueResolver = (obj: any, path: any, separator = ".") => {
  try {
    var properties = path.split(separator);
    return properties.reduce((prev: any, curr: any) => prev && prev[curr], obj);
  } catch (err) {
    return null;
  }
};

onBeforeMount(() => {
  exist();
});
</script>
