/*
 * @Author: Anmin
 * @Email:changanmin1@crc.com.hk
 * @Date: 2019-03-15 14:09:11
 * @Last Modified by: Anmin
 * @Last Modified time: 2019-03-15 14:12:37
 * @description:  选择角色
 * @JIRA:
 */

<template>
 <div class="user-edit-role">
   <EMSTableNew
      ref="userEditRoleTable"
      :params="searchForm"
      :columns="columns"
      :resource="tableData"
      :rowClickHandle="onRowClick"
    >
    
    <Form
      ref="elementForm"
      slot="search-bar"
      :model="searchForm"
      class="ivu-form-no-margin-bottom"
       inline :label-width="120"
    >
      <Form-item
        prop="roleCode"
        label="角色编码"
      >
        <Input
          v-model="searchForm.roleCode"
          type="text"
          placeholder="请输入"
          size="small"
        ></Input>
      </Form-item>
      <Form-item
        prop="roleName"
        label="角色名称"
      >
        <Input
          v-model="searchForm.roleName"
          type="text"
          placeholder="请输入"
          size="small"
        ></Input>
      </Form-item>
    </Form>
    <div slot="handle-bar">
      <Button
        size="small"
        type="warning"
        style="margin:10px"
        @click.native="search"
      >
        查询
      </Button>
      <Button
        size="small"
        type="default"
        style="margin:10px"
        @click.native="formReset"
      >
        重置
      </Button>
    </div>
   </EMSTableNew>
    

    <!-- <PageTable
      ref="userEditRoleTable"
      :resource="tableData"
      :columns="columns"
      :onSelectionChange="onSelectionChange"
      :autoFirst="false"
      class="userEditRoleTable"
    >
    </PageTable> -->
  </div>
  <!-- <div>
    <PageTable
      ref="userEditRoleTable"
      :resource="tableData"
      :columns="columns"
      :onSelectionChange="onSelectionChange"
    ></PageTable>
  </div> -->
</template>
<script>
import { QueryRoles } from '../server.js';
export default {
  name: 'SelectRole',
  components: {},
  directives: {},
  props: {
    title: {
      type: String,
      default: '请选择角色'
    }
  },
  data() {
    return {
      tableData: [],
      selected: null,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          resizable: true
        },
        {
          title: '角色名称',
          key: 'roleName',
          sortable: true,
          resizable: true
        },
        {
          title: '角色编码',
          sortable: true,
          key: 'roleCode',
          resizable: true
        },
        {
          title: '所属组织',
          sortable: true,
          key: 'orgName',
          resizable: true
        },
        {
          title: '用户状态',
          align: 'center',
          key: 'enabled',
          sortable: true,
          width: 140,
          render: (h, params) => {
            return h(
              'span',
              {
                props: {
                  // type: 'dot',
                  color: params.row.enabled ? 'warning' : 'error'
                }
              },
              params.row.enabled ? '启用中' : '已冻结'
            );
          }
        }
      ],
      searchForm: {
        commonPageDTO: {
          currentPage: 1,
          pageSize: 10000
        },
        sortDTO: {
          fieldName: '',
          orderBy: ''
        },
        enabled: 1,
        effective: 1,
        roleCode: '',
        roleName: ''
      },
    };
  },
  created() {
    this.queryRole();
    this.$emit('SetTitle', this.title);
  },
  methods: {
    queryRole() {
      QueryRoles(this.searchForm).then(res => {
        if (res.statusCode && res.statusCode === '-1') {
          this.$Message.error(res.msg || '查询角色异常，请稍后再试');
        } else {
          res.dataResult.recordList.map(role => {
            this.tableData.push(role);
          });
        }
        this.$refs.userEditRoleTable.refresh();
      });
    },
    // 点击数据行
    onSelectionChange(selected) {
      if (selected.length == 0) {
        return;
      }
      if (selected.length > 1) {
        this.$Message.warning({
          content: '只能选择一条数据',
          duration: 5
        });
        return;
      }
      this.$emit('Close', selected[0]);
    },
    // 查询
    search() {
      this.tableData = [];
      this.queryRole();
    },
    // 重置
    formReset() {
      this.searchForm.roleCode = '';
      this.searchForm.roleName = '';
      this.queryRole();
    },
    onRowClick(selected, index) {
      this.$emit("Close", selected);
    }
  }
};
</script>
<style lang="less">
  .userEditRoleTable .run-search-bar{
    display: none !important;
  }
  .user-edit-role{
    position: relative;
  }
  .handle_bar{
    position: absolute;
    right: 0;
    top: -6px;
  }
 .emstable-wrap-new .no_search_more {
   right: -10px !important;
 }
 .search-bar {
   padding-bottom: 10px !important;
 }
</style>