<template>
  <section>
    <div class="table-page-search-wrapper">
      <a-form
        layout="inline"
        labelAlign="right"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        class="card-padding"
        @keydown.enter.native="handleQuery"
      >
        <a-form-item label="用户名称" class="search-item-class">
          <a-input
            v-model="queryParams.userName"
            class="search-item-wrapper"
            placeholder="请输入用户名称"
            allow-clear
          />
        </a-form-item>

        <span class="table-page-search-submitButtons">
          <a-button type="primary" @click="$refs.createUserForm.handleAddUser(role)" v-hasPermi="['system:role:add']">
            <a-icon type="plus" />新增
          </a-button>
          <a-button class="delete-btn" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']">
            删除
          </a-button>
        </span>
      </a-form>
    </div>
    <a-table
      :loading="loading"
      :columns="columns"
      :class="[`table-class-${fontSize}`]"
      rowKey="userId"
      :data-source="dataSource"
      :scroll="{ x: '500px', y: innerHeight }"
      :pagination="false"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template slot="action" slot-scope="text, record">
        <a @click="handleDelete(record)" v-hasPermi="['system:role:remove']" class="reset-or-delete-link">
          <!-- <a-icon type="delete" /> -->
          删除
        </a>
      </template>
    </a-table>
    <a-pagination
      show-size-changer
      show-quick-jumper
      :current="queryParams.pageNum"
      :total="total"
      :page-size="queryParams.pageSize"
      :showTotal="(total) => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
      @change="changeSize"
    />
    <create-user-form ref="createUserForm" @refresh-list="handleQuery" />
    <!-- 批量删除 -->
    <delete-form ref="DeleteFormRef" @delete-users="deleteUsers" />
  </section>
</template>

<script>
import { getUsersByRoleId, deleteUsersRole } from '@/api/system/role'
import CreateUserForm from './CreateUserForm.vue'
import DeleteForm from '@/views/system/user/modules/DeleteForm'
import { mixin, mixinDevice } from '@/utils/mixin'
export default {
  name: 'Roleuser',
  mixins: [mixin, mixinDevice],
  props: {
    role: {
      type: Object,
    },
  },
  components: {
    CreateUserForm,
    DeleteForm,
  },
  computed: {
    innerHeight() {
      const h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      return h - 310
    },
  },
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        userName: undefined,
      },
      selectedRowKeys: [],
      selectedRows: [],
      columns: [
        {
          title: '用户账号',
          dataIndex: 'loginName',
          align: 'center',
        },
        {
          title: '用户名称',
          dataIndex: 'userName',
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 64,
          fixed: 'right',
        },
      ],

      total: 0,
      dataSource: [],
      multiple: true,
      ids: [],
    }
  },
  created() {
    this.handleQuery()
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = selectedRowKeys
      this.multiple = !selectedRowKeys.length
    },
    onShowSizeChange(current, pageSize) {
      this.queryParams.pageSize = pageSize
      this.handleQuery()
    },
    changeSize(current, pageSize) {
      this.queryParams.pageNum = current
      this.queryParams.pageSize = pageSize
      this.handleQuery()
    },
    handleQuery() {
      if (!this.role || !this.role.roleId) return
      this.loading = true
      getUsersByRoleId(this.role.roleId, this.queryParams).then((res) => {
        this.dataSource = res.result.data
        this.total = res.result.totalCount
        this.loading = false
      })
    },
    handleDelete(record) {
      const userIds = (record && record.userId) ?? this.ids
      const _this = this
      if (record.userId) {
        this.$confirm({
          title: '确认删除所选中数据?',
          content: '当前选中编号为' + userIds + '的数据',
          onOk() {
            return _this.deleteUsers(userIds)
          },
          onCancel() {},
        })
      } else {
        this.$refs.DeleteFormRef.openDeleteForm(userIds)
      }
    },
    deleteUsers(userIds) {
      deleteUsersRole(this.role.roleId, userIds).then(() => {
        this.onSelectChange([], [])
        this.handleQuery()
        this.$message.success('删除成功', 3)
      })
    },
  },
  watch: {
    role(newVal) {
      if (newVal) {
        this.handleQuery()
      }
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-card-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ant-card-body .ant-table-wrapper {
  flex: 1;
}
</style>
