<template>
  <div>
    <el-dialog :visible.sync="isShow" title="选择工作流下一步用户" @open="dialogOpen" append-to-body class="user-select-dialog">
      <el-toolbar>
        <el-button @click="addSelectedUser"><i class="fa fa-plus"></i>添加选中用户</el-button>
        <el-button @click="removeSelectedUser"><i class="fa fa-minus"></i>移除已选中用户</el-button>
      </el-toolbar>
      <el-row>
        <el-col :span="12">
          <el-toolbar>
            <el-row>
              <el-col :span="8">
            <tree-select :value.sync="branchInnerCode" clearable :items="roleBranchTree" :itemsOptions="treeItemsOptions" placeholder="所属机构" @click-change="searchAllUserSelectClick">
              </tree-select>
            </el-col>
              <el-col :offset="1" :span="15">
              <el-input v-model="searchContent" @keyup.enter.native="searchAllUserSelectClick" placeholder="请输入用户名或姓名" class="input-name">
                <el-button  @click="searchAllUserSelectClick" slot="append">搜索</el-button>
              </el-input>
              </el-col>
              </el-row>
          </el-toolbar>
          <el-table :data="allUser" :data-read-url="getAllUserURL" :auto-get-data="false" :page-size="10" ref="dataTable" pagination-layout="total,sizes,->,prev,next" highlight-current-row @selection-change="allUserSelectChange">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column prop="userName" show-overflow-tooltip min-width="20%" label="用户名"></el-table-column>
            <el-table-column prop="realName" show-overflow-tooltip min-width="25%" label="真实姓名"></el-table-column>
            <el-table-column prop="branchName" show-overflow-tooltip min-width="25%" label="所属机构"></el-table-column>
          </el-table>
        </el-col>
        <el-col :offset="1" :span="11">
          <el-toolbar>
            <div style="color:#8391A5;font-size:18px; font-weight:bold;">
              已选中用户列表
            </div>
          </el-toolbar>
          <el-table :data="selectedUser" @selection-change="selectedUserSelectChange">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column prop="userName" show-overflow-tooltip min-width="20%" label="用户名"></el-table-column>
            <el-table-column prop="realName" show-overflow-tooltip min-width="25%" label="真实姓名"></el-table-column>
            <el-table-column prop="branchName" show-overflow-tooltip min-width="25%" label="所属机构"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-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: {
      type: Boolean
    },
    workflowID: {
      type: [String, Number]
    },
    instanceID: {
      type: [String, Number]
    },
    actionID: {
      type: [String, Number]
    },
    showAll: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      allUser: [],
      selectedUser: [],
      allUserRows: [],
      selectedUserRows: [],
      treeItemsOptions: {
        children: 'children',
        label: 'name',
        key: 'branchInnerCode'
      },
      roleBranchTree: [],
      searchContent: '',
      branchInnerCode: ''

    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  async mounted() {
    let res = await axios.get('/ui/userselector/bindbranchtree')
    this.roleBranchTree = res.data.data
  },
  methods: {
    async dialogOpen() {
      this.searchContent = ''
      this.branchInnerCode = ''
      this.selectedUser = []
      this.allUserRows = []
      this.$nextTick(() => {
        this.getAllUserData()
      })
    },
    addSelectedUser() {
      let arr = this.selectedUser.concat(this.allUserRows)
      this.selectedUser = [...new Set(arr)]
    },
    removeSelectedUser() {
      this.selectedUser = this.selectedUser.filter(val => {
        let flag = false
        this.selectedUserRows.forEach(row => {
          if (row.userName === val.userName) {
            flag = true
          }
        })
        if (!flag) {
          return true
        }
      })
    },
    searchAllUserSelectClick() {
      this.getAllUserData()
    },
    confirm() {
      let users = []
      this.selectedUser.forEach(o => {
        users.push(o.userName)
      })
      this.$emit('callback', users)
      this.isShow = false
    },
    getAllUserURL() {
      return !this.showAll ? [
        '/ui/contentworkflow/bindselectuser',
        {
          params: {
            workflowID: this.workflowID,
            instanceID: this.instanceID,
            actionID: this.actionID,
            searchContent: this.searchContent,
            branchInnerCode: this.branchInnerCode
          }
        }
      ] : [
        '/ui/users',
        {
          params: {
            searchContent: this.searchContent,
            branchInnerCode: this.branchInnerCode
          }
        }
      ]
    },
    getAllUserData() {
      this.$refs.dataTable.getData()
    },
    allUserSelectChange(selection) {
      this.allUserRows = selection
    },
    selectedUserSelectChange(selection) {
      this.selectedUserRows = selection
    }
  }

}
</script>

<style>
.table-content .cell,
.table-content th > div {
  padding-left: 16px;
  padding-right: 16px;
}
/* 在一般情况下dialog宽为450像素，在逻辑分辨率480像素以下dialog宽为96% */
.user-select-dialog .el-dialog {
  min-width: 850px;
}
@media (max-width: 480px) {
  .user-select-dialog .el-dialog {
    width: 96%;
  }
}
</style>
