<template>

  <el-table :key="tableKey" v-loading="listLoading" :data="listData" border fit highlight-current-row
    style="width: 100%;" :header-cell-style="{background:'#eef1f6',color:'#606266'}" @sort-change="sortChange">

    <el-table-column label="姓名" align="center" sortable prop="name" :class-name="getSortClass('name')">
      <template slot-scope="{row}">
        <span>{{ row.name }}</span>
      </template>
    </el-table-column>

    <el-table-column label="年龄" align="center" sortable prop="age" :class-name="getSortClass('age')">
      <template slot-scope="{row}">
        <span>{{ row.age }}</span>
      </template>
    </el-table-column>

    <el-table-column label="身高" align="center" sortable prop="height" :class-name="getSortClass('height')">
      <template slot-scope="{row}">
        <span>{{ row.height }}</span>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
  var currentSort = null
  var currentSortField = null
  export default {
    data() {
      return {
        tableKey: 0,
        listData: null,
        total: 0,
        listLoading: false,
        listQuery: {
          pageNo: 1,
          pageSize: 20,
          params: {
            name: null,
            age: null,
            height: null
          },
          sort: null
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        console.log(JSON.stringify(this.listQuery, null, '\t'))
        this.listData = []
        const o1 = {
          name: '可莉1',
          age: 15,
          height: 145
        }
        const o2 = {
          name: '可莉2',
          age: 14,
          height: 143
        }
        this.listData.push(o1)
        this.listData.push(o2)
      },
      sortChange(data) {
        const {
          prop,
          order
        } = data
        this.sortByID(prop, order)
      },
      sortByID(prop, order) {
        if (order === 'ascending') {
          order = 'asc'
        }
        if (order === 'descending') {
          order = 'desc'
        }
        if (order === 'asc') {
          this.listQuery.sort = `+:${prop}`
          currentSort = '+'
        } else if (order === 'desc') {
          this.listQuery.sort = `-:${prop}`
          currentSort = '-'
        } else {
          this.listQuery.sort = null
          currentSort = null
        }
        currentSortField = prop
        if (this.listQuery.sort != null && this.listQuery.sort.indexOf(':') != -1) {
          const strs = this.listQuery.sort.split(':')
          if (strs[0] === '+') {
            const sor = {
              field: strs[1],
              order: 'asc'
            }
            this.listQuery.sort = []
            this.listQuery.sort.push(sor)
          } else {
            const sor = {
              field: strs[1],
              order: 'desc'
            }
            this.listQuery.sort = []
            this.listQuery.sort.push(sor)
          }
        }
        if (this.listQuery.sort === undefined) {
          const sor = {
            field: 'age',
            order: 'desc'
          }
          this.listQuery.sort = []
          this.listQuery.sort.push(sor)
        }
        this.getList()
      },
      getSortClass: function(key) {
        if (currentSortField === key) {
          if (currentSort === '+') {
            return 'asc'
          } else if (currentSort === '-') {
            return 'desc'
          } else {
            return null
          }
        } else {
          return null
        }
      },
    }
  }
</script>