// components/table/table/table.js

Component({
  /**
   * 组件的属性列表
   */
  externalClasses: ['table-class', 'tr-class', 'td-class', 'th-class', 'tr-class_even', 'tr-class_odd'],
  properties: {
    colWidth: Number,
    isScroll: {
      type: Boolean,
      value: false
    },
    header: {
      type: Array,
      value: []
    },
    list: {
      type: Array,
      value: []
    },
    showActive: {
      type: Boolean,
      value: true
    },
    activeColor: {
      type: String,
      value: '#d6e8ff'
    },
    topColor: String,
    topStyle: String,
    bodyStyle: String,
    maxLine: {
      type: Number,
      value: 2
    }
  },

  observers: {
    'header,list': function (header, list) {
      this.init();
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
    setWidth (head) {
      const colWidth = this.data.colWidth || head.length < 3 ? (730 / head.length) : 300;
      const tableWidth = head.length >= 1 && this.data.isScroll ? head.length * colWidth : null;
      this.setData({ tableWidth });
    },
    init () {
      !this.data.tableWidth && this.setWidth(this.data.header);
      const { list, header } = this.data;
      let showHeader = JSON.parse(JSON.stringify(header));
      let showList = JSON.parse(JSON.stringify(list));
      showHeader.forEach((head, headIndex) => {
        showList.forEach((item, index) => {
          const body = header[headIndex].renderBody && header[headIndex].renderBody(item, index);
          const color = header[headIndex].renderColor && header[headIndex].renderColor(item, index);
          const bg = header[headIndex].renderBg && header[headIndex].renderBg(item, index);
          if (body !== undefined) {
            head.key = `col${headIndex}`;
            item[`col${headIndex}`] = {};
            item[`col${headIndex}`].text = body;
          } else if (head.key) {
            const text = item[head.key];
            item[head.key] = { text };
          }
          if (color && head.key) {
            item[head.key].color = color;
          }
          if (bg && head.key) {
            item[head.key].bg = bg;
          }
        });
      });
      this.setData({ showHeader, showList });
    },
    checkRow (index) {
      if (!this.data.showActive) {
        return;
      }
      index = /\d+/.test(index) ? index : 0;
      this.setData({ currentIndex: index });
    },
    onLongPress (e) {
      const { index } = e.currentTarget.dataset;
      this.checkRow(index);
      const data = this.data.list[index];
      this.triggerEvent('onLongPress', { index, data });
    },
    onTap (e) {
      const { index } = e.currentTarget.dataset;
      this.checkRow(index);
      const data = this.data.list[index];
      this.triggerEvent('onClick', { index, data });
    }
  }
});
