Component({
  /**
   * 外部样式类
   */
  externalClasses: ['header-row-class-name', 'row-class-name', 'cell-class-name'],
  /**
   * 组件样式隔离
   */
  options: {
    addGlobalClass: true,
    multipleSlots: true // 支持多个slot
  },
  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Array,
      value: []
    },
    headers: {
      type: Array,
      value: []
    },
    // table的高度, 溢出可滚动
    height: {
      type: Number || String,
      value: 'auto'
    },
    width: {
      type: Number || String,
      value: '100%'
    },
    // 单元格的宽度
    tdWidth: {
      type: Number,
      value: 35
    },
    // 固定表头 thead达到Header的位置时就应该被fixed了
    offsetTop: {
      type: Number,
      value: 150
    },
    // 是否带有纵向边框
    stripe: {
      type: Boolean,
      value: false
    },
    // 是否带有纵向边框
    border: {
      type: Boolean,
      value: true
    },
    msg: {
      type: String,
      value: '暂无数据~'
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    scrolWidth: '100%'
  },
  /**
   * 组件的监听属性
   */
  observers: {
    // 在 numberA 或者 numberB 被设置时，执行这个函数
    'headers': function headers(_headers) {
      var reducer = function reducer(accumulator, currentValue) {
        return accumulator + Number(currentValue.width)
      }
      var scrolWidth = _headers.reduce(reducer, 0)
      this.setData({ scrolWidth: scrolWidth })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onRowClick: function(e) {
      var row = this.data.data[e.currentTarget.dataset.row]
      this.triggerEvent('rowClick', row)
    },
    onCellClick: function(e){
      this.triggerEvent('cellClick', e)
    },
    onHeaderClick: function(e){
      var index = e.currentTarget.dataset.index
      var item = this.data.headers[index]
      if(!item.sort){
        return
      }
      for (let mk = 0; mk < this.data.headers.length; mk++) {
        if(mk !== index && this.data.headers[mk].sort){
          this.data.headers[mk].sort = 1
        } else if(mk === index && this.data.headers[mk].sort){
          if(this.data.headers[mk].sort == 1){
            this.data.headers[mk].sort = 2
          } else if(this.data.headers[mk].sort == 2){
            this.data.headers[mk].sort = 3
          } else if(this.data.headers[mk].sort == 3){
            this.data.headers[mk].sort = 1
          }
        }
      }
      this.setData({headers: this.data.headers })
      this.triggerEvent('sort', { prop: item.prop, sort: this.data.headers[index].sort })
    }
  }
})