<template>
  <div  v-show="isShow">
    <div class="myclass" >
      <div class="flex" >{{title}}<el-input style="margin-left: 300px;width:200px" v-model="input" placeholder="请输入过滤值" clearable :value="input"/></div>
      <div class="myapp">
        <el-table stripe :height="500+'px'" :row-height="20" :data="trainingList.slice((currentPage-1)*pagesize,currentPage*pagesize)"  @selection-change="handleSelectionChange"  :header-cell-style="rowClass" :cell-style="cellClass">
          <el-table-column v-if="seltype === 'select'" :key="indexMethod" label="选择" width="100px" height="50px" type="selection" align="center"/>
          <el-table-column label="序号" width="100px" height="50px" type="index" :index="indexMethod" align="center"/>
          <el-table-column  v-for="(item,key) in headerlist" :width="fieldwidths[key]" height="50px" :label="item" :key="key" :align="'center'">
            <template slot-scope="scope">
              <span v-if="seltype === 'select'">{{scope.row[key].text}}</span>
              <el-button v-if="seltype === 'index'" type="text"  @click="handleOnclick(scope.row[key].idx)">{{scope.row[key].text}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="fy"  layout="total,sizes,prev, pager, next,jumper" @current-change="current_change" :total="totalcount" :page-size="pagesize" background></el-pagination>
      </div>
      <div class="space-around" >
        <el-button style=" margin-top :10px;margin-bottom :10px;" v-if="seltype === 'select'" type="primary" @click="successEvent">确 定</el-button>
        <el-button style=" margin-top :10px;margin-bottom :10px;" @click="cancelEvent">关闭</el-button>
      </div>
    </div>
    <div class="mask" @click="closeMask" ></div>
  </div>
</template>
<script>
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element);
export default {
  name: 'SelTableData',
  props: {
    title: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    },
    success: {
      type: Function,
      default: (para) => {
        console.log('success');
      }
    },
    cancel: {
      type: Function,
      default: (para) => {
        console.log('cancel');
      }
    }
  },
  watch: {
    input: {
      handler(newName, oldName) {
        this.trainingList = this.ytrainingList.filter((item, index) => {
          var ret=false;
          if(newName.length>0 && this.filteridx.length>0)
          {
            for(var i=0;i<this.filteridx.length;i++)
            {
              if  (String.prototype.indexOf.call(item[this.filteridx[i]].text,newName)>=0 )
              {
                ret=true;
                break;
              }
            }
          }
          else
            ret=true;
          return ret;
        });
        this.totalcount=this.trainingList.length;
      }
    }
  },
  data() {
    return {
      headerlist: [],
      trainingList:[],
      oldtrainingList:[],
      fieldwidths:[],
      yfieldwidths:[],
      filteridx:[],
      fields:[],
      single: false,
      multiple: false,
      ids: [],
      items: [],
      seltype: '',
      totalcount:0,
      pagesize:10,
      currentPage:1,
      input:"",
    };
  },
  methods: {
    indexMethod(index)
    {
      let curpage=this.currentPage;
      let limitpage=this.pagesize;
      return index+1+(curpage-1)*limitpage;
    }
    ,
    rowClass({row,rowIndex})
    {
      return 'background:#c0cefa';
    },
    cellClass({row,column,rowIndex,columnIndex})
    {
       return 'border-left-color: #40c9c6;border-left-width:20px;';
    },
    close() {
      this.isShow = false
    },
    rest() {
      this.headerlist=[];
      this.trainingList=[];
      this.oldtrainingList=[];
      this.fieldwidths=[];
      this.yfieldwidths=[];
      this.fields=[];
      this.filteridx=[],
      this.single=false;
      this.multiple=false;
      this.ids=[];
      this.items=[];
      this.seltype='none';
      this.totalcount=0;
      this.pagesize=10;
      this.currentPage=1;
      this.input="";
    },
    closeMask() {
      this.close();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item[0].idx);
      this.items = selection.map((item, index) => {
        return {...item, index: this.trainingList.map(ite => ite[0].idx).indexOf(item[0].idx)}
      });
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    cancelEvent() {
      this.cancel("cancel");
      this.close();
    },
    successEvent(row, index) {
      if (this.ids.length<=0)
      {
        this.cancel("没有选择记录！");
      }
      else
      {
        var ret=[];
        for (var i = 0; i < this.ids.length; i++) {
          var ids=this.ids[i];
          ret[i]={};
          for(var j=0;j<this.fields.length;j++) {
            ret[i][this.fields[j]]=this.oldtrainingList[ids][j];
          }
        }
        this.success(ret);
      }
      this.close();
    },
    handleOnclick(idx){
      const ids = idx;
      var ret={};
      for(var j=0;j<this.fields.length;j++) {
        ret[this.fields[j]]=this.oldtrainingList[ids][j];
      }
      this.success(ret);
      this.close();
    },
    filterdata() {
      return this.trainingList;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 0) {
        return 'th';
      }
      return '';
    },
    current_change:function(currentPage){
      this.currentPage = currentPage;
    }
  },
  updated(){
    var _this = this;
  },
  created:function(){
  //  this.total=this.trainingList.length;
  },
}
</script>
<style rel="stylesheet/scss" lang="scss">
.myclass {
  width: 1000px;
  height: 700px;
  position: fixed;
  left: 50%;
  margin-left: -500px;
  top: 50%;
  border-radius: 15px;
  margin-top: -350px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, .05);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  //align-items: center;
}
.flex {
  //flex: 1;
  display: flex;
  align-items: center;
  // justify-content: center;
  padding: 10px 10px;
  word-break: break-all;
  line-height:60px;
  font-weight: bold;
  font-size: 20px;
}
.space-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  border-top:1px solid #cfcfcf;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .4);
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 2000;
}
.fy{
  text-align:center;
  margin-top:10px;
}
.title{
  height:100%;
}
.myapp {
  width: 100%;
  height: 100%;
  .el-table {
    width: 98%;
    margin-left: 10px;
    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 40px;
    }
    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 40px;
    }
  }
}
</style>
