<template>
  <div class="cut-line">
    <table
      :style="{ width: pxValue(cardWidth + size * 2), background }"
      border-spacing="0"
      border-collapse="collapse"
      cellspacing="0"
      cellpadding="0"
    >
      <tr :style="{ height: pxValue(size) }">
        <td :style="{ width: pxValue(size) }">
          <table
            border-spacing="0"
            border-collapse="collapse"
            cellspacing="0"
            cellpadding="0"
          >
            <tr
              :style="{
                width: pxValue(size),
                height: pxValue(size - lineWidth)
              }"
            >
              <td
                :style="{
                  width: pxValue(size - lineWidth),
                  height: pxValue(size - lineWidth)
                }"
              >
                <span />
              </td>

              <td
                :style="{
                  width: pxValue(lineWidth),
                  background: 'black',
                  height: pxValue(size - lineWidth)
                }"
              >
                <span />
              </td>
            </tr>

            <tr :style="{ height: pxValue(lineWidth) }">
              <td
                :style="{
                  width: pxValue(size - lineWidth),
                  height: pxValue(lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>

              <td
                :style="{
                  width: pxValue(lineWidth),
                  height: pxValue(lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>
            </tr>
          </table>
        </td>

        <td :style="{ width: pxValue(cardWidth) }">
          <span />
        </td>

        <td :style="{ width: pxValue(size) }">
          <table
            border-spacing="0"
            border-collapse="collapse"
            cellspacing="0"
            cellpadding="0"
          >
            <tr
              :style="{
                width: pxValue(size),
                height: pxValue(size - lineWidth)
              }"
            >
              <td
                :style="{
                  width: pxValue(lineWidth),
                  height: pxValue(size - lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>

              <td
                :style="{
                  width: pxValue(size - lineWidth),
                  height: pxValue(size - lineWidth)
                }"
              >
                <span />
              </td>
            </tr>

            <tr :style="{ height: pxValue(lineWidth) }">
              <td
                :style="{
                  width: pxValue(lineWidth),
                  height: pxValue(lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>

              <td
                :style="{
                  width: pxValue(size - lineWidth),
                  height: pxValue(lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr :style="{ height: pxValue(cardHeight) }">
        <td :style="{ width: pxValue(size) }">
          <span />
        </td>

        <td :style="{ width: pxValue(cardWidth) }">
          <slot />
        </td>

        <td :style="{ width: pxValue(size) }">
          <span />
        </td>
      </tr>

      <tr :style="{ height: pxValue(size) }">
        <td :style="{ width: pxValue(size) }">
          <table
            border-spacing="0"
            border-collapse="collapse"
            cellspacing="0"
            cellpadding="0"
          >
            <tr :style="{ height: pxValue(lineWidth) }">
              <td
                :style="{
                  width: pxValue(size - lineWidth),
                  height: pxValue(lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>

              <td
                :style="{
                  width: pxValue(lineWidth),
                  height: pxValue(lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>
            </tr>

            <tr
              :style="{
                width: pxValue(size),
                height: pxValue(size - lineWidth)
              }"
            >
              <td
                :style="{
                  width: pxValue(size - lineWidth),
                  height: pxValue(size - lineWidth)
                }"
              >
                <span />
              </td>

              <td
                :style="{
                  width: pxValue(lineWidth),
                  background: 'black',
                  height: pxValue(size - lineWidth)
                }"
              >
                <span />
              </td>
            </tr>
          </table>
        </td>

        <td :style="{ width: pxValue(cardWidth) }">
          <span />
        </td>

        <td :style="{ width: pxValue(size) }">
          <table
            border-spacing="0"
            border-collapse="collapse"
            cellspacing="0"
            cellpadding="0"
          >
            <tr :style="{ height: pxValue(lineWidth) }">
              <td
                :style="{
                  width: pxValue(lineWidth),
                  height: pxValue(lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>

              <td
                :style="{
                  width: pxValue(size - lineWidth),
                  height: pxValue(lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>
            </tr>

            <tr
              :style="{
                width: pxValue(size),
                height: pxValue(size - lineWidth)
              }"
            >
              <td
                :style="{
                  width: pxValue(lineWidth),
                  height: pxValue(size - lineWidth),
                  background: 'black'
                }"
              >
                <span />
              </td>

              <td
                :style="{
                  width: pxValue(size - lineWidth),
                  height: pxValue(size - lineWidth)
                }"
              >
                <span />
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'cut-line',
  props: {
    cardWidth: {
      type: Number,
      default: 285
    },
    cardHeight: {
      type: Number,
      default: 285
    },
    size: {
      type: Number,
      size: 15
    },
    background: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      lineWidth: 5
    }
  },
  computed: {
    pxValue() {
      return value => `${value}px`
    }
  }
}
</script>
