import React, { useState, useEffect } from 'react';
import { Form, Input, notification, Select, Radio, Tooltip } from 'antd';
import SiteModal from '@/components/Modal/SiteModa';
import { editRole, GetRoleGroup } from '@/services/RoleManage/api';
import { InfoCircleOutlined } from '@ant-design/icons';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState('horizontal');
  const [groupList, setGroupList] = useState([]);
  const [loading, setLoading] = useState(false);
  const { confirmModal = () => {}, itemObj, editVisible } = props;
  const [value, setValue] = useState('');
  console.log(itemObj, 'itemObj');

  useEffect(() => {
    console.log(itemObj.BuiltInRole);

    form.setFieldsValue({
      roleName: itemObj.roleName,
      description: itemObj.description,
      group: itemObj.group,
      subSystemValue: itemObj.subSystemValue,
    });
    if (itemObj.BuiltInRole === true) {
      setValue(1);
    } else {
      setValue(2);
    }
  }, [itemObj]);
  const onSubmit = () => {
    form
      .validateFields()
      .then(res => {
        console.log(res, 'res');
        setLoading(true);
        console.log(value);
        if (value == 2) {
          res.BuiltInRole = false;
        } else {
          res.BuiltInRole = true;
        }
        console.log(res.BuiltInRole);
        editRole({
          roleID: itemObj.roleID,
          roleName: res.roleName,
          description: res.description,
          remark: res.group,
          BuiltInRole: res.BuiltInRole,
          // subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '',
        })
          .then(res => {
            setLoading(false);
            if (res.msg === '') {
              form.resetFields();
              notification.success({
                message: '提示',
                duration: 3,
                description: '编辑成功',
              });
              console.log(value);
              if (value == 1) {
                confirmModal(true);
              } else {
                confirmModal(false);
              }
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.msg,
              });
            }
          })
          .catch(err => {
            setLoading(false);
            notification.error({
              message: '提示',
              duration: 3,
              description: err,
            });
          });
      })
      .catch(err => {
        console.error(err);
      });
  };
  const onChange = value => {
    console.log(value);
    const { length } = value;
    form.setFieldsValue({
      group: value[length - 1],
    });
  };
  // 获取分组列表
  const selectFocus = e => {
    setGroupList([]);
    GetRoleGroup({
      subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '',
      subSystemName: itemObj.subSystemValue || itemObj.visibleValue || '',
    })
      .then(res => {
        if (res) {
          setGroupList(res.data);
        } else {
          notification.error({
            message: '提示',
            duration: 15,
            description: res.message,
          });
          setGroupList([]);
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  const onChangeRadio = e => {
    console.log(e.target.value);
    setValue(e.target.value);
  };
  const onFinish = value => {};
  return (
    <SiteModal
      {...props}
      title="编辑角色"
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: 100 }}
      width="600px"
      destroyOnClose
      cancelText="取消"
      okText="确认"
      onOk={() => onSubmit()}
      confirmLoading={loading}
    >
      <Form form={form} layout={formLayout} onFinish={onFinish} labelCol={{ span: 4 }}>
        <Item
          label="角色名称"
          name="roleName"
          rules={[
            {
              required: true,
              message: '请输入角色名称',
            },
          ]}
        >
          <Input placeholder="请输入角色名称" maxLength="20" />
        </Item>
        <Item label="虚拟目录" name="subSystemValue">
          {itemObj.subSystemValue || itemObj.visibleValue}
        </Item>
        <Item
          label={
            <div>
              <Tooltip title="内置角色不能配置菜单权限">
                <InfoCircleOutlined style={{ color: 'rgb(24, 144, 255)', marginRight: '5px' }} />
              </Tooltip>
              <span>内置角色</span>
            </div>
          }
          name="BuiltInRole"
        >
          {console.log(value, 'nalie')}
          <Radio.Group onChange={onChangeRadio} value={value}>
            <Radio value={2}>否</Radio>
            <Radio value={1}>是</Radio>
          </Radio.Group>
        </Item>
        <Item label="角色分组" name="group">
          <Select
            mode="tags"
            placeholder="请选择分组"
            onFocus={() => {
              selectFocus();
            }}
            onChange={e => {
              onChange(e);
            }}
          >
            {groupList.map((item, index) => (
              <Option value={item.value} key={index}>
                {item.text}
              </Option>
            ))}
          </Select>
        </Item>
        <Item label="角色描述" name="description">
          <Input placeholder="请输入角色描述" maxLength="100" />
        </Item>
      </Form>
    </SiteModal>
  );
};

export default AddModal;
