<template>
  <div class="gt-card brand-forms--card df-center">
    <cut-line
      :card-width="scaledValue(width, false)"
      :card-height="scaledValue(height, false)"
      :size="scaledValue(cutLines, false)"
    >
      <table
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
        :style="{ width: scaledValue(width), height: scaledValue(height) }"
      >
        <tr>
          <td>
            <table
              border-spacing="0"
              border-collapse="collapse"
              cellspacing="0"
            >
              <tr>
                <td :style="{ width: scaledValue(6) }" />
                <td :style="{ height: scaledValue(15) }" />
                <td :style="{ width: scaledValue(6) }" />
              </tr>

              <tr>
                <td :style="{ width: scaledValue(8) }">
                  <p />
                </td>

                <td>
                  <img
                    v-if="showImage"
                    data-base64="true"
                    :src="imageTemplate"
                    :style="{ maxHeight: scaledValue(71) }"
                  />
                </td>

                <td :style="{ width: scaledValue(8) }">
                  <p />
                </td>
              </tr>

              <tr>
                <td :style="{ width: scaledValue(6) }" />
                <td :style="{ height: scaledValue(11.5) }" />
                <td :style="{ width: scaledValue(6) }" />
              </tr>
            </table>
          </td>
        </tr>

        <tr :style="{ background: '#2f4957' }">
          <td :style="{ height: scaledValue(17) }">
            <table
              :style="{ height: scaledValue(17) }"
              border-spacing="0"
              border-collapse="collapse"
              cellspacing="0"
            >
              <tr>
                <td
                  :style="{ width: scaledValue(17.5), height: scaledValue(1) }"
                />
                <td
                  :style="{ width: scaledValue(45), height: scaledValue(1) }"
                />
                <td
                  :style="{ width: scaledValue(17.5), height: scaledValue(1) }"
                />
              </tr>

              <tr>
                <td :style="{ width: scaledValue(17) }">
                  <p />
                </td>

                <td :style="{ width: scaledValue(45) }">
                  <img
                    data-base64="true"
                    src="../../../../../assets/img/brand-forms/card/kyriad/logo.png"
                    :style="{ width: scaledValue(37) }"
                  />
                </td>
                <td :style="{ width: scaledValue(14.5) }">
                  <p />
                </td>
              </tr>

              <tr>
                <td
                  :style="{ width: scaledValue(17.5), height: scaledValue(1) }"
                />

                <td
                  :style="{ width: scaledValue(45), height: scaledValue(1) }"
                />

                <td
                  :style="{ width: scaledValue(17.5), height: scaledValue(1) }"
                />
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </cut-line>

    <cut-line
      :card-width="scaledValue(width, false)"
      :card-height="scaledValue(height, false)"
      :size="scaledValue(cutLines, false)"
    >
      <table
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
        :style="{
          width: scaledValue(width),
          height: scaledValue(height),
          background: '#fff',
          position: 'relative',
          textAlign: 'center'
        }"
      >
        <tr>
          <td
            :style="{
              height: scaledValue(
                getItemValue('phone') && getItemValue('cellphone') ? 8 : 20
              )
            }"
          />
        </tr>

        <tr>
          <td>
            <p
              v-if="getItemValue('fullname')"
              :style="{
                fontFamily: 'Knockout-31JuniorMiddlewt',
                fontSize: scaledValue(8),
                color: colorTemplate,
                margin: 0,
                fontWeight: 400
              }"
            >
              {{ getItemValue('fullname') }}
            </p>

            <p
              v-if="getItemValue('function')"
              :style="{
                fontFamily: 'Knockout-31JuniorMiddlewt',
                fontSize: scaledValue(6),
                color: colorTemplate,
                margin: 0,
                fontWeight: 400
              }"
            >
              {{ getItemValue('function') }}
            </p>
          </td>
        </tr>

        <tr>
          <td>
            <p
              v-if="getItemValue('email')"
              :style="{
                fontFamily: 'Knockout-31JuniorMiddlewt',
                fontSize: scaledValue(6),
                color,
                margin: 0,
                fontWeight: 400
              }"
            >
              {{ getItemValue('email') }}
            </p>

            <p
              v-if="getItemValue('phone')"
              :style="{
                fontFamily: 'Knockout-31JuniorMiddlewt',
                fontSize: scaledValue(6),
                color,
                margin: 0,
                fontWeight: 400
              }"
            >
              Tel. : {{ getItemValue('phone') }}
            </p>

            <p
              v-if="getItemValue('cellphone')"
              :style="{
                fontFamily: 'Knockout-31JuniorMiddlewt',
                fontSize: scaledValue(6),
                color,
                margin: 0,
                fontWeight: 400
              }"
            >
              {{ $_currentLang === 'en' ? 'Mob' : 'Port' }}. :
              {{ getItemValue('cellphone') }}
            </p>
          </td>
        </tr>

        <tr>
          <td :style="{ height: scaledValue(10) }" />
        </tr>

        <tr>
          <td>
            <p
              v-if="getItemValue('hotel')"
              :style="{
                fontFamily: 'Knockout-31JuniorMiddlewt',
                fontSize: scaledValue(8),
                color: colorTemplate,
                margin: 0,
                fontWeight: 400
              }"
            >
              {{ getItemValue('hotel') }}
            </p>
            <p
              v-if="getItemValue('address')"
              :style="{
                fontFamily: 'Knockout-31JuniorMiddlewt',
                fontSize: scaledValue(6),
                color,
                margin: 0,
                fontWeight: 400
              }"
            >
              {{ getItemValue('address') }}
            </p>
          </td>
        </tr>

        <tr>
          <td :style="{ height: scaledValue(15) }" />
        </tr>

        <tr>
          <td :style="{ textAlign: 'center' }">
            <p
              :style="{
                fontFamily: 'Knockout-51Middleweight',
                fontSize: scaledValue(6.5),
                color,
                margin: 0,
                fontWeight: 400
              }"
            >
              KYRIAD.COM
            </p>
          </td>
        </tr>

        <tr>
          <td :style="{ height: scaledValue(3) }" />
        </tr>
      </table>
    </cut-line>
  </div>
</template>

<script>
import templateMixin from '../../../mixins/template-mixin'
import CutLine from '../../../utils/CutLine'

import imageA from '../../../../../assets/img/brand-forms/card/kyriad/a.png'
import imageB from '../../../../../assets/img/brand-forms/card/kyriad/b.png'
import imageC from '../../../../../assets/img/brand-forms/card/kyriad/c.png'

export default {
  name: 'CardTemplate',
  components: {
    CutLine
  },
  mixins: [templateMixin],
  data() {
    return {
      width: 82.5,
      height: 135,
      color: '#2c3e50',
      showImage: true
    }
  },
  computed: {
    colorTemplate() {
      if (this.getItemValue('template') === 'a') {
        return '#5faeda'
      } else if (this.getItemValue('template') === 'b') {
        return '#67c2cf'
      } else {
        return '#7495b5'
      }
    },
    imageTemplate() {
      this.showImage = false

      if (this.getItemValue('template') === 'a') {
        return imageA
      } else if (this.getItemValue('template') === 'b') {
        return imageB
      } else {
        return imageC
      }
    }
  },
  watch: {
    showImage(value) {
      if (!value) {
        this.$nextTick(() => {
          this.showImage = true
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@use '../../../brands-utils/kyriad' as *;
</style>
