import React, { Component } from 'react';
import {Button, message} from "antd";
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-form';
import {
  addSupPermission,
  addPermission,
} from '../services/API';
import {
  urlType
} from '@/utils/dataDic';

class NewPermission extends Component{
  constructor(props) {
    super(props);
    this.newPermission = this.newPermission.bind(this);
    this.addNewPermission = this.addNewPermission.bind(this);
  }

  // 添加导航权限
  newPermission= async(values) => {
    const msg = await addSupPermission(values);
    if(msg.error.length === 0){
      message.success('新增成功');
      this.props.tableRef.current.reload();// 刷新列表
      this.props.onCancel();
    }else{
      message.warning(msg.error[0].message);
    }
  }

  // 添加导航下级权限
  addNewPermission= async(values) => {
    const msg = await addPermission({...values,superId:this.props.superData.name});
    if(msg.error.length === 0){
      message.success('新增成功');
      this.props.tableRef.current.reload();// 刷新列表
      this.props.onCancel();
    }else{
      message.warning(msg.error[0].message);
    }
  }

  render() {
    return (
        <ModalForm
          preserve={false}
          visible={this.props.visible}
          title={this.props.superData ? "新建下级权限模板":"新建权限"}
          initialValues={this.props.superData ? null : {
            type: 0// 导航级别
          }}
          modalProps={{
            onCancel: (e) => {e.stopPropagation();this.props.onCancel && this.props.onCancel();},
          }}
          onFinish={this.props.superData ? this.addNewPermission : this.newPermission}
        >
          <ProForm.Group>
            <ProFormText
              rules={
                [{
                  required: true,
                  message: '请输入接口名称!',
                }]
              }
              width="xl"
              name="name"
              label="接口名称："
              placeholder="请输入名称"
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormText
              rules={
                [{
                  required: true,
                  message: '请输入接口路径'
                }]
              }
              width="xl"
              name="url"
              label="接口路径："
              placeholder="请输入接口路径"
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormSelect
              rules={[
                {
                  required:true,
                  message:'请选择接口类型'
                }
              ]}
              width="xl"
              name="type"
              label="接口类型："
              placeholder="请选择接口类型"
              disabled={!this.props.superData}
              request={async () => urlType}
            />
          </ProForm.Group>
          {this.props.superData && <ProForm.Group>
            <span>上级功能模块:</span>
            <span>{this.props.superData.name}</span>
          </ProForm.Group>}
        </ModalForm>
    );
  }
}

export default NewPermission
