<template>
  <div class="container-fluid">
    <el-button icon="upload2" size="small" @click="exportExcel">导出</el-button>
    <el-select v-model="exportType" size="small" style="width:125px;">
    <el-option
        v-for="item in exportOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
    </el-select>
    <tableVue
        ref="table"
        stripe border
        maxHeight="500"
        column-type="selection"
        :data="dataSource"
        :columns="columns"
        :pageSizes="pageSizes" :currentPage="currentPage" :pageSize="pageSize"
        :totalCount="totalCount" :hasPagination="hasPagination" :setPage=this.queryData
        @selection-change="selectionChange"  @cell-dblclick="celldbClick">
    </tableVue>
    <div style="margin-top:30px;font-size:20px;" >使用说明</div>
    <el-input :rows="textareaRows" resize="none" type="textarea" readonly v-model="api"></el-input>
  </div>
</template>

<script>
import tableVue from '@/components/Template/table/table.vue'
var data = [ // 表格数据
  {
    // date: '1501776000000',
    date: '2016-05-03',
    name: '张三',
    age: 15,
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    icon: 2,
    favorite: ['篮球', '羽毛球'],
    zip: 200333,
    active: 1
  },
  {
    // date: '1492963200000',
    date: '2016-05-02',
    name: '陈二',
    age: 19,
    province: '南京',
    city: '江宁区',
    address: '南京市111111',
    icon: 1,
    favorite: ['足球'],
    zip: 210018,
    active: 0
  },
  {
    // date: '1494604800000',
    date: '2016-05-04',
    name: '李四',
    age: 16,
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    icon: 1,
    favorite: ['篮球', '足球', '羽毛球'],
    zip: 200333,
    active: 1
  },
  {
    // date: '1502553600000',
    date: '2016-05-01',
    name: '何一',
    age: 17,
    province: '北京',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    icon: 0,
    favorite: ['羽毛球'],
    zip: 200333,
    active: 0
  },
  {
    // date: '1512057600000',
    date: '2016-05-08',
    name: '谭天',
    age: 17,
    province: '上海',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    icon: 2,
    favorite: ['足球', '羽毛球'],
    zip: 200333,
    active: 1
  },
  {
    // date: '1500652800000',
    date: '2016-05-06',
    name: '王五',
    age: 15,
    province: '苏州',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    icon: 1,
    favorite: ['篮球', '足球'],
    zip: 200333,
    active: 0
  },
  {
    // date: '1506787200000',
    date: '2016-05-07',
    name: '周日',
    age: 18,
    province: '杭州',
    city: '普陀区',
    address: '上海市普陀区金沙江路 1518 弄',
    icon: 2,
    favorite: ['篮球'],
    zip: 200333,
    active: 0
  }
]

var api = '新的table组件\r' +
'路径：src/components/Template/Table/Table.vue\r\r' +
'<tableVue\r' +
'      ref="table"\r' +
'      stripe border\r' +
'      maxHeight="500"\r' +
'      column-type="selection"\r' +
'      :data="dataSource"\r' +
'      :columns="columns"\r' +
'      :pageSizes="pageSizes" :currentPage="currentPage" :pageSize="pageSize"\r' +
'      :totalCount="totalCount" :hasPagination="hasPagination" :setPage=this.queryData\r' +
'      @selection-change="selectionChange">\r\r' +
'参数说明：\r' +
'data: 表格数据   数组类型\r' +
'columns: 列值  数组类型\r' +
'pageSizes  分页选项  数组类型\r' +
'currentPage 当前页码  数值类型\r' +
'pageSize    当前分页大小 数值类型\r' +
'totalCount  总记录数  数值类型\r' +
'hasPagination  是否有分页  Boolean类型\r' +
'setPage  用来接收分页数据的方法或者指向查询方法\r\r' +
'columns属性说明：\r' +
'columns数组中对象\r' +
'1.label 列的显示值\r' +
'2.prop 列的匹配值\r' +
'3.columnsProps: 列的属性 （参考地址：http://element-cn.eleme.io/1.4/#/zh-CN/component/table#table-column-attributes）\r' +
'如果需要编辑表格，需要在columnsProps中添加type属性，type可选值为：input、number、select、checkbox、switch、button、icon\r' +
'4.cptProperties: 组件属性 (仅在columnsPrps中有type属性时填写)\r' +
'5.options 选项值 （仅限type类型为select、checkbox或icon时填写）\r' +
'事件说明：\r' +
'下拉框change事件在属性中添加eventChange,值指向自定义方法\r' +
'图标点击事件在属性中添加eventClick,值指向自定义方法\r' +
'按钮类型属性全部写在cptProperties中，属性包括：label-按钮名称，value-按钮值，type-按钮类型，eventClick-按钮点击事件\r' +
'例：\r' +
'columns: [ // 表格列\r' +
'  { label: \'日期\', prop: \'date\', columnsProps: {width: 120, sortable: true, type: \'date\', dateType: \'date\'} }, //日期格式 dateType可接收unix或date格式日期\r' +
'  { label: \'姓名\', prop: \'name\', columnsProps: {width: 120, align: \'center\', sortable: true} },  // 纯文本\r' +
'  { label: \'年龄\', prop: \'age\', columnsProps: {width: 180, align: \'center\', sortable: true, type: \'number\'}, cptProperties: {size: \'small\', min: 0, max: 100} }, // 数值类型\r' +
'  { label: \'省份\', prop: \'province\', columnsProps: {width: 120, sortable: true, type: \'select\', formatter: this.colFormatter}, eventChange: this.selectChange, options: [{value: \'北京\', label: \'北京\'}, {value: \'上海\', label: \'上海\'}, {value: \'南京\', label: \'南京\'}, {value: \'苏州\', label: \'苏州\'}, {value: \'杭州\', label: \'杭州\'}] }, // 下拉框类型\r' +
'  { label: \'市区\', prop: \'city\', columnsProps: {width: 120, sortable: true, formatter: this.colFormatter} },\r' +
'  { label: \'地址\', prop: \'address\', columnsProps: {width: 250, type: \'input\'} }, // 输入框类型\r' +
'  { label: \'图标\', prop: \'icon\', columnsProps: {width: 100, type: \'icon\'}, eventClick: this.changeIcon },  // 图标类型\r' +
'  { label: \'爱好\', prop: \'favorite\', columnsProps: {width: 200, type: \'checkbox\'}, options: [\'篮球\', \'足球\', \'羽毛球\'] },  // 复选框类型\r' +
'  { label: \'邮编\', prop: \'zip\', columnsProps: {width: 120, sortable: true, type: \'input\'} },\r' +
'  { label: \'是否启用\', prop: \'active\', columnsProps: {width: 120, type: \'switch\'}, cptProperties: {onText: \'启用\', offText: \'未启用\', onValue: 1, offValue: 0, width: 80} }, // switch开关类型\r' +
'  { label: \'操作\', prop: \'operation\', columnsProps: {width: 200, type: \'button\'}, cptProperties: [{ label: \'修改\', value: \'modify\', type: \'text\', eventClick: this.handleModify }, { label: \'删除\', value: \'delete\', icon: \'delete\', size: \'small\', type: \'danger\', eventClick: this.handleDelete }] } // 按钮类型\r' +
']\r'

export default {
  data () {
    return {
      textareaRows: 20,
      api: api,
      selectRows: [],
      exportType: 'selectedData',
      exportOptions: [
        {
          label: '导出选中项',
          value: 'selectedData'
        },
        {
          label: '导出当前页',
          value: 'currentPage'
        },
        {
          label: '导出所有数据',
          value: 'allData'
        }
      ],
      hasPagination: true,
      currentPage: 1, // 默认当前第一页
      pageSize: 5,  // 默认每页20条数据
      pageSizes: [5, 10, 20, 40, 50], // 分页数选择项
      selectSells: [],
      totalCount: data.length, // 表格总记录数
      columns: [ // 表格列
        { label: '日期', prop: 'date', columnsProps: {width: 120, sortable: true, type: 'date', dateType: 'date'} },
        { label: '姓名', prop: 'name', columnsProps: {width: 120, align: 'center', sortable: true} },
        { label: '年龄', prop: 'age', columnsProps: {width: 180, align: 'center', sortable: true, type: 'number'}, cptProperties: {size: 'small', min: 0, max: 100} },
        { label: '省份', prop: 'province', columnsProps: {width: 120, sortable: true, type: 'select', formatter: this.colFormatter}, eventChange: this.selectChange, options: [{value: '北京', label: '北京'}, {value: '上海', label: '上海'}, {value: '南京', label: '南京'}, {value: '苏州', label: '苏州'}, {value: '杭州', label: '杭州'}] },
        { label: '市区', prop: 'city', columnsProps: {width: 120, sortable: true, formatter: this.colFormatter} },
        { label: '地址', prop: 'address', columnsProps: {width: 250, type: 'input'}, eventKey: this.eventKey },
        { label: '图标', prop: 'icon', columnsProps: {width: 100, type: 'icon'}, options: ['fa fa-ban', 'fa fa-car', 'fa fa-phone'], eventClick: this.changeIcon },
        { label: '爱好', prop: 'favorite', columnsProps: {width: 200, type: 'checkbox'}, options: ['篮球', '足球', '羽毛球'] },
        { label: '邮编', prop: 'zip', columnsProps: {width: 120, sortable: true, type: 'input'} },
        { label: '是否启用', prop: 'active', columnsProps: {width: 120, type: 'switch'}, cptProperties: {onText: '启用', offText: '未启用', onValue: 1, offValue: 0, width: 80} },
        { label: '操作', prop: 'operation', columnsProps: {width: 200, type: 'button'}, cptProperties: [{ label: '修改', value: 'modify', type: 'text', eventClick: this.handleModify }, { label: '删除', value: 'delete', icon: 'delete', size: 'small', type: 'danger', eventClick: this.handleDelete }] }
      ],
      data: data,
      dataSource: []
    }
  },
  methods: {
    eventKey (key, row) {
      if (key.code === 'Enter' || key.code === 'NumpadEnter') {
        if (row.address.length < 30) {
          this.$message('地址太短')
          return false
        }
        return true
      }
    },
    celldbClick () {
      this.$message('双击事件')
    },
    exportExcel () {
      if (this.exportType === 'selectedData') {
        if (this.selectRows.length === 0) {
          this.$message('当前未选择数据!')
        } else {
          this.$refs.table.exportExcel(this.selectRows)
        }
      } else if (this.exportType === 'allData') {
        this.$refs.table.exportExcel(this.data)
      } else {
        this.$refs.table.exportExcel(this.dataSource)
      }
    },
    changeIcon (row, col) {
      row.icon = (row.icon + 1) > 2 ? 0 : (row.icon + 1)
    },
    colFormatter (row, column) {
      return 'AS:' + row.city
    },
    queryData (page, size) {
      // 前端分页
      this.dataSource = this.data.filter((u, index) => index < size * page && index >= size * (page - 1))
    },
    selectChange (row) {
    },
    handleModify (index, row) {
      this.$set(row, '_edit', !row._edit)
    },
    handleDelete (index, row) {
    },
    selectionChange (rows) {
      this.selectRows = rows
    }
  },
  mounted () {
    this.queryData(1, 5)
  },
  components: {
    tableVue
  }
}
</script>

<style scoped>
  .container-fluid{
    margin-top: 70px;
  }
</style>
