<template>
  <div>
    <!--纵向表格设计-->
    <el-row>
      <!--纵向表头设计-->
      <el-col class="borderLine" :span="6">
        <el-row>
          <div :style="projectDivStyle">
            <p>项目名</p>
          </div>
        </el-row>
        <el-row>
          <div :style="wordOfMouthIOSDivStyle">
            <p>AppStore口碑指数</p>
          </div>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div :style="wordOfMouthIOSDivStyle">
              <p>评分</p>
            </div>
          </el-col>
          <el-col :span="12">
            <el-row v-for="(chl, i) in tableData.ratingChls" :key="i">
              <div :style="ratingSubDivStyle">
                <p>{{ chl }}</p>
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div :style="rankDivStyle">
              <p>排名</p>
            </div>
          </el-col>
          <el-col :span="12">
            <el-row v-for="(chl, i) in tableData.rankChls" :key="i">
              <div :style="rankSubDivStyle">
                <p>{{ chl }}</p>
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <div :style="topModuleDivStyle">
            <p>TOP3好评关键词</p>
          </div>
        </el-row>
        <el-row>
          <div :style="topModuleDivStyle">
            <p>TOP3差评关键词</p>
          </div>
        </el-row>
      </el-col>


      <!--纵列数据遍历-->
      <el-col class="borderLine" :span="colSpan" v-for="(col, i) in tableData.cols" :key="i">
        <!--项目名数据-->
        <el-row>
          <div :style="projectDivStyle">
            <p>{{ col.name }}</p>
          </div>
        </el-row>
        <!--口碑数据 区分Android和iOS视图显示逻辑-->
        <el-row>
          <div :style="wordOfMouthIOSDivStyle">
            <p>{{ col.wordOfMouth[0] }}</p>
          </div>
        </el-row>
        <!--评分数据-->
        <el-row>
          <el-col :span="24">
            <el-row v-for="(each, i) in col.ratingInfo" :key="i">
              <div :style="ratingSubDivStyle">
                <p>{{ each.info }}</p>
              </div>
            </el-row>
          </el-col>
        </el-row>
        <!--排名数据-->
        <el-row>
          <el-col :span="24">
            <el-row v-for="(each, i) in col.rankInfo" :key="i">
              <div :style="rankSubDivStyle">
                <p>{{ each.rank }} {{ each.info }}</p>
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <div :style="topModuleDivStyle">
            <p v-for="(_module, i) in modules(col.topGoodModule)" :key="i">{{ _module }}</p>
          </div>
        </el-row>
        <el-row>
          <div :style="topModuleDivStyle">
            <p v-for="(_module, i) in modules(col.topBadModule)" :key="i">{{ _module }}</p>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      largeDivHeight: 120,
      smallDivHeight: 80,
      miniDivHeight: 50,
      ratingSubDivHeight: 80,
      rankSubDivHeight: 80,
      tableData: {
        ratingChls: ['评分1', '评分2'],
        rankChls: ['排名1', '排名2'],
        
        cols: [{
          name: '132132',
          wordOfMouth: ['1'],
          ratingInfo: [{
            info: '12',
          }, {
            info: '12',
          }],
          rankInfo: [{
            rank: '1212',
            info: '1212',
          }, {
            rank: '1212',
            info: '1212',
          }],
          topGoodModule: [{
            cou: '1111',
            word: '好评1111',
          }, {
            cou: '1111',
            word: '好评1111',
          }],
          topBadModule: [{
            cou: '1111',
            word: '差评1111',
          }, {
            cou: '1111',
            word: '差评1111',
          }],
        }],
      },
    };
  },
  methods: {
    modules(someArray) {
      var newArray = [];
      for (var i = 0; i < someArray.length; i++) {
        var count = someArray[i]["cou"];
        var word = someArray[i]["word"];
        newArray.push(word + ":" + count);
      }
      return newArray;
    },
  },
  computed: {
    // 布局
    colSpan: function () {
      var count = this.tableData.cols.length;
      if (count > 5) {
        return 18 / count;
      } else if (count < 4) {
        return 6;
      }
    },
    projectDivStyle: function () {
      var height = this.miniDivHeight;
      return `background: #E8F8F5;padding: 20px;height: ${height}px`;
    },
    wordOfMouthIOSDivStyle: function () {
      var height = this.miniDivHeight;
      return `padding: 20px;height: ${height}px`;
    },
    topModuleDivStyle: function () {
      var height = this.largeDivHeight;
      return `padding: 20px;height: ${height}px`;
    },
    ratingSubDivStyle: function () {
      var height = this.ratingSubDivHeight;
      return `padding: 20px;height: ${height}px`;
    },
    rankDivStyle: function () {
      var height = this.rankSubDivHeight;
      return `padding: 20px;height: ${height}px`;
    },
    rankSubDivStyle: function () {
      var height = this.rankSubDivHeight;
      return `padding: 20px;height: ${height}px`;
    },
  },
  created() {},
  mounted() {},
  watch: {},
};
</script>

<style scoped lang="less">
/*
通过布局el-row来完成表格边界样式替代式设计
*/
.borderLine {
  .el-row {
    margin-bottom: 0px; /*去除el-row之间的间距*/
    border: 1px solid #e6e6e6;
    margin: -1px -1px -1px -1px; /*解决相邻边框重叠问题就靠这行代码*/
    &:last-child {
      margin-bottom: 0px;
    }
  }
}
</style>