<template>
  <a-row :gutter='10'>
    <a-col :sm='24' style='margin-bottom: 20px'>
      <a-card :bordered='false'>
        <!-- 查询区域 -->
        <div class='table-page-search-wrapper'>
          <!-- 搜索区域 -->
          <a-form layout='inline' @keyup.enter.native='searchQuery'>
            <a-row :gutter='24'>
              <a-col :md='12' :sm='8'>
                <a-form-item label='角色名称' :labelCol='{span: 5}' :wrapperCol='{span: 18, offset: 1}'>
                  <a-input placeholder='' v-model='queryParam.roleName'></a-input>
                </a-form-item>
              </a-col>
              <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
                <a-col :md='12' :sm='24'>
                  <a-button type='primary' @click='searchQuery' icon='search' style='margin-left: 21px'>查询</a-button>
                  <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>
                </a-col>
              </span>
            </a-row>
          </a-form>
        </div>
        <div style='margin-top: 15px'>
          <a-table
            style='height:500px'
            ref='table'
            size='middle'
            bordered
            rowKey='id'
            :columns='columns'
            :dataSource='dataSource'
            :pagination='ipagination'
            :loading='loading'
            @change='handleTableChange'>
            <span slot='action' slot-scope='text, record'>
              <a-space>
                <a-button @click='handleResPerssion(record.id)' size='small' type='primary'>图层授权</a-button>
                <a-button @click='handleToolPerssion(record.id)' size='small' type='primary'>工具授权</a-button>
              </a-space>
            </span>
          </a-table>
        </div>
        <!-- 右侧的角色资源目录权限配置 -->
        <res-role-modal ref='modelResRole'></res-role-modal>
        <!-- 右侧的角色地图工具权限配置 -->
        <tool-role-model ref='modelToolRole'></tool-role-model>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import { deleteAction, postAction, getAction } from '@/api/manage';
import SelectUserModal from '@/views/system/modules/SelectUserModal';
import { filterObj } from '@/utils/util';
import UserRoleModal from '@/views/system/modules/UserRoleModal';
import moment from 'moment';
import ResRoleModal from './modules/ResRoleModal';
import ToolRoleModel from '../roleMaptool/modules/ToolRoleModel';

export default {
  name: 'RoleResList',
  mixins: [JeecgListMixin],
  components: {
    ToolRoleModel,
    ResRoleModal,
    UserRoleModal,
    SelectUserModal,
    moment
  },
  data() {
    return {
      model1: {},
      currentRoleId: '',
      queryParam1: {},
      dataSource1: [],
      ipagination1: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter1: {
        column: 'createTime',
        order: 'desc'
      },
      filters1: {},
      loading1: false,
      selectedRowKeys1: [],
      selectionRows1: [],
      columns:
        [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '角色编码',
            align: 'center',
            dataIndex: 'roleCode'
          },
          {
            title: '角色名称',
            align: 'center',
            dataIndex: 'roleName'
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
            sorter: true,
            customRender: (text) => {
              return moment(text).format('YYYY-MM-DD');
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
      // 高级查询参数
      superQueryParams2: '',
      // 高级查询拼接条件
      superQueryMatchType2: 'and',
      url: {
        list: '/sys/role/list'
      }
    };
  },
  methods: {
    // selectOK(data) {
    //   let params = {};
    //   params.roleId = this.currentRoleId;
    //   params.userIdList = [];
    //   for (var a = 0; a < data.length; a++) {
    //     params.userIdList.push(data[a]);
    //   }
    //   console.log(params);
    //   postAction(this.url.addUserRole, params).then((res) => {
    //     if (res.success) {
    //       this.loadData2();
    //       this.$message.success(res.message);
    //     } else {
    //       this.$message.warning(res.message);
    //     }
    //   });
    // },
    handleResPerssion(roleId) {
      this.$refs.modelResRole.show(roleId);
    },
    handleToolPerssion(roleId) {
      this.$refs.modelToolRole.show(roleId);
    }
  }

};
</script>

<style scoped>

</style>
