<template>
  <el-dialog
   :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogVisible"
    id="allocationDialog"
    class="userDialog"
    append-to-body
    top="2vh"
    custom-class="w642"
    v-loading="pageLoading">
    <div>
      <el-form class="power-search" label-width="120px" size="mini">
        <div class="search-header">
          <div class="tool-common-wrap">
            <div class="search-wrap">
              <quick-query ref="quick" :placeholder="placeholder" :is-date="false" @quickSearch="quickSearch" />
            </div>
            <div class="btn-wrap">
              <el-button type="primary" @click="userHandle">添加</el-button>
              <!-- <el-button type="primary" :disabled="multipleSelection.length < 1" @click="removeRole">批量删除</el-button> -->
              <el-button type="primary" @click="rest()"> 刷新</el-button>
            </div>
          </div>
        </div>
      </el-form>
      <el-row :gutter="18">
        <el-col :span="24">
          <el-table
            :data="userData.list"
            border
            :header-cell-style="{'text-align':'center',background: '#E1EAFD !important'}"
            style="width: 100%; margin-bottom: 10px"
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="100">
            </el-table-column>
            <el-table-column prop="empuid" align="center" label="账号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tooltip class="item" content="删除">
                  <el-button @click="delOne(scope.row)" type="text" icon="el-icon-delete"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            v-if="userData.list && userData.list.length > 0"
            @current-change="handleCurrentChange"
            :page-size="page.pageSize"
            :current-page.sync="page.pageNum"
            :total="userData.total"></el-pagination>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>
    <SelectUser v-model="addDialogVisible" :checkLists="userData.list" @confirm="getFlow" />
  </el-dialog>
</template>

<script>
import SelectUser from './SelectUser'
import { removeUserFromRole, findRoleUsers, userAutoToRole, removeRoleUser } from '@/api/system_manage'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'// 列表操作需要依赖
import QuickQuery from '@/components/quickquery/QuickQuery'

export default {
  mixins: [EsbServiceListMixins],
  components: {
    SelectUser,
    QuickQuery
  },
  data() {
    return {
      dialogVisible: false,
      addDialogVisible: false,
      checkLists: [],
      userData: {},
      pageLoading: false,
      multipleSelection: [],
      pageSize: 10,
      pageNum: 1,
      name: '',
      quickQueryKeys: ['empuid'],
      sort: {
        orderby: 'empuid',
        sort: 'desc'
      },
      placeholder: '账号',
      logic: 'and'
    }
  },
  props: {
    value: {
      type: Boolean
    },
    item: {
      type: Object
    },
    title: {
      type: String
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        this.name = ''
        this.getData()
      }
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    removeRole() {
      const users = []
      this.multipleSelection.forEach(element => {
        users.push({
          'roleId': this.item.id,
          'userId': element.id
        })
      })
      this.$confirm('您确定要删除选择的数据吗', '提示', {
        type: 'warning'
      }).then(() => {
        removeRoleUser(users).then(rt => {
          if (rt.status === '200') {
            this.getData()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            })
          }
        })
      }).catch(_ => {
      })
    },
    delOne(item) {
      this.$confirm('您确定要删除吗', '提示', {
        type: 'warning'
      }).then(() => {
        removeUserFromRole({
          'roleId': this.item.id,
          'userId': item.id
        }).then(rt => {
          if (rt.status === '200') {
            this.getData()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            })
          }
        })
      }).catch(_ => {
      })
    },
    userHandle() {
      this.addDialogVisible = true
    },
    confirm() {
      this.dialogVisible = false
    },
    getFlow(data) {
      const users = []
      if (data.length < 1) {
        this.$message.error('请选择人员')
        return
      }
      data.forEach(element => {
        users.push({
          'roleId': this.item.id,
          'userId': element.empuid
        })
      })
      this.pageLoading = true
      userAutoToRole(users).then(rt => {
        if (rt.status === '200') {
          this.addDialogVisible = false
          this.$message.success('操作成功')
          this.getData()
        }
      }).catch(er => {
        this.pageLoading = false
      })
    },
    async getData() {
      this.pageLoading = true
      findRoleUsers(this.item.id, {
        logic: this.logic,
        filters: this.filters,
        ...this.sort,
        ...this.page
      }).then(rt => {
        this.pageLoading = false
        this.userData = rt.data
      })
    },
    handleCurrentChange(val) {
      console.log(val)
      this.getData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    quickQueryData() {
      this.getData()
    }
  }
}
</script>
<style lang="scss">
  #allocationDialog {
    .el-form-item {
      margin-bottom: 0;
    }

    .w642 {
      min-width: 642px;
    }
  }
</style>

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