<template>
  <a-card :title="$locale('m.bpm.design.select_user_selected')" size="small" :bordered="false" style="height: calc(100vh - 235px);overflow-y:auto;">
    <ych-icon slot="extra" type="delete" @click="removeAll"/>
    <a-list :dataSource="selectionRows" size="small" bordered>
      <a-list-item slot="renderItem" slot-scope="item, index">
        <span>
          <span style="margin-right: 5px;">{{ index + 1 }}</span>
          {{ item.realname + '/' + item.username }}
        </span>
        <ych-icon slot="actions" @click="remove(item)" type="delete"/>
      </a-list-item>
    </a-list>
  </a-card>
</template>

<script>

import LocleUtil from "../../../utils/LocleUtil";

export default {
  name: 'YchSelectedUserArea',
  props: {
    selectedRowKeys: {
      type: Array,
      required: true
    },
    selectionRows: {
      type: Array,
      required: true
    },
  },
  data() {
    return {}
  },
  methods: {
    $locale(params) {
      return LocleUtil.getLocale(params)
    },
    removeAll() {
      this.$emit('change', [], [])
    },
    remove(removeItem) {
      this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(removeItem.id), 1)
      const selectionRows = this.selectionRows.filter(item => item.id !== removeItem.id)
      this.$emit('change', this.selectedRowKeys, selectionRows)
    }
  }
}
</script>
