<template>
  <div class="select-approvers">
    <div class="title">选择下一步审批人</div>
    <Input
      size="small"
      v-model="searchInput"
      suffix="ios-search"
      style="width: 100%; margin: 10px 0px 5px 0px;" 
    />
    <Table
      size="small"
      border
      ref="selection"
      :max-height="450"
      :columns="columns"
      :data="filteredData"
      @on-selection-change="handleSelectionChange"
    ></Table>
  </div>
</template>

<script>
export default {
  props: {
    optionList: {
      default: () => [],
      type: Array,
    }
  },
  data() {
    return {
      searchInput: '',
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'nickname'
        },
        {
          title: '组织机构',
          key: 'orgTitle'
        },
        {
          title: '部门',
          key: 'departmentName'
        }
      ],
    }
  },
  watch: {
    optionList: {
      immediate: true,
      handler(val) {
        this.filterData(this.searchInput)
      }
    },
    searchInput(val) {
      this.filterData()
    }
  },
  methods: {
    filterData() {
      this.$refs.selection && this.$refs.selection.selectAll(false)
      if (!!this.searchInput) {
        this.filteredData = this.optionList.filter((o) => {
          return o.nickname.includes(this.searchInput)
        })
      }
      else {
        this.filteredData = [...this.optionList]
      }
    },
    handleSelectionChange(selection) {
      this.$emit('on-change', selection.map((o) => o.userid))
    }
  }
}
</script>

<style lang="less" scoped>
.select-approvers {
  width: 100%;
  height: 100%;
  .title {
    font-size: 14px;
    font-weight: 500;
  }
  /deep/ .ivu-table-small {
    /deep/ .ivu-table-header {
      table thead tr th {
        padding: 2px 0px;
      }
    }
    /deep/ .ivu-table-body {
      td {
        padding: 5px 0px;
        /deep/ .ivu-table-cell {
          padding: 1px 10px;
        }
      }
    }
  }
  
}
</style>