<template>
  <div class="vertical-text">
      <div class="vertical-row" v-for="(row, inx) in list" :key="`row-${inx}`" :style="getRowStyle(row)">
        <div class="vertical-col" v-for="(text, i) in row" :key="`col-${i}`" :style="colStyle">
          <span>{{ text }}</span>
        </div>
      </div>
  </div>
</template>

<script setup>
import { computed } from "@vue/runtime-core";

const props = defineProps({
  text: String,
  size: {
    type: Array,
    default: [26, 18],
  }
});

const colStyle = computed(() => {
  return { width: `${props.size[0]}px`, height: `${props.size[0]}px`, fontSize: `${props.size[1]}px` }
})

const list = computed(() => {
  const rows = (props.text || '').replace(/[\r\n]/g, '<br>').replace(/[\n]/g, '<br>').split('<br>');
  return rows.map(it => it.split(''));
});

const getRowStyle = (row = []) => {
  const width = Math.ceil(row.length / 8) * props.size[0];
  return { width: `${width}px` }
}

</script>

<style lang="less" scoped>
.vertical-text {
  width: 100%;
  height: 100%;
  text-align: right;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  flex-direction: row-reverse;

  // & > div {
  //   display: inline-block;
  //   height: 100%;
  // }

  .vertical-row {
    flex: none;
    display: flex;
    height: 100%;
    flex-direction: column;
    flex-wrap: wrap-reverse;
  }

  .vertical-col {
    flex: none;
  }
}
</style>

