<template>
     <div>
    <el-table
      :data="tableData6"
      border
      style="width: 100%; margin-top: 20px"  :cellClassName="getCellClassName" :spanMethod="objectSpanMethod" :emptyText="'--'">
       <el-table-column  :prop="tablekey"  :label="tableHeadName" v-for="(tableHeadName, tablekey) in tableHeader" :key="tablekey">
      </el-table-column>
      <el-table-column
        prop="price"
        label="價格">
      </el-table-column>
    </el-table>

    <el-row style="margin-top:10px;">
      <el-button type="primary">增加一列</el-button>
    </el-row>

  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data () {
    return {
      tableData6: [],
      tableHeader: {'sex': '性別', 'age': '年齡', 'hc': '承載人數(shù)'},
      priceOption: {
        sex: ['男', '女'],
        age: [18, 20],
        hc: ['2-6人', '7-8人']
      },
      priceFactor: ['sex', 'age', 'hc']
    }
  },
  created () {
    this.tableData6 = this.plzhFirst(this.priceOption)
    this.combineCell(this.tableData6)
    for (var i = 0; i < this.tableData6.length; i++) {
      this.addPrice(this.tableData6[i], '請輸入')
    }
  },
  methods: {
    addPrice (item, price) {
      this.$set(item, 'price', price)
    },
    getCellClassName ({row, column, rowIndex, columnIndex}) {
      if (row['@' + this.priceFactor[columnIndex] + 'dis']) {
        return 'hidden'
      } else {
        return ''
      }
    },
    plzhFirst (datas) {
      var array = []
      var propObj = this.getFirstProp(datas)
      var propName = propObj.name
      var propValue = propObj.value
      if (_.isArray(propValue)) {
        for (var i = 0; i < propValue.length; i++) {
          var newObj = {}
          newObj[propName] = propValue[i]
          array.push(newObj)
        }
      } else {
        let newObj = {}
        newObj[propName] = propValue
        array.push(newObj)
      }
      for (let i = 1; i < this.priceFactor.length; i++) {
        array = this.plzh(
          array,
          this.priceOption[this.priceFactor[i]],
          this.priceFactor[i]
        )
      }
      return array
    },
    getFirstProp (obj) {
      var propObj = {}
      for (var i in obj) {
        propObj.name = i
        propObj.value = obj[i]
        return propObj
      }
    },
    plzh (arr1, arr2, nextAttr) {
      var array = []
      for (var i = 0; i < arr1.length; i++) {
        var obj = arr1[i]
        for (var j = 0; j < arr2.length; j++) {
          var newObj = _.cloneDeep(obj)
          var v2 = arr2[j]
          newObj[nextAttr] = v2
          array.push(newObj)
        }
      }
      return array
    },
    colsLogic () {},
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 3) {
        return [1, 1]
      }
      return [row['@' + this.priceFactor[columnIndex] + 'span'], 1]
    },
    combineCell (list) {
      for (let field in list[0]) {
        var k = 0
        while (k < list.length) {
          list[k]['@' + field + 'span'] = 1
          list[k]['@' + field + 'dis'] = false
          for (var i = k + 1; i <= list.length - 1; i++) {
            if (list[k][field] === list[i][field] && list[k][field] !== '') {
              list[k]['@' + field + 'span']++
              list[k]['@' + field + 'dis'] = false
              list[i]['@' + field + 'span'] = 1
              list[i]['@' + field + 'dis'] = true
            } else {
              break
            }
          }
          k = i
        }
      }
      return list
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
 

<style lang="less">
.hidden{
  display:none;
}
.hidden{
  display: none!important;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>