<script>
export default {
  name: "TableView",
  props: {
    title: {
      type: String,
      default: "表格"
    },
    // th是否居中
    thCenter: {
      type: Boolean,
      default: true
    },
    options: {
      type: Object,
      default: () => {
        return {
          rows: [
            {
              row: [
                {
                  name: "选项",
                  value: "value",
                  height: 1
                }
              ]
            },
            {
              row: [

                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                }
              ]
            },
            {
              row: [

                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                }
              ]
            },

            {
              row: [

                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                }
              ]
            },


            {
              row: [

                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                },
                {
                  name: "选项",
                  value: "value",
                  height: 1
                }
              ]
            },
            {
              row: [
                {
                  name: "选项",
                  value: "value",
                  height: 10
                }
              ]
            },
          ]
        }
      }
    },
    dataId: {}
  },
  data() {
    return {

    };
  },
  computed: {
    // 根据row元素数量计算宽度
    thCenterStyle() {
      return this.thCenter ? { textAlign: "center" } : {};
    },
    // 根据row元素的height计算高度
  },
  methods: {
    rowClass(l){
      return "row"+l
    },
    rowHeight(v) {
      return { height: v.height * 40 + "px" };
    }
  },
}
</script>

<template>
  <div class="container">
    <h1> {{title}}</h1>
    <div v-for="(item, index) in options" :key="index">
      <div class="row" v-for="(value, key) in item" :key="key" :class="rowClass(value.row.length)">
        <div class="cell" v-for="(v, k) in value.row" :key="k" :style="rowHeight(v)">
          <span class="th" :style="thCenterStyle">
          {{ v.name }}
          </span>
          <span class="td">
            {{ v.value }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 1px solid #ccc;
  border-top:0px;
  margin:10px;
  h1{
    padding: 5px 10px;
    text-align: center;
    border-top: 1px solid #ccc;
  }
  .row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;


    .cell {
      height:40px;
      display: flex;
      width: 100%;

      span {
        display: inline-block;
        vertical-align: middle;
        padding: 10px 10px 10px 10px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
      }
      .th {
        background: #f5f7fa;
        border-left:0px;
      }
      .td{
        background: #ffffff;
        border-right: 1px solid #ccc;
      }

    }
  }
  .row1{
    .th {
      width: 12.5%*1;
    }
    .td{
      width: 12.5%*7;
    }
  }
  .row2{
    .th {
      width: 12.5%*2;
    }
    .td{
      width: 12.5%*6;
    }
  }
  .row3{
    .th {
      width: 12.5%*3;
    }
    .td{
      width:12.5%*5;
    }
  }
  .row4{
    .th {
      width: 12.5%*4;
    }
    .td{
      width: 12.5%*4;
    }
  }
  .row5{
    .th {
      width: 12.5%*5;
    }
    .td{
      width: 12.5%*3;
    }
  }
}

</style>