import React, { Component } from 'react';
import { Modal, Badge } from 'antd';
import { FilterTable } from 'wptpc-design';
import { auth } from '@/conf/config';
import { arrayToObj } from '@/utils/utils';
import { fetchApiGet } from '@/apis';

const apiUrl = `${auth}/role/authuser`;

const isUseList = [
  {
    value: -1, label: '全部',
  },
  {
    value: 0, label: '未授权',
  },
  {
    value: 1, label: '授权中',
  },
]
const isUseObj = arrayToObj(isUseList);
const jobStateBadgeObj = {
  0: 'default',
  1: 'processing',
}

export default class Index extends Component {
  constructor() {
    super();
    this.state = {

    }
  }

  render() {
    const { visible, selectedRowKeys, getSelections, onOk, onCancel, deptTreeData, selectedRole } = this.props;
    const filterSetting = {
      defaultExpand: true,
      isClearSearch: false,
      formFields: [
        { label: '授权状态:', type: 'select', option: isUseList, styles: { width: 150 }, key: 'ihas', defaultValue: -1 },
        { label: '部门:', placeholder: '请选择', type: 'cascader', option: deptTreeData, styles: { width: 180 }, key: 'dept_id', defaultValue: [-1] },
        { label: '用户名称:', type: 'input', key: 'ding_name', placeholder: '请输入关键字', allowEnterSearch: true },
      ],
      beforeSearchFunc: params => {
        if (!params.dept_id) {
          params.dept_id = -1;
        } else {
          params.dept_id = params.dept_id.join(',');
        }
        params.role_id = selectedRole.id;
      },
    }

    const tableSetting = {
      columnConfig: [
        {
          title: '名称',
          dataIndex: 'ding_name',
        },
        {
          title: '授权状态',
          dataIndex: 'ihas',
          render: text => <span><Badge status={jobStateBadgeObj[text]} />{isUseObj[text]}</span>,

        },
        {
          title: '部门',
          dataIndex: 'dept_cn',

        },
      ],
      hasSelection: true,
      rowKey: 'ding_id',
      selectedRowKeys,
      getSelections,
    }

    return (
      <Modal
        title="用户管理"
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
        width={760}
        destroyOnClose
      >
        <FilterTable fetchApi={fetchApiGet} filterSetting={filterSetting} tableSetting={tableSetting} apiUrl={apiUrl} isPage={false} />
      </Modal>
)
  }
}