<template>
  <div>
    <el-dialog class="member-select-opt-dlg" @open="dialogOpen" title="选择用户" :visible.sync="isShow">
      <el-toolbar>
        <el-button @click="addClickHandler" :disabled="selectedRows1.length===0">
          <i class="fa fa-plus-circle"></i>添加选中用户
        </el-button>
        <el-button @click="delClickHandler" :disabled="selectedRows2.length===0">
          <i class="fa fa-minus-circle"></i>移除已选中用户
        </el-button>
      </el-toolbar>
      <el-row>
        <el-col :span="12">
          <div style="margin:5px 5px 0 0; background-color:#CCC;border:1px solid #CCC;padding:5px;">
            <tree-select :value.sync="search.branchInnerCode" :items="branchTree" :itemsOptions="treeItemsOptions" placeholder="请选择" :style="{width:'30%','display':'inline-block'}">
            </tree-select>
            &nbsp;
            <el-input placeholder="搜索关键字" v-model="search.searchContent" @keyup.enter.native="searchClickHandler" :style="{width:'50%'}"></el-input>
            &nbsp;
            <el-button type='primary' @click="searchClickHandler">搜 索</el-button>
          </div>
          <el-table ref="userDataTable"  @selection-change="selectTableData1Change" :data-read-url="userDataTableFunc" :page-size="20" highlight-current-row>
            <el-table-column type="selection" min-width="5%"></el-table-column>
            <el-table-column prop="userName" label="用户名" min-width="35%" align="center"></el-table-column>
            <el-table-column prop="realName" label="真实姓名" min-width="35%" align="center"></el-table-column>
            <el-table-column prop="branchName" label="所属机构"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <div style="margin:9px 0px 9px 0px; background-color:#CCC;border:1px solid #CCC;padding:5px;">
             <h4 style="text-align:center">已选中用户列表</h4>
          </div>
          <el-table ref="selectedUserDataTable" :data-read-url="selectedUserDataTableFunc" :page-size="20"  @selection-change="selectTableData2Change" highlight-current-row>
            <el-table-column type="selection" min-width="5%"></el-table-column>
            <el-table-column prop="userName" label="用户名" min-width="45%" align="center"></el-table-column>
            <el-table-column prop="realName" label="真实姓名" min-width="55%" align="center"></el-table-column>
            <el-table-column prop="branchName" label="所属机构"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  components: {
    'tree-select': TreeSelect
  },
  props: { show: Boolean, branchTree: Array, treeItemsOptions: Object, selectedUser: String },
  data() {
    return {
      dataLoading1: false,
      dataTable1: [],
      selectedRows1: [],
      search: { branchInnerCode: '', searchContent: '' },
      total: 0,
      pageSize: 12,
      currentPage: 1,
      dataLoading2: false,
      dataTable2: [],
      selectedRows2: [],
      userNames: [],
      realNames: []
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.search = { branchInnerCode: '', searchContent: '' }
      this.total = 0
      this.pageSize = 12
      this.currentPage = 1
      this.realNames = []
      this.selectedRows1 = []
      this.selectedRows2 = []
      this.userNames = this.selectedUser ? this.selectedUser.split(',') : []
      this.userTableData()
      this.loadSelectedUserTableData()
    },
    addClickHandler() {
      let arr = this.getSelectedRowsData(this.selectedRows1)
      for (let i = 0; i < arr.userNames.length; i++) {
        this.userNames.push(arr.userNames[i])
        this.realNames.push(arr.realNames[i])
      }
      this.userNames = this.unique(this.userNames)
      this.realNames = this.unique(this.realNames)
      this.userTableData()
      this.loadSelectedUserTableData()
    },
    delClickHandler() {
      let arr = this.getSelectedRowsData(this.selectedRows2)
      for (let j = this.userNames.length - 1; j >= 0; j--) {
        for (let i = 0; i < arr.userNames.length; i++) {
          if (arr.userNames[i] === this.userNames[j]) {
            this.userNames.splice(j, 1)
            this.realNames.splice(j, 1)
          }
        }
      }
      this.userTableData()
      this.loadSelectedUserTableData()
    },
    confirm() {
      let arr1 = this.userNames
      let arr2 = this.realNames
      for (let i = 0; i < arr1.length; i++) {
        arr2[i] = arr2[i] ? arr2[i] : arr1[i]
      }
      this.$emit('update:show', false)
      this.$emit('callback', { managerName: arr2.join(), manager: arr1.join() })
    },
    searchClickHandler() {
      this.userTableData()
    },

    selectTableData2Change(selection) {
      this.selectedRows2 = selection
    },
    selectTableData1Change(selection) {
      this.selectedRows1 = selection
    },

    userDataTableFunc() {
      let params = {
        pageIndex: this.currentPage - 1,
        pageSize: this.pageSize,
        selectedUsers: this.userNames.join(),
        searchContent: this.search.searchContent,
        branchInnerCode: this.search.branchInnerCode
      }
      return ['/ui/memberselect', { params }]
    },

    userTableData() {
      !!this.$refs.userDataTable && this.$refs.userDataTable.getData()
    },

    selectedUserDataTableFunc() {
      let params = {
        selectedUsers: this.userNames.join()
      }
      return ['/ui/memberselect/selecteduserdatabind', { params }]
    },

    loadSelectedUserTableData() {
      !!this.$refs.selectedUserDataTable && this.$refs.selectedUserDataTable.getData()
    },
    unique(selectedArr) {
      let a = {}
      for (let i = 0; i < selectedArr.length; i++) {
        if (typeof a[selectedArr[i]] === 'undefined') a[selectedArr[i]] = 1
      }
      selectedArr.length = 0
      for (let i in a) selectedArr[selectedArr.length] = i
      return selectedArr
    },
    getSelectedRowsData(row) {
      if (!row || row.length === 0) {
        this.$message.error('请选择要操作的数据 ！')
        return
      }
      let userNames = []
      let realNames = []
      row.forEach(function(row) {
        userNames.push(row.userName)
        realNames.push(row.realName)
      })
      return { userNames: userNames, realNames: realNames }
    }
  }

}
</script>
<style>
.member-select-opt-dlg .el-dialog {
  width: 900px;
}
/* 在一般情况下dialog宽为600像素，在逻辑分辨率480像素以下dialog宽为96% */
@media (max-width: 480px) {
  .member-select-opt-dlg .el-dialog {
    width: 96%;
  }
}
</style>
