import { Checkbox, Modal, Radio } from 'antd';
import { useRef, useEffect, useMemo } from 'react';
import style from './index.less';
import { useRequest } from '@umijs/max';

const PerModal = ({
  node,
  fileNode,
  auditList,
  visible,
  handleCancel,
  handleOk,
}) => {
  // console.log(node, fileNode);
  const checkedValuesRef = useRef([]);
  const auditItem = useRef();
  const data = [
    {
      name: '文件权限',
      id: 'DDMultiSelectField_2e553cd3-094e-4a34-8a2a-40271d6b107e',
      value: ['删除', '下载'],
    },
    {
      name: '文件名称',
      id: 'TextField_663c9a4e - 26c7- 408e-ac90 - fac20e796edf',
      value: ['文件夹1'],
    },
    {
      name: '文件id',
      id: 'TextField_1d1334ed - 1944 - 4e59 - 97db - 2d8615acf7c6',
      value: ['2'],
    },
    {
      name: '文件类型',
      id: 'TextField_1d1334ed - 1944 - 4e59 - 97db - 2d8615acf7c7',
      value: ['2'],
    },
  ];
  const options = useMemo(() => {
    return node?.dir_type
      ? [{ label: '下载', value: '下载' }]
      : [
          { label: '下载', value: '下载' },
          { label: '删除', value: '删除' },
        ];
  }, [node]);

  const onChange = (checkedValues) => {
    checkedValuesRef.current = checkedValues;
  };
  const handleOkClick = () => {
    data[0].value = checkedValuesRef.current;
    data[1].value = [fileNode?.dir_name];
    data[2].value = [fileNode?.id.toString()];
    data[3].value = [node?.dir_type.toString()];

    const result = {
      flow_id: auditItem.current,
      form: JSON.stringify(data),
      audit_list: [7],
      files: '',
      file_type: node.dir_type, //fileNode?.file_type,
    };
    handleOk?.(result);
  };
  return (
    <Modal
      title="权限申请"
      open={visible}
      onOk={handleOkClick}
      onCancel={handleCancel}
      destroyOnClose
      width={800}
    >
      <div className={style.title}>申请权限对象：</div>
      <div className={style.content}>{fileNode?.dir_name}</div>
      <div className={style.title}>选择权限：</div>
      <div className={style.content}>
        <Checkbox.Group options={options} onChange={onChange} />
      </div>
      <div className={style.title}>可选流程：</div>
      <Radio.Group
        onChange={(e) => {
          auditItem.current = e.target.value;
        }}
      >
        {auditList?.map((item) => (
          <Radio value={item?.id}>{item?.name}</Radio>
        ))}
      </Radio.Group>
    </Modal>
  );
};

export default PerModal;
