<template>
  <div v-if="action === 'show' && thirdparty !== null">
    <div class="flex-table">
      <third-party-render-box
        :thirdparty="thirdparty"
        :options="{
          addInfo: true,
          addEntity: true,
          entityDisplayLong: true,
          addId: true,
          addLink: false,
          hLevel: 3,
          isMultiline: true,
        }"
      />
    </div>
  </div>
  <div
    v-else-if="
      action === 'edit' || action === 'create' || action === 'addContact'
    "
  >
    <ThirdPartyEdit
      :id="id"
      :type="type"
      :action="action"
      :query="query"
      :parent="parent"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import ThirdPartyRenderBox from "../Entity/ThirdPartyRenderBox.vue";
import ThirdPartyEdit from "./ThirdPartyEdit.vue";
import { getThirdparty } from "../../_api/OnTheFly";
import { Thirdparty, ThirdpartyCompany } from "../../../types";

interface ThirdPartyProp {
  id: number;
  type: "thirdparty";
  action: "show" | "edit" | "create";
  parent?: null;
}
interface ThirdPartyAddContact {
  id: number;
  type: "thirdparty";
  action: "addContact";
  parent: ThirdpartyCompany;
}

type ThirdPartyProps = ThirdPartyProp | ThirdPartyAddContact;

const props = withDefaults(defineProps<ThirdPartyProps>(), {
  parent: null,
});

const thirdparty = ref<Thirdparty | null>(null);

async function loadData() {
  thirdparty.value = await getThirdparty(props.id);
}

onMounted(() => {
  if (props.action === "show" && props.id) {
    loadData();
  }
});
</script>

<style lang="scss" scoped>
div.flex-table {
  div.item-bloc {
    div.item-row {
      div.item-col:last-child {
        justify-content: flex-start;
      }
    }
  }
}
dl {
  dd {
    margin-left: 1em;
  }
}
.parent-info {
  margin-bottom: 1rem;
}

.child-info {
  display: flex;
  justify-content: space-between;
  .input-section {
    width: 49%;
  }
}
</style>
