import { Checkbox, Modal, Select, Table, TreeSelect } from 'antd';
import style from './index.less';
import { useMemo, useEffect, useState } from 'react';
import { useModel, useRequest } from '@umijs/max';

function AddModal({
  node,
  userList,
  fileNode,
  havePreList,
  addOpen,
  onCancel,
  onOk,
}) {
  // const { userList, run: userListRun } = useModel('userList');
  const [values, setValues] = useState([]);
  const [userID, setUserID] = useState();

  useEffect(() => {
    if (!addOpen) {
      setValues([]);
      setUserID(null);
    }
  }, [addOpen]);

  // useEffect(() => {
  //   userListRun();
  // }, []);

  const defaultPerList = [
    { label: '查看列表', value: 6, disabled: true },
    { label: '只读', value: 8, disabled: true },
    { label: '下载', value: 1 },
    { label: '删除', value: 2 },
    // { label: '授权', value: 3 },
  ];
  const preData = useMemo(() => {
    const list = [...defaultPerList];
    const uploadDis =
      havePreList?.findIndex((item) => item.permit == 1) > -1 ? true : false;
    const downDis =
      havePreList?.findIndex((item) => item.permit == 2) > -1 ? true : false;
    list[2] = { ...list[2], disabled: uploadDis };
    list[3] = { ...list[3], disabled: downDis };

    const defValues = list
      ?.filter((item) => item.disabled)
      ?.map((item) => item.value);
    setValues(defValues);
    return { list, defValues };
  }, [havePreList]);

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
  };

  const handlerOk = () => {
    const permit = values
      .filter(
        (value) => preData?.defValues?.findIndex((cur) => cur == value) == -1,
      )
      .join(',');
    const data = {
      user_id: userID,
      file_type: node?.dir_type,
      permit,
      file_id: fileNode.id,
    };
    onOk(data);
  };

  const handleChange = (values) => {
    setValues(values);
  };

  return (
    <Modal
      title="新增权限"
      open={addOpen}
      onOk={handlerOk}
      onCancel={onCancel}
      width={800}
      destroyOnClose
    >
      {/* <Table
        title={() => '文档列表'}
        columns={columns.slice(0, -1)}
        dataSource={tempData}
        pagination={false}
        rowSelection={rowSelection}
        destroyOnClose
      /> */}

      <div className={style.title}>申请权限对象：</div>
      <div className={style.content}>{fileNode?.dir_name}</div>
      <div style={{ margin: '20px 0px' }}>
        <div className={style.title} style={{ marginBottom: 10 }}>
          选择用户:
        </div>
        <Select
          showSearch
          style={{ width: '100%' }}
          placeholder="请选择"
          onChange={(value) => setUserID(value)}
          filterOption={(input, option) =>
            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
          }
          options={userList?.map((item) => {
            return {
              value: item.ID,
              label: item.CName,
            };
          })}
        />
      </div>
      <div>
        <span className={style.title} style={{ marginRight: 20 }}>
          选择权限:
        </span>
        <Checkbox.Group
          options={preData.list}
          value={values}
          onChange={handleChange}
        />
      </div>
    </Modal>
  );
}

export default AddModal;
