<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)"
      :background="tplData.color"
    >
      <table
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
        :style="{
          width: scaledValue(width),
          background: tplData.color,
          height: scaledValue(height)
        }"
      >
        <tr>
          <td
            :style="{
              height: scaledValue(
                (getItemValue('expression-1') || '').length > 12 ||
                  (getItemValue('expression-2') || '').length > 12
                  ? 18
                  : 40
              ),
              width: scaledValue(width)
            }"
          />
        </tr>

        <tr :style="{ verticalAlign: 'middle' }">
          <table>
            <td
              :style="{
                width: scaledValue(firstCardMarginWidth / 3.5 || 64)
              }"
            >
              <span />
            </td>

            <td>
              <p
                :style="{
                  color:
                    tplData.color === tplData.yellow
                      ? tplData.blue
                      : tplData.yellow,
                  fontWeight: 500,
                  fontFamily: 'Dala Floda',
                  fontSize: scaledValue(40),
                  margin: 0,
                  lineHeight: 0.9,
                  height: scaledValue(
                    (getItemValue('expression-1') || '').length > 12 ||
                      (getItemValue('expression-2') || '').length > 12
                      ? 140
                      : 78
                  )
                }"
              >
                {{ getItemValue('expression-1') }}<br />
                {{ getItemValue('expression-2') }}
              </p>
            </td>

            <td :style="{ width: scaledValue(50) }"><span /></td>
          </table>
        </tr>

        <tr>
          <td
            :style="{
              height: scaledValue(
                (getItemValue('expression-1') || '').length > 12 ||
                  (getItemValue('expression-2') || '').length > 12
                  ? 18
                  : 30
              ),
              width: scaledValue(width)
            }"
          />
        </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'
        }"
      >
        <tr :style="{ verticalAlign: 'middle' }">
          <td :style="{ width: scaledValue(38) }">
            <span />
          </td>

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

              <tr>
                <td>
                  <p
                    v-if="getItemValue('fullname')"
                    :style="{
                      fontFamily: 'Dala Floda',
                      fontSize: scaledValue(15),
                      color: '#2c3e50',
                      margin: 0,
                      fontWeight: 500
                    }"
                  >
                    {{ getItemValue('fullname') }}
                  </p>

                  <p
                    v-if="getItemValue('title')"
                    class="gt-card__title"
                    :style="{
                      fontFamily: 'Metric',
                      fontSize: scaledValue(9),
                      color: '#2c3e50',
                      margin: 0,
                      fontWeight: 400
                    }"
                  >
                    {{ getItemValue('title') }}
                  </p>
                </td>
              </tr>

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

              <tr>
                <td>
                  <p
                    v-if="getItemValue('email')"
                    class="gt-card__email"
                    :style="{
                      fontFamily: 'Metric',
                      fontSize: scaledValue(9),
                      color: '#2c3e50',
                      margin: 0,
                      fontWeight: 400
                    }"
                  >
                    {{ getItemValue('email') }}
                  </p>

                  <p
                    v-if="getItemValue('phone')"
                    class="gt-card__phone"
                    :style="{
                      fontFamily: 'Metric',
                      fontSize: scaledValue(9),
                      color: '#2c3e50',
                      margin: 0,
                      fontWeight: 400
                    }"
                  >
                    {{ getItemValue('phone') }}
                  </p>

                  <p
                    v-if="getItemValue('cellphone')"
                    class="gt-card__phone"
                    :style="{
                      fontFamily: 'Metric',
                      fontSize: scaledValue(9),
                      color: '#2c3e50',
                      margin: 0,
                      fontWeight: 400
                    }"
                  >
                    {{ getItemValue('cellphone') }}
                  </p>
                </td>
              </tr>

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

              <tr>
                <td>
                  <p
                    v-if="getItemValue('address')"
                    class="gt-card__address"
                    :style="{
                      fontFamily: 'Metric',
                      fontSize: scaledValue(9),
                      color: '#2c3e50',
                      margin: 0,
                      fontWeight: 400
                    }"
                  >
                    {{ getItemValue('hotel') }}<br />
                    <span>{{ getItemValue('address') }}</span>
                  </p>
                </td>
              </tr>

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

              <tr>
                <td>
                  <p
                    class="gt-card__brand"
                    :style="{
                      fontFamily: 'Metric',
                      fontSize: scaledValue(9),
                      color: '#2c3e50',
                      margin: 0,
                      fontWeight: 400
                    }"
                  >
                    goldentulip.com
                  </p>
                </td>
              </tr>
            </table>
          </td>

          <td
            id="logo-container"
            :style="{ width: scaledValue(90), verticalAlign: 'center' }"
          >
            <table
              border-spacing="0"
              border-collapse="collapse"
              cellspacing="0"
            >
              <tr>
                <td :style="{ height: scaledValue(162) }" />
              </tr>

              <tr>
                <table
                  border-spacing="0"
                  border-collapse="collapse"
                  cellspacing="0"
                >
                  <td>
                    <img
                      :style="{ width: scaledValue(90) }"
                      data-base64="true"
                      src="../../../../../assets/img/brand-forms/card/golden-tulip/logo.jpg"
                    />
                  </td>

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

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

export default {
  name: 'CardTemplate',
  components: {
    CutLine
  },
  mixins: [templateMixin],
  data() {
    return {
      width: 285,
      height: 186
    }
  },
  computed: {
    expressionsByLength() {
      return [
        this.getItemValue('expression-1'),
        this.getItemValue('expression-2')
      ].sort(function (a, b) {
        return b?.length - a?.length || []
      })
    },
    firstCardMarginWidth() {
      return (997 - this.expressionsByLength?.[0]?.length * 70) / 2
    }
  }
}
</script>

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

.logo-container {
  vertical-align: bottom !important;
}
</style>
