<template>
  <div class="edit">
    <NavBar v-on:export="createPdf" v-on:share="$buefy.dialog.alert('Ještě není naimplementováno')" />
    <div class="document container has-text-left mt-6">
      <div class="columns mb-3">
        <div class="column is-two-thirds">
        </div>
        <div class="column">
          <p class="soud has-text-weight-bold">
            {{ zaloba.soud.nazev }}<br>
            {{ zaloba.soud.sidlo.uliceacislopopisne }}<br>
            {{ zaloba.soud.sidlo.psc }} {{ zaloba.soud.sidlo.mesto }}
          </p>
        </div>
      </div>
      <div class="my-4">
        Žalobce:
        <div v-for="zalobce in zaloba.zalobci" :key="zalobce.rodnecisloneboico" class="zalobce mx-6 mt-3">
          {{ zalobce.jmeno }} {{ zalobce.prijmeni }}, rč. {{ zalobce.rodnecisloneboico }}<br>
          {{ zalobce.sidlo.uliceacislopopisne }}, {{ zalobce.sidlo.psc }} {{ zalobce.sidlo.mesto }}
          <div v-if="zalobce.zastoupen" class="mt-2">
            zastoupen:<br>
            <div class="mx-3 mt-1">
            {{ zalobce.zastoupen.jmeno }} {{ zalobce.zastoupen.prijmeni }}, ičo. {{ zalobce.zastoupen.rodnecisloneboico }}<br>
            {{ zalobce.zastoupen.sidlo.uliceacislopopisne }}, {{ zalobce.zastoupen.sidlo.psc }} {{ zalobce.zastoupen.sidlo.mesto }}
            </div>
          </div>
        </div>
      </div>
      <div class="my-4">
        Žalovaný:
        <div v-for="zalovan in zaloba.zalovani" :key="zalovan.rodnecisloneboico" class="zalobce mx-6 mt-3">
          {{ zalovan.jmeno }} {{ zalovan.prijmeni }}, rč. {{ zalovan.rodnecisloneboico }}<br>
          {{ zalovan.sidlo.uliceacislopopisne }}, {{ zalovan.sidlo.psc }} {{ zalovan.sidlo.mesto }}
          <div v-if="zalovan.zastoupen" class="mt-2">
            zastoupen:<br>
            <div class="mx-3 mt-1">
            {{ zalovan.zastoupen.jmeno }} {{ zalovan.zastoupen.prijmeni }}, ičo. {{ zalovan.zastoupen.rodnecisloneboico }}<br>
            {{ zalovan.zastoupen.sidlo.uliceacislopopisne }}, {{ zalovan.zastoupen.sidlo.psc }} {{ zalovan.zastoupen.sidlo.mesto }}
            </div>
          </div>
        </div>
      </div>
      <div class="mx-6">
        - {{ zaloba.cosleduje }}
      </div>
      <div class="mx-6 mt-4 has-text-weight-bold has-text-centered">
        {{ zaloba.title }}
      </div>
      <div>
        <Hlava v-for="(hlava,index) in zaloba.hlavy" :key="index" v-bind:index="index" v-bind:title.sync="hlava.nazev" v-bind:text.sync="hlava.text" v-on:deletehlava="deleteHlava" />
      </div>
      <b-button type="is-success" class="mt-3" v-on:click="addHlava" expanded>+</b-button>
      <div class="columns mb-3">
        <div class="column is-two-quarter">
        </div>
        <div class="column is-one-quarter has-text-centered mt-6">
          <div class="soud has-text-weight-bold">
            <hr style="border-color: black;background-color: black"><br>
            {{ zaloba.zalobci[0].jmeno }} {{ zaloba.zalobci[0].prijmeni }}<br>
            {{ zaloba.zalobci[0].sidlo.mesto }}, dne {{ zaloba.datum }}
          </div>
        </div>
      </div>
    </div>
    <button v-on:click="createPdf">Generate a PDF</button>
    <iframe :src="pdfSrc" width="1000" height="1000" frameborder="0"></iframe>
  </div>
</template>

<style scoped>
@font-face {
    font-family: 'Source Serif Pro';
    src: url(/Source_Serif_Pro/SourceSerifPro-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Source Serif Pro';
    src: url(/Source_Serif_Pro/SourceSerifPro-Bold.ttf) format('truetype');
    font-weight: bold;
}

.document {
  border: 1px solid black;
  box-shadow: 3px 3px 3px;
  min-height: 100vh;
  padding: 10%;
  font-family: 'Source Serif Pro', sans;
}
</style>

<script>
import NavBar from '@/components/edit/NavBar.vue'
import Hlava from '@/components/edit/Hlava.vue'
import Guide from '@/components/edit/Guide.vue'

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

export default {
  name: 'Edit',
  components: {
    NavBar,
    Hlava
  },
  created: function () {
    if (!this.modalOpen) {
    var that = this
    this.$buefy.modal.open({
                    parent: this,
                    component: Guide,
                    hasModalCard: true,
                    trapFocus: true,
                    canCancel: false,
                    events: {"zalobaguideclose": function (zaloba) {that.zaloba = {...zaloba}}}
                })
      this.modalOpen = true
    }
  },
  data: () => {
    return {
      pdfSrc: "",
      modalOpen: false,
      zalobaSetup: false,
      zaloba: {
                soud: {
                        nazev: "",
                        sidlo: {
                                uliceacislopopisne: "",
                                mesto: "",
                                psc: "",
                                stat: ""
                            }
                    },
                zalobci: [{
                    rod: "",
                    jmeno: "",
                    prijmeni: "",
                    sidlo: {
                        uliceacislopopisne: "",
                        mesto: "",
                        psc: "",
                        stat: ""
                    },
                    rodnecisloneboico: "",
                    zastoupen: {
                        rod: "",
                        jmeno: "",
                        prijmeni: "",
                        sidlo: {
                            uliceacislopopisne: "",
                            mesto: "",
                            psc: "",
                            stat: ""
                        },
                        rodnecisloneboico: "" 
                    }
                }],
                zalovani: [],
                hlavy: [],
                datum: "",
                cosleduje: "",
                title: ""
            }
    }
  },
  methods: {
    addHlava: function () {
      this.zaloba.hlavy.push({"title":"","text":""})
    },
    deleteHlava: function (index) {
      this.zaloba.hlavy.splice(index, 1)
    },
    createPdf: function () {
      const dd = {
        content: [
          {
            text: this.zaloba.soud.nazev,
            style: 'adresa'
          },
          {
            text: this.zaloba.soud.sidlo.uliceacislopopisne,
            style: "adresa"
          },
          {
            text: this.zaloba.soud.sidlo.psc + " " + this.zaloba.soud.sidlo.mesto,
            style: "adresa"
          },


          {
            text: this.zaloba.title,
            style: "bigtitle"
          },


          {
            text: this.zaloba.zalobci.length === 1 ? "Žalobce: " : "Žalobci: "
          },
          ...this.zaloba.zalobci.map(e => [
            {
              text: `${e.jmeno} ${e.prijmeni}, rč.: ${e.rodnecisloneboico}`,
              style: "zalobce"
            },
            {
              text: `${e.sidlo.uliceacislopopisne}, ${e.sidlo.psc}, ${e.sidlo.mesto}`,
              style: "zalobce"
            },
            ...typeof e.zastoupen !== "undefined" ? [
              {
                text: "zastoupen: ",
                style: "zalobce"
              },
              {
                text: `${e.zastoupen.jmeno} ${e.zastoupen.prijmeni}, IČO: ${e.rodnecisloneboico}`,
                style: "zastupce"
              },
              {
                text: `${e.zastoupen.sidlo.uliceacislopopisne}, ${e.zastoupen.sidlo.psc}, ${e.zastoupen.sidlo.mesto}`,
                style: "zastupce"
              }
            ] : [{}],
            {
              text: "",
              style: "separator"
            }
          ]).flat(),

          {
            text: this.zaloba.zalobci.length === 1 ? "Žalovaný: " : "Žalovaní: "
          },
          ...this.zaloba.zalovani.map(e => [
            {
              text: `${e.jmeno} ${e.prijmeni}, rč.: ${e.rodnecisloneboico}`,
              style: "zalobce"
            },
            {
              text: `${e.sidlo.uliceacislopopisne}, ${e.sidlo.psc}, ${e.sidlo.mesto}`,
              style: "zalobce"
            },
            ...typeof e.zastoupen !== "undefined" ? [
              {
                text: "zastoupen: ",
                style: "zalobce"
              },
              {
                text: `${e.zastoupen.jmeno} ${e.zastoupen.prijmeni}, IČO: ${e.rodnecisloneboico}`,
                style: "zastupce"
              },
              {
                text: `${e.zastoupen.sidlo.uliceacislopopisne}, ${e.zastoupen.sidlo.psc}, ${e.zastoupen.sidlo.mesto}`,
                style: "zastupce"
              }
            ] : [{}],
            {
              text: "",
              style: "separator"
            }
          ]).flat(),

          {
            text: this.zaloba.title,
            style: "smalltitle"
          },
          ...this.zaloba.hlavy.map(e => [
            {
              text: e.nazev,
              style: "smalltitle"
            },
            {
              text: e.text
            }
          ]).flat(),


          {
            text: "_____________________",
            color: "#fff",
            alignment: "right",
            margin: [0, 50, 0, 0],
            decoration: "underline",
            decorationColor: "#000"
          },
          {
            text: `${this.zaloba.zalobci[0].jmeno} ${this.zaloba.zalobci[0].prijmeni}`,
            alignment: "right",
            margin: [0, 10, 0, 0]
          },
          {
            text: `${this.zaloba.zalobci[0].sidlo.mesto}, dne ${this.zaloba.datum}`,
            alignment: "right",
          },

        ],
        defaultStyle: {
          font: 'SourceSerifPro'
        },
        styles: {
          adresa: {
            bold: true,
            alignment: "right"
          },
          zalobce: {
            margin: [15, 0, 0, 0]
          },
          zastupce: {
            margin: [20, 0, 0, 0]
          },
          separator: {
            margin: [0,16,0,0]
          },
          bigtitle: {
            fontSize: 20,
            bold: true,
            alignment: "center",
            margin: [0,16,0,16]
          },
          smalltitle: {
            bold: true,
            alignment: "center",
            margin: [0, 10, 0, 10]
          }
        }
      }
      pdfMake.fonts = {
        SourceSerifPro: {
          normal: location.origin + "/Source_Serif_Pro/SourceSerifPro-Regular.ttf",
          bold: location.origin + "/Source_Serif_Pro/SourceSerifPro-Bold.ttf",
          italics: location.origin + "/Source_Serif_Pro/SourceSerifPro-Italic.ttf",
          bolditalics: location.origin + "/Source_Serif_Pro/SourceSerifPro-BoldItalic.ttf",
        }
      }
      pdfMake.createPdf(dd).getDataUrl((dataUrl) => {
        this.pdfSrc = dataUrl;
      });

    }
  }
}
</script>
