<template>
  <z-block>

    <z-tabs class="q-mb-s80">
      <z-tabs-item title="Demos">
        <div>
          <z-svg>
            <rect x="0" y="0" width="100" height="100" fill="#F00" />
            <g transform="translate(20, 20)">
              <path d="M50 50 L70 60 100 40Z" fill="#0F0" />
            </g>
          </z-svg>
          <codeblock>
            &lt;z-svg>
              &lt;rect x="0" y="0" width="100" height="100" fill="#F00" />
              &lt;g transform="translate(20, 20)">
                &lt;path d="M50 50 L70 60 100 40Z" fill="#0F0" />
              &lt;/g>
            &lt;/z-svg>
          </codeblock>
        </div>

        <div style="margin: 100px 0">
          <h3 class="text-medium text-heading">Zoombar</h3>
          <z-svg zoomable>
            <template v-slot:default="{ onePixel }">
              <rect x="0" y="0" width="100" height="100" fill="#F00" />
              <g transform="translate(20, 20)">
                <path d="M50 50 L70 60 100 40Z" fill="#0F0" stroke="#FFF" :stroke-width="onePixel * 2" />
              </g>
            </template>
          </z-svg>
          <codeblock>
            &lt;z-svg zoomable>
              ...
            &lt;/z-svg>
          </codeblock>
        </div>

        <div style="margin: 100px 0">
          <h3 class="text-medium text-heading">Linie & Text</h3>
          <z-svg zoomable>
            <template v-slot:default="{ slotDefs }">
              <rect x="0" y="0" width="100" height="100" fill="#66F" />
              <g transform="translate(10, 40)">
                <path d="M0 0 L80 0" stroke="#000" :stroke-width="slotDefs.onePixel * 2" />
                <text fill="#000" :style="`font-size:${slotDefs.onePixel * 20}px`">slotDefs.onePixel: {{ Number(slotDefs.onePixel).toFixed(3) }} (bleibt gleich gross)</text>
              </g>
              <g transform="translate(10, 60)">
                <path d="M0 0 L80 0" stroke="#000" stroke-width="2" />
                <text fill="#000" style="font-size:20px">2: zoomt mit</text>
              </g>
            </template>
          </z-svg>
          <codeblock>
            &lt;z-svg zoomable>
              &lt;template v-slot:default="{ slotDefs }">
                &lt;rect x="0" y="0" width="100" height="100" fill="#F00" />
                &lt;g transform="translate(10, 40)">
                  &lt;path d="M0 0 L80 0" stroke="#000" :stroke-width="slotDefs.onePixel * 2" />
                  &lt;text fill="#000" :style="`font-size:${slotDefs.onePixel * 20}px`">slotDefs.onePixel: { { slotDefs.onePixel }} (bleibt gleich gross)&lt;/text>
                &lt;/g>
                &lt;g transform="translate(10, 60)">
                  &lt;path d="M0 0 L80 0" stroke="#000" stroke-width="2" />
                  &lt;text fill="#000" style="font-size:20px">2: zoomt mit&lt;/text>
                &lt;/g>
              &lt;/template>
            &lt;/z-svg>
          </codeblock>
        </div>

        <div style="margin: 100px 0">
          <h3 class="text-medium text-heading">Download</h3>
          <z-svg zoomable ref="download">
            <rect x="0" y="0" width="100" height="100" fill="#F00" />
            <g transform="translate(20, 20)">
              <path d="M50 50 L70 60 100 40Z" fill="#0F0" />
            </g>
          </z-svg>
          <z-button label="download SVG" @click="$refs.download.download('karte', 'svg')" />
          <br>
          <z-button label="download PNG" @click="$refs.download.download('karte', 'png')" class="q-mt-xs" />
          <br>
          <z-button label="download JPEG" @click="$refs.download.download('karte', 'jpeg')" class="q-mt-xs" />
          <codeblock>
            &lt;z-svg zoomable ref="download">
              ...
            &lt;/z-svg>
            &lt;z-button label="download SVG" @click="$refs.download.download('karte', 'svg')" />
            &lt;z-button label="download PNG" @click="$refs.download.download('karte', 'png')" />
            &lt;z-button label="download JPEG" @click="$refs.download.download('karte', 'jpeg')" />
          </codeblock>
        </div>
      </z-tabs-item>
      <z-tabs-item title="Defs">
        <codedefs :data="[
          {
            name: 'z-svg',
            props: [
              { key: 'zoomable', type: 'Boolean', required: false, info: 'siehe unten', default: false },
              { key: 'ratio', type: 'Number', required: false, info: '4 / 5', default: 1 }
            ],
            slots: [
              { name: 'default', props: 'slotDefs', info: 'slotDefs = {<br>&nbsp;&nbsp;zoom,<br>&nbsp;&nbsp;onePixel,<br>&nbsp;&nbsp;width,<br>&nbsp;&nbsp;height<br>}<br><br><b style=\'color:#F00\'>!!! onePixel darf nicht für form (rect, path, ...) grössen verwendet werden da der Wert daraus berechnet wird !!!</b>', example: '<template v-slot:default=\'{ slotDefs }\'>\n {{ slotDefs }}\n</template>' },
              { name: 'title', example: '<template v-slot:title>\n Title\n</template>' },
              { name: 'legend', example: '<template v-slot:legend>\n Legend\n</template>' }
            ],
            events: [
              { name: 'click', info: 'Gibt den click event zurück', example: '' }
            ],
            functions: [
              { name: 'download', info: 'type = \'svg\' | \'png\' | \'jpeg\'', example: '<z-svg ref=\'map\' />\ncode:\nthis.$refs.map.download(filename, type)' }
            ]
          }
        ]" />
      </z-tabs-item>
    </z-tabs>

  </z-block>
</template>

<script>
export default {
  name: 'dev-PageSvg',
  data () {
    return {
    }
  },
  components: {
    'codeblock': () => import('../Codeblock.vue'),
    'z-block': () => import('../../atom/ZBlock.vue'),
    'z-svg': () => import('../../atom/ZSvg.vue'),
    'z-button': () => import('../../atom/ZButton.vue'),
    'codedefs': () => import('../CodeDefs.vue'),
    'z-tabs': () => import('../../atom/ZTabs.vue'),
    'z-tabs-item': () => import('../../atom/ZTabsItem.vue')
  }
}
</script>
