<template>
  <el-dialog
    title="已选择流程"
    :visible.sync="dialogVisible"
    append-to-body
    :close-on-click-modal="false"
    width="900px"
  >
    <el-table :data="filterTableData" border stripe style="width: 100%" height="570px">
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="defKey" label="流程key">
      </el-table-column>
      <el-table-column prop="typeName" label="流程分类"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="deleteRow(scope.row.defKey)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:15px;text-align:right;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageBean.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.total"
      >
      </el-pagination>
    </div>
    <div slot="footer" style="margin-top:20px;text-align: right;">
      <el-button @click="onCancel()">取 消</el-button>
      <el-button type="primary" @click="onConfirm()">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'FlowRangeDialog',
  props: {},
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      pageBean: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    filterTableData() {
      if (this.pageBean.total === 0) {
        return []
      }
      return this.tableData.filter((item, i) => {
        let index = i + 1
        return (
          index <= this.pageBean.page * this.pageBean.pageSize &&
          index > (this.pageBean.page - 1) * this.pageBean.pageSize
        )
      })
    }
  },
  methods: {
    deleteRow(defKey) {
      let index = this.tableData.findIndex(item=>{
        return item.defKey === defKey
      })
      if (index > -1) {
        this.tableData.splice(index, 1)
        this.pageBean.total = this.tableData.length
      }
    },
    handleSizeChange(pageSize) {
      this.pageBean.page = 1
      this.pageBean.pageSize = pageSize
    },
    handleCurrentChange(page) {
      this.pageBean.page = page
    },
    showDialog(data) {
      this.tableData = JSON.parse(JSON.stringify(data))
      this.pageBean.page = 1
      this.pageBean.pageSize = 10
      this.pageBean.total = this.tableData.length || 0
      this.dialogVisible = true
    },
    onConfirm() {
      this.$emit('confirmSelect', this.tableData)
      this.dialogVisible = false
    },
    onCancel() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
