<template>
    <div class="ht-base-display-item">
        <slot name="title"></slot>
        <div class="ht-base-display-item-body">
            <template v-for="item in columns">
                <ht-base-row class-name="ht-base-display-item-title" :style="{fontSize: titleSize+'px'}">
                    <ht-base-col :span="getColSpan(item,tIndex)" v-for="(cItem,tIndex) in item" :key="tIndex" class-name="ht-base-display-item-card-col">{{cItem.title}}</ht-base-col>
                </ht-base-row>
                <ht-base-row class-name="ht-base-display-item-content">
                    <ht-base-col :span="getColSpan(item,cIndex)" v-for="(cItem,cIndex) in item" :key="cIndex" class-name="ht-base-display-item-card-col"><p :style="{fontSize: contentSize+'px'}">{{cItem.content}}</p></ht-base-col>
                </ht-base-row>
            </template>
        </div>
    </div>
</template>

<script>
  export default {
      name: 'HtBaseDisplayItem',
      props:{
          //note 传入的表单信息
          columns:{
              type:Array,
              default(){
                  return []
              }
          },
          //note 表单标题字体大小
          titleSize:{
              type:Number
          },
          //note 表单内容字体大小
          contentSize:{
              type:Number
          }
      },
      computed:{
          //note 计算传入所有行数中列数最大的
          maxCount(){
              let max = 0;
              this.columns.forEach((item)=>{
                  max = item.length>max?item.length:max;
              });
              return max;
          }
      },
      methods:{
          //note 计算栅格所占的份数
          getColSpan(item,index){
              let length = item.length;
              if(index===length-1){
                  return 24 - Math.ceil(24 / this.maxCount) * (length-1);
              }else{
                  return Math.ceil(24 / this.maxCount);
              }
          }
      }
  }
</script>
<style>
    .ht-base-display-item {

    }
</style>

