<template>
  <div class="table-texts mb-4 last:mb-0" :style="options.style">
    <div class="flex justify-start" v-for="(texts, index) in getDesc(options.desc)" :key="index">
      <td class="px-2 py-1" :style="getCellStyle(key)" v-for="(text, key) in texts" :key="key">{{ text }}</td>
    </div>
  </div>
</template>
<script>
import Base from './base';
import { mixinStyle } from './utils';

export default {
  name: 'v-table-texts',
  extends: Base,
  computed: {
    cellStyle() {
      const { vertical = 'top', cellStyle } = this.options;
      return mixinStyle({
        'vertical-align': vertical,
      }, cellStyle);
    },
  },
  methods: {
    getDesc( desc = '' ){
      if(Array.isArray(desc)) return desc;
      let table =  desc.split(';').map((item) => {
        return item.split('|')
      });
      return table;
    },
    getCellStyle(index){
      let  widths = ["0 0 60px", ""];
      let cellStyle = "";
      return mixinStyle({
        flex: widths[index],
      }, cellStyle);
    }
  }
}
</script>
