<template>
  <div class="wrapper">
    <section class="demo-section">
      <div style="padding-bottom: 20px">固定列和表头<input v-model="rowCount" /></div>
      <x-tables border :height="300" stripe :data="longTableData" virtual-scroll>
        <x-table-columns
          v-for="(header, index) in detailTableHeaders"
          :key="index"
          :width="100"
          :sortable="header.sortable"
          :fixed="header.fixed"
          :label="header.label"
          :prop="header.prop"
        >
        </x-table-columns>
      </x-tables>
    </section>
    <div style="height:500px"></div>
  </div>
</template>

<script>
import { xTables, xTableColumns } from '../src'

export default {
  name: 'app',
  components: { xTables, xTableColumns },
  data() {
    return {
      colCount: 100,
      rowCount: 10
    }
  },
  computed: {
    tableData() {
      const list = []
      for (let i = 0; i < this.rowCount; i++) {
        const obj = {
          id: i + 1,
          name: '易小宝' + i,
          city: '长沙' + i,
          lastUsedTime: `2018-09-${i + 1 < 10 ? '0' + (i + 1) : (i + 1)} 12:30:33`,
          province: '湖南',
          address: '岳麓区岳麓山下',
          age: i,
          gender: '男',
          occupation: '工程师',
          cellphone: '18888888888',
          shen: '湖南',
          qu: '长沙'
        }
        for (let j = 0; j < this.colCount; j++) {
          obj[`test${j}`] = Math.floor(Math.random() * 10) + '_' + j + '_' + i
        }
        obj['test' + this.colCount] = 'test' + this.colCount
        list.push(obj)
      }
      return list
    },
    longTableData() {
      return this.tableData
    }
  },
  created() {
    this.genData()
  },
  methods: {
    cellSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 1) {
          return [1, 2]
        } else if (columnIndex === 2) {
          return [0, 0]
        }
      }

      if (columnIndex === 3) {
        if (rowIndex === 1) {
          return [2, 1]
        } else if (rowIndex === 2) {
          return [0, 0]
        }
      }
      return [1, 1]
    },
    sortMethod(a, b) {
      return a - b
    },

    genData() {
      this.detailTableHeaders = [
        { label: '用户ID', prop: 'name' },
        { label: '城市', prop: 'city', fixed: true },
        { label: '最近一次', prop: 'lastUsedTime' },
        { label: '年龄', prop: 'age', sortable: true },
        { label: '地址', prop: 'address' },
        { label: '性别', prop: 'gender' },
        { label: '职业', prop: 'occupation' },
        { label: '电话', prop: 'cellphone' }]
      for (let i = 0; i < this.colCount - 4; i++) {
        this.detailTableHeaders.push({ label: 'test' + i, prop: 'test' + i })
      }
      this.detailTableHeaders.push({ label: 'test' + this.colCount, prop: 'test' + this.colCount, fixed: 'right' })
    }
  }
}
</script>

<style lang="scss">
  .wrapper {
    width: 700px;
    height: 300px;
    margin: 20px auto;
    .x-table {
      height: 100%;
    }
  }
.demo-section {
  height: 100%;
  .hide-column {
    display: none;
  }
}
</style>
