web/app/components/application/Contract.vue

<template>
  <div :id="docid">
    <!-- Loading state -->
    <div
      v-if="isLoading"
      class="has-text-centered mt-5 mb-5"
      style="min-height: 500px"
    >
      <button class="button is-primary is-loading is-large"></button>
      <p class="mt-4 has-text-primary has-text-weight-semibold">
        {{ isVietnamese ? "Đang tải hợp đồng..." : "Loading contracts..." }}
      </p>
    </div>

    <!-- No contract state -->
    <div
      v-else-if="!hasContracts"
      class="has-text-centered mt-5 mb-5"
      style="min-height: 500px"
    >
      <article class="message is-primary">
        <div
          class="message-body"
          style="font-size: 17px; text-align: left; color: black"
        >
          {{
            isVietnamese
              ? "Chưa có hợp đồng. Vui lòng tạo giao dịch và hợp đồng trước."
              : "No contract available. Please create transaction and contract first."
          }}
        </div>
      </article>
    </div>

    <!-- Contracts list -->
    <template v-else>
      <!-- Tabs khi có nhiều hợp đồng -->
      <div
        class="tabs border-bottom"
        id="ignore"
        v-if="contractsList.length > 1"
      >
        <ul class="tabs-list">
          <li
            class="tabs-item"
            style="border: none"
            v-for="(contract, index) in contractsList"
            :key="index"
            :class="{
              'bg-primary has-text-white': activeContractIndex === index,
            }"
            @click="switchContract(index)"
          >
            <a class="tabs-link">
              <span>{{ contract.document[0]?.name || contract.document[0]?.en || `Contract ${index + 1}` }}</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Contract content -->
      <div v-if="currentContract && pdfFileUrl && hasValidDocument">
        <div class="contract-content mt-2">
          <iframe
            :src="`https://mozilla.github.io/pdf.js/web/viewer.html?file=${pdfFileUrl}`"
            width="100%"
            height="90vh"
            scrolling="no"
            style="border: none; height: 75vh; top: 0; left: 0; right: 0; bottom: 0"
          >
          </iframe>
        </div>
      </div>

      <!-- Download buttons -->
      <div
        class="mt-4"
        id="ignore"
      >
        <button
          v-if="hasValidDocument"
          class="button is-primary has-text-white mr-4"
          @click="downloadDocx"
        >
          {{ isVietnamese ? "Tải file docx" : "Download contract as docx" }}
        </button>

        <button
          v-if="hasValidDocument"
          class="button is-primary has-text-white mr-4"
          @click="downloadPdf"
        >
          {{ isVietnamese ? "Tải file pdf" : "Download contract as pdf" }}
        </button>

        <p
          v-if="contractError"
          class="has-text-danger mt-2"
        >
          {{ contractError }}
        </p>
      </div>
    </template>
  </div>
</template>

<script>
import { useStore } from "@/stores/index";

export default {
  setup() {
    const store = useStore();
    return { store };
  },
  props: {
    contractId: {
      type: [Number, String],
      default: null,
    },
    row: {
      type: Object,
      default: null,
    },
    directDocument: {
      type: Object,
      default: null,
    },
  },
  emits: ["contractCreated", "update", "close", "dataevent"],
  data() {
    return {
      docid: this.$id(),
      contractsList: [],
      activeContractIndex: 0,
      isLoading: false,
      contractError: null,
      lang: this.store.lang,
      isVietnamese: this.store.lang === "vi",
      link: this.$getpath().indexOf("dev") >= 0 ? "dev.utopia.y99.vn" : "utopia.y99.vn",
      pdfFileUrl: undefined,
    };
  },
  computed: {
    hasContracts() {
      return this.contractsList && this.contractsList.length > 0;
    },
    currentContract() {
      return this.hasContracts ? this.contractsList[this.activeContractIndex] : null;
    },
    hasValidDocument() {
      if (!this.currentContract) return false;
      return (
        this.currentContract.document &&
        this.currentContract.document.length > 0 &&
        this.currentContract.document[0]?.pdf
      );
    },
  },
  async created() {
    try {
      this.isLoading = true;
      this.contractError = null;

      if (this.directDocument) {
        this.contractsList = [{ document: [this.directDocument] }];
        this.updatePdfUrl(0);
        return;
      }

      let contracts = [];
      let fetchParams = null;

      if (this.contractId) {
        fetchParams = { id: this.contractId };
      } else if (this.row?.id) {
        fetchParams = { transaction: this.row.id };
      }

      if (!fetchParams) {
        throw new Error(
          this.isVietnamese
            ? "Không có ID hợp đồng hoặc transaction để tải."
            : "No contract ID or transaction provided to load.",
        );
      }

      contracts = await this.$getdata("contract", fetchParams, undefined);

      if (!contracts || contracts.length === 0) {
        throw new Error(this.isVietnamese ? "Không tìm thấy hợp đồng." : "Contract not found.");
      }

      this.contractsList = contracts;
      console.log(this.contractsList);

      if (this.hasContracts) {
        this.updatePdfUrl(this.activeContractIndex);
      }
    } catch (error) {
      console.error("Error loading contracts:", error);
      this.contractError =
        error.message || (this.isVietnamese ? "Lỗi khi tải danh sách hợp đồng." : "Error loading contracts list.");
      this.contractsList = [];
    } finally {
      this.isLoading = false;
    }
  },
  methods: {
    updatePdfUrl(index) {
      const contract = this.contractsList[index];
      if (contract?.document && contract.document[0]?.pdf) {
        this.pdfFileUrl = `${this.$getpath()}download-contract/${contract.document[0].pdf}`;
      } else {
        this.pdfFileUrl = undefined;
      }
    },

    switchContract(index) {
      this.activeContractIndex = index;
      this.updatePdfUrl(index);
    },

    downloadDocx() {
      if (!this.hasValidDocument) {
        this.$snackbar(this.isVietnamese ? "Không có file để tải" : "No file to download", { type: "is-warning" });
        return;
      }

      const filename = this.currentContract.document[0].file;
      const url = `${this.$getpath()}download/?name=${filename}&type=contract`;
      this.$download(url, filename);
    },

    downloadPdf() {
      if (!this.hasValidDocument) {
        this.$snackbar(this.isVietnamese ? "Không có file để tải" : "No file to download", { type: "is-warning" });
        return;
      }

      const filename = this.currentContract.document[0].pdf;
      const url = `${this.$getpath()}download/?name=${filename}&type=contract`;
      this.$download(url, filename);
    },
  },
};
</script>

<style scoped>
.contract-content {
  max-width: 95%;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.5;
  font-family: "Times New Roman", serif;
  page-break-inside: avoid;
  break-inside: avoid;
}

.tabs {
  width: auto;
  margin-bottom: 0;
}

.tabs-list {
  border: none;
  transition: all 0.3s ease;
}

.tabs-item {
  transition: background-color 0.3s ease;
}

.tabs-item.bg-primary:hover a {
  color: white !important;
}

.tabs-link {
  padding: 6px 12px;
}

@media print {
  .contract-content {
    max-width: 100%;
  }
}
</style>