 <template>
  <div :initStyle='initStyle'>
    <el-table :data="this.tableAll"
              :style="tableStyle"
              :header-cell-style="setHeaderRowStyle"
              :row-style="setRowStyle"
              :cell-style="setcellStyle"
              :max-height="configAll.maxHeight?configAll.maxHeight:'none'"
              :border="configAll.built_border"
              :show-header="!configAll.hideHeader"
              @cell-mouse-enter="mouseChange"
              @cell-mouse-leave="leaveChange">
      <div v-for="(item,index) in key_arr"
           :key="index">
        <div v-if="item.length===1">
          <div v-if="item[0].substr(0,4)!=='img_'">
            <el-table-column  :prop="item[0]"
                              :label="item[0]"
                              :width="configAll.setWidth?configAll.setWidth.styleArr[index] : ''"
                              :show-overflow-tooltip="configAll.showTooltip"
                              :sortable="configAll.sortable?configAll.sortable.styleArr[index]:false">
            </el-table-column>
          </div>
          <div v-else>
            <el-table-column  :label="item[0].slice(4)"
                              :width="configAll.setWidth?configAll.setWidth.styleArr[index] : ''"
                              :show-overflow-tooltip="configAll.showTooltip"
                              :sortable="configAll.sortable?configAll.sortable.styleArr[index]:false">
              <template slot-scope="scope">
                <div :style="imgStyle">
                  <el-image :src="scope.row[item[0]]" :fit="fit" style="width: 100%; height: 100%;"></el-image>
                </div>
              </template>
            </el-table-column>
          </div>
        </div>
        <div v-else>
          <el-table-column :label="item[0].split('__')[0]">
            <el-table-column v-for="item2 in item"
                              :key="item2"
                              :prop="item2"
                              :label="item2.split('__')[1]"
                              :width="configAll.setWidth?configAll.setWidth.styleArr[index] : ''"
                              :show-overflow-tooltip="configAll.showTooltip"
                              :sortable="configAll.sortable?configAll.sortable.styleArr[index]:false">
            </el-table-column>
          </el-table-column>
        </div>
      </div>
    </el-table>
  </div>

</template>

<script>
import * as Action from '../hs_table/action.js'
export default {
  name: 'commonTable',
  props: {
    // tableAll: {
    //   type: Array,
    //   required: true
    // },
    // configAll: {
    //   type: Object
    // },
    setOptions: {

    },
    initStyle: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  data() {
    return {
      key_arr: [],
      jsoneditorVisible: false,
      tableStyle: '',
      imgStyle: '',
      headerRowStyleArr: [],
      rowStyleArr: [],
      columnStyleArr: [],
      fit: 'fill',
      tableAll: [],
      configAll: []
    }
  },
  watch: {
    setOptions: {
      handler: function(newVal, oldVal) {
        if (newVal) {
          if (Array.isArray(newVal.sourceData.data)) {
            this.tableAll = newVal.sourceData.data
          } else {
            this.tableAll = newVal.sourceData
          }

          this.configAll = newVal.config
        }
      },
      deep: true
    },
    tableAll: {
      handler: function(newVal, oldVal) {
        this.key_arr = Action.get_attr_complex(Action.get_attr(this.tableAll[0]))
        this.alterConfigAction()
      },
      deep: true
    },
    configAll: {
      handler: function(newVal, oldVal) {
        this.key_arr = Action.get_attr_complex(Action.get_attr(this.tableAll[0]))
        this.alterConfigAction()
      },
      deep: true
    }
  },
  mounted() {
    this.key_arr = Action.get_attr_complex(Action.get_attr(this.tableAll[0]))
    this.alterConfigAction()
  },
  methods: {
    // 修改表头样式
    setHeaderRowStyle(row) {
      if (this.configAll.headerRow) {
        if (this.configAll.headerRow.styleArr) {
          for (let i = 0; i < this.configAll.headerRow.indexArr.length; i++) {
            if (this.configAll.headerRow.indexArr[i] === row.columnIndex) {
              return this.headerRowStyleArr[i]
            }
          }
        }
        return this.configAll.headerRow.allStyle
      } else {
        return ''
      }
    },
    // 修改行样式
    setRowStyle(row) {
      if (this.configAll.row) {
        if (this.configAll.row.styleArr) {
          for (let i = 0; i < this.configAll.row.indexArr.length; i++) {
            if (this.configAll.row.indexArr[i] === row.rowIndex) {
              return this.rowStyleArr[i]
            }
          }
        }
        return this.configAll.row.allStyle
      } else {
        return ''
      }
    },
    // 修改列样式
    setcellStyle(row) {
      if (this.configAll.column) {
        if (this.configAll.column.styleArr) {
          for (var i = 0; i < this.configAll.column.indexArr.length; i++) {
            if (this.configAll.column.indexArr[i] === row.columnIndex) {
              return this.columnStyleArr[i]
            }
          }
        }
        return this.configAll.column.allStyle
      } else {
        return ''
      }
    },
    // 鼠标移入事件
    mouseChange(row, column, cell, event) {
      if (this.configAll.hover) {
        cell.parentNode.style.background = this.configAll.hover.hoverBackground
      }
    },
    // 鼠标离开事件
    leaveChange(row, column, cell, event) {
      if (this.configAll.hover) {
        cell.parentNode.style.background = this.configAll.hover.leaveBackground
      }
    },
    alterConfigAction() {
      if (!this.configAll) return
      if (this.configAll.tableStyle) {
        this.tableStyle = JSON.stringify(this.configAll.tableStyle).replace(new RegExp('\"', 'g'), '').replace(new RegExp('{', 'g'), '').replace(new RegExp('\,', 'g'), ';').replace(new RegExp('}', 'g'), ';')
      }
      if (this.configAll.imgStyle) {
        this.imgStyle = JSON.stringify(this.configAll.imgStyle).replace(new RegExp('\"', 'g'), '').replace(new RegExp('{', 'g'), '').replace(new RegExp('\,', 'g'), ';').replace(new RegExp('}', 'g'), ';')
      }
      if (this.configAll.headerRow && this.configAll.headerRow.styleArr) {
        this.headerRowStyleArr = Action.joinObj(this.configAll.headerRow.styleArr, this.configAll.headerRow.allStyle)
      }
      if (this.configAll.row && this.configAll.row.styleArr) {
        this.rowStyleArr = Action.joinObj(this.configAll.row.styleArr, this.configAll.row.allStyle)
      }
      if (this.configAll.column && this.configAll.column.styleArr) {
        this.columnStyleArr = Action.joinObj(this.configAll.column.styleArr, this.configAll.column.allStyle)
      }
      if (this.configAll.gutter) {
        var tableId = document.getElementById(this.elId)
        // 此处要做判断
        if (tableId) {
          var gutterArr = tableId.getElementsByClassName('gutter')
          // 此次也要做判断
          if (!gutterArr || (gutterArr && !gutterArr.length)) return
          gutterArr[0].style.background = this.configAll.gutter.background
          gutterArr[0].style.border = this.configAll.gutter.border
          gutterArr[0].style.borderTop = this.configAll.gutter.borderTop
          gutterArr[0].style.borderBottom = this.configAll.gutter.borderBottom
          gutterArr[0].style.borderLeft = this.configAll.gutter.borderLeft
          gutterArr[0].style.borderRight = this.configAll.gutter.borderRight
        }
      }
    }
  }

}
</script>
<style>
</style>
