<!--author: luoshuo-->
<template>
  <div>
    <div>
      <el-row style="padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px;">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true">
            <el-form-item>
              <el-input placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <span style="padding-top:10px"><el-button type="primary" icon="upload2" @click="export2Excel">导出</el-button></span>
              <el-button type="primary" icon="search" v-on:click="handleQuery">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="plus" @click="showDialog">新增</el-button>
              <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :before-close="closeDialog">
                <el-form :model="form" :rules="rules" ref="formDialog" height="450" >
                  <el-form-item label="卷烟编码" label-width="120px" prop="jybm">
                    <el-input v-model="form.jybm" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="卷烟名称" label-width="120px" prop="name">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="条形码" label-width="120px" prop="tsm">
                    <el-input v-model="form.tsm" auto-complete="off"></el-input>
                  </el-form-item>
                </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="handleAdd">确 定</el-button>
              </div>
            </el-dialog>
            </el-form-item>
             <el-form-item>
              <el-button icon="delete" type="danger" @click="handleDel">删除</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24">
          <TABLE_VUE :columns="columnHeader" :tableData="dataSource"  ref="tableGrid"
          :selectAll="selectAll" :rowClick="rowClick" :btns="btns"
          :pageSizes="pageSizes" :currentPage=currentPage :pageSize=pageSize
          :totalCount=totalCount :queryData=this.queryData :select="select"
          :sortChange="sortChange" :tableType=tableType :changeIcon="changeIcon"
          :headerClick="headerClick" :celldbClick="celldbClick"></TABLE_VUE>
        </el-col>
      </el-row>
    </div>
    <div class="container-fluid">
      <div class="panel panel-primary">
        <div class="panel-heading">表格属性：</div>
        <div class="panel-body">
          <table class="table">
            <thead>
              <tr>
                <td>参数名称</td>
                <td>使用说明</td>
                <td width="150">类型</td>
                <td>参数说明</td>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>tableHeight</td>
                <td>表格高度；选填</td>
                <td>Number</td>
                <td>／</td>
              </tr>
              <tr>
                <td>columns</td>
                <td>列名；必填</td>
                <td>Array数组</td>
                <td>
                  columns: [</br>
                  &ensp;&ensp;{</br>
                  &ensp;&ensp;&ensp;&ensp;value: 'col1',&ensp;&ensp;// 列的值</br>
                  &ensp;&ensp;&ensp;&ensp;label: '第一列',&ensp;&ensp;// 列的名称</br>
                  &ensp;&ensp;&ensp;&ensp;editable: true,&ensp;&ensp;// 列是否可编辑</br>
                  &ensp;&ensp;&ensp;&ensp;type: 'input',&ensp;&ensp;// 列的编辑类型，input || checkbox 目前只支持文本框和复选框</br>
                  &ensp;&ensp;&ensp;&ensp;className: 'header', &ensp;&ensp;// 列的css样式，选填</br>
                  &ensp;&ensp;&ensp;&ensp;align: 'center' &ensp;&ensp;// 列的对齐方式，选填，默认left</br>
                  &ensp;&ensp;&ensp;&ensp;fixed： true, &ensp;&ensp;// 列是否固定在左侧或者右侧，true 表示固定在左侧,string || boolean,可选：true, left, right</br>
                  &ensp;&ensp;&ensp;&ensp;width：'200',&ensp;&ensp;// 对应列的宽度,String,选填</br>
                  &ensp;&ensp;&ensp;&ensp;sortable：false,&ensp;&ensp;// 对应列是否可以排序，'custom'代表用户希望远程排序，需要监听 Table 的 sort-change 事件</br>
                  &ensp;&ensp;&ensp;&ensp;formatter: 'this.dataFormat(row, column, cellValue)' &ensp;&ensp;// 用来格式化内容 Function(row, column, cellValue)</br>
                  &ensp;&ensp;&ensp;&ensp;align: 'center',&ensp;&ensp;// 对应列对齐方式，left || center || right</br>
                  &ensp;&ensp;&ensp;&ensp;class-name: 'className'&ensp;&ensp;// 对应列样式，css名称，选填</br>
                  &ensp;&ensp;},</br>
                  &ensp;&ensp;{</br>
                  &ensp;&ensp;&ensp;&ensp;value: 'col2',</br>
                  &ensp;&ensp;&ensp;&ensp;label: '第二列',</br>
                  &ensp;&ensp;}</br>
                  ...</br>
                  ]
                </td>
              </tr>
              <tr>
                <td>tableData</td>
                <td>表格数据；必填</td>
                <td>Array数组</td>
                <td>
                  tableData: [</br>
                  &ensp;&ensp;{</br>
                  &ensp;&ensp;&ensp;&ensp;col1: '11',&ensp;&ensp;// 单元格的值，元素名称需要和columns数组中的value值一一对应</br>
                  &ensp;&ensp;&ensp;&ensp;col2: '12'</br>
                  &ensp;&ensp;},</br>
                  &ensp;&ensp;{</br>
                  &ensp;&ensp;&ensp;&ensp;col1: '21',</br>
                  &ensp;&ensp;&ensp;&ensp;col2: '22'</br>
                  &ensp;&ensp;}</br>
                  ...</br>
                  ]</td>
              </tr>
              <tr>
                <td>tableType</td>
                <td>表格类型</td>
                <td>Sting</td>
                <td>1 || 2 || 3 || 4 ;</br>1.纯数据表格；2.带复选框表格；</br>3.带编辑按钮表格；4.带复选框、编辑按钮表格</td>
              </tr>
              <tr>
                <td>totalCount</td>
                <td>总记录数；必填</td>
                <td>Number</td>
                <td>4</td>
              </tr>
              <tr>
                <td>pageSizes</td>
                <td>分页选择项；必填</td>
                <td>Array数组</td>
                <td>[ 5, 10, 20]</td>
              </tr>
              <tr>
                <td>pageSize</td>
                <td>分页值；</td>
                <td>Number</td>
                <td>5，即5条数据一页</td>
              </tr>
              <tr>
                <td>currentPage</td>
                <td>设置初始页</td>
                <td>Number</td>
                <td>1，即起始页为1</td>
              </tr>
              <tr>
                <td>btns</td>
                <td>按钮值；tableType包含编辑按钮的情况下必填</td>
                <td>Array数组</td>
                <td>
                  btns: {<br>
                  &ensp;&ensp;btnArr: [</br>
                  &ensp;&ensp;&ensp;&ensp;{</br>
                  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;label: '修改',&ensp;&ensp;// 按钮的名称</br>
                  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;value: 'modify',&ensp;&ensp;// 按钮的值</br>
                  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;functionName: this.modify&ensp;&ensp;// 按钮的方法</br>
                  &ensp;&ensp;&ensp;&ensp;},</br>
                  &ensp;&ensp;&ensp;&ensp;{</br>
                  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;label: '取消',</br>
                  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;value: 'cancel',</br>
                  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;functionName: this.cancel</br>
                  &ensp;&ensp;&ensp;&ensp;}</br>
                  &ensp;&ensp;&ensp;&ensp;...</br>
                  &ensp;&ensp;],</br>
                  &ensp;&ensp;value: 'operation',&ensp;&ensp;// 列的值</br>
                  &ensp;&ensp;label: '操作'&ensp;&ensp;// 列的名称</br>
                  }
                </td>
              </tr>
              <tr>
                <td>queryData</td>
                <td>表格数据查询方法</td>
                <td>Function</td>
                <td>／</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TABLE_VUE from './Table.vue'
import { dateFormat } from '@/utils/dateFormat.js'
export default {
  data () {
    return {
      hasPagination: true,
      form: {
        jybm: '',
        name: '',
        tsm: ''
      },
      rules: {
        jybm: [
          { required: true, message: '请输入卷烟编码', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入卷烟名称', trigger: 'blur' }
        ],
        tsm: [
          { required: true, message: '请输入条形码', trigger: 'blur' }
        ]
      },
      dialogTitle: '新增',
      dialogFormVisible: false,
      filters: {
        name: ''
      },
      tableType: '4',
      currentPage: 1, // 默认当前第一页
      pageSize: 5,  // 默认每页20条数据
      pageSizes: [5, 10, 20, 40, 50], // 分页数选择项
      selectSells: [],
      totalCount: 0, // 表格总记录数
      // 表头数据
      columnHeader: [
        {
          // type: 'text',  // type：[text,button] text为文本，button为按钮，设置当前单元格的类型
          value: 'jybm', // 列的值
          label: '卷烟编码', // 列的显示字段
          className: 'header', // 列的css样式（选填）
          editable: true,
          type: 'checkbox',
          align: 'center' // 列的对齐方式，[left, center, right]，选填，默认是left
        }, {
          // type: 'text',
          value: 'name',
          label: '卷烟名称',
          editable: true,
          type: 'input',
          sortable: true
        }, {
          // type: 'text',
          value: 'tsm',
          label: '条形码',
          align: 'left',
          editable: true,
          type: 'select',
          style: 'width:100px;',
          options: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
          formatter: this.dateFormatter
        }, {
          // type: 'text',
          value: 'icon',
          label: '图标',
          className: 'header',
          editable: true,
          type: 'icon'
        }
      ],
      btns: {
          // type: 'button', // 如果单元格类型是按钮，必须要写btns参数
        btnArr: [
          {
            label: '修改', // 按钮的名称
            value: 'modify', // 按钮的值
            // type: 'text', // 按钮类型
            functionName: this.modify // 按钮的方法
          },
          {
            label: '删除',
            value: 'delete',
            type: 'danger',
            functionName: this.delete,
            visible: false
          }
        ],
        value: 'operation',
        label: '操作'
      },
      tableData: [
        {
          id: 1001,
          parentId: 0,
          jybm: true, // 'BS20170001',
          name: '大前门',
          tsm: '1508209459000',
          icon: 0
        },
        {
          id: 1002,
          parentId: 0,
          jybm: false, // 'BS20170002',
          name: '黄金叶',
          tsm: '1508209459000',
          icon: 1
        },
        {
          id: 1003,
          parentId: 0,
          jybm: true, // 'BS20170003',
          name: '红杉树',
          tsm: '1508209459000',
          icon: 2
        },
        {
          id: 1004,
          parentId: 0,
          jybm: false, // 'BS20170004',
          name: '玉溪',
          tsm: '1508209459000',
          icon: 0
        }
      ],
      dataSource: []
    }
  },
  watch: {
    hasPagination (newValue, oldValue) {
      if (!newValue) {
        this.pageSize = 500
      }
    }
  },
  methods: {
    queryData (page, size) {
      // 后端分页
      // let params = {
      //   currentPage: page,
      //   pageSize: size
      // }
      // this.$store.dispatch('GetTableTestInfo', params).then(res => {
      //   this.tableData = res.tableData
      //   this.totalCount = res.total
      // })
      //
      //
      // 前段分页
      this.totalCount = this.tableData.length
      this.dataSource = this.tableData.filter((u, index) => index < size * page && index >= size * (page - 1))
      this.filterDataSource = this.dataSource
    },
    rowClick () {
      // console.log('rowClick')
    },
    select (selection, index) {
      this.selectSells = selection
    },
    selectAll (selection) {
      this.selectSells = selection
    },
    sortChange () {
      console.log('sortChange')
    },
    delete (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        let id = row.jybm
        this.tableData = this.tableData.filter(u => !id.includes(u.jybm))
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.queryData(this.currentPage, this.pageSize)
      })
    },
    showDialog () {
      this.dialogFormVisible = true
      this.$refs.formDialog.resetFields()
    },
    handleQuery () {
      this.hasPagination = false
      this.queryData(this.currentPage, this.pageSize)
    },
    handleAdd () {
      this.tableData.push(this.form)
      this.dialogFormVisible = false
      this.queryData(this.currentPage, this.pageSize)
      this.form = {}
      this.$message({
        message: '添加成功',
        type: 'success'
      })
    },
    handleDel () {
      let ids = this.selectSells.map(item => item.jybm)
      if (ids.length === 0) {
        this.$message({
          message: '请选择要删除的记录',
          type: 'warning'
        })
      } else {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.tableData = this.tableData.filter(u => !ids.includes(u.jybm))
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.queryData(this.currentPage, this.pageSize)
        })
      }
    },
    modify (index, row) {
      row.editable = !row.editable
      // this.dialogFormVisible = true
      // this.form = row
      // this.$message(row.name + '现在不可修改')
    },
    onendChange () {
      console.log('onendChange')
    },
    closeDialog (done) {
      this.$confirm('确认关闭？').then(_ => {
        done()
        // location.reload()
      })
      .catch(_ => { })
    },
    // 时间格式化
    dateFormatter (row, column) {
      var unixDate = row[column.property]
      return dateFormat(unixDate, 'YYYY-MM-DD HH:mm:ss')
    },
    export2Excel () {
      this.$refs.tableGrid.exportExcel()
    },
    changeIcon (index, item, iconArr) {
      let length = iconArr.length
      let idx = item.icon + 1
      if (idx === length) {
        item.icon = 0
      } else {
        item.icon = idx
      }
    },
    headerClick (column, event) {
      console.log(column)
    },
    celldbClick (row, column, cell, event) {
      row.editable = !row.editable
      // console.log(row, column)
    }
  },
  mounted () {
    this.queryData(this.currentPage, this.pageSize)
  },
  components: {
    TABLE_VUE
  }
}
</script>
<style>
.header {
  background: #fff191;
}
</style>

