import QxFormRender from '@/packages/qx-form-generator/src/form-render';
import { PermissionTree } from '@/pages/system/role/components/index';
import {
  getApps,
  getRolePerm,
  saveAppPerm,
  saveViewPerm,
} from '@/pages/system/role/service';
import '@/pages/system/role/style.less';
import { useForm } from '@qx/form-render';
import { Button, Checkbox, Col, Row } from 'antd';
import { message } from 'antd/es';
import React, { useEffect, useState } from 'react';

const CheckboxGroup = Checkbox.Group;

// 权限设置的schema
const SETTING_SCHEMA = {
  type: 'object',
  properties: {
    allowApplication: {
      title: '授权应用',
      type: 'string',
      placeholder: '请选择',
      widget: 'select',
      default: 'all',
      enum: ['all', 'part'],
      enumNames: ['所有应用', '指定应用'],
      displayType: 'row',
      labelWidth: '80px',
      width: '25%',
    },
    authCode: {
      title: '授权权限',
      type: 'string',
      placeholder: '请选择',
      widget: 'select',
      default: 'LIST_ALL_EDIT_ALL',
      enum: [
        'LIST_ALL_EDIT_ALL',
        'LIST_ALL_EDIT_MANAGE',
        'LIST_ALL_EDIT_OWNER',
        'LIST_MANAGE_EDIT_MANAGE',
        'LIST_JOIN_EDIT_OWNER',
        'LIST_ALL_ONLY',
      ],
      enumNames: [
        '可查看及管理所有的记录',
        '可查看所有记录，但只能管理自己管辖范围内的记录',
        '可查看所有记录，但只能管理自己拥有的记录',
        '只能查看和管理自己管辖范围内的所有记录',
        '只能查看自己加入的和管理自己拥有的记录',
        '只能查看所有记录',
      ],
      displayType: 'row',
      labelWidth: '80px',
      width: '100%',
      hidden: '{{formData.allowApplication==="part"}}',
    },
    appIds: {
      type: 'array',
      width: '100%',
      widget: 'selectApplication',
      hidden: '{{formData.allowApplication==="all"}}',
    },
    selectPage: {
      title: '选择',
      type: 'string',
      default: 'all',
      enum: ['all', 'part'],
      enumNames: ['所有的页面', '指定的页面'],
      widget: 'radio',
      displayType: 'row',
      className: 'radio-item',
      labelWidth: '80px',
      width: '100%',
      hidden: '{{formData.allowApplication==="all"}}',
    },
    authCode1: {
      title: '授权权限',
      type: 'string',
      placeholder: '请选择',
      widget: 'select',
      default: 'LIST_ALL_EDIT_ALL',
      enum: [
        'LIST_ALL_EDIT_ALL',
        'LIST_ALL_EDIT_MANAGE',
        'LIST_ALL_EDIT_OWNER',
        'LIST_MANAGE_EDIT_MANAGE',
        'LIST_JOIN_EDIT_OWNER',
        'LIST_ALL_ONLY',
      ],
      enumNames: [
        '可查看及管理所有的记录',
        '可查看所有记录，但只能管理自己管辖范围内的记录',
        '可查看所有记录，但只能管理自己拥有的记录',
        '只能查看和管理自己管辖范围内的所有记录',
        '只能查看自己加入的和管理自己拥有的记录',
        '只能查看所有记录',
      ],
      displayType: 'row',
      labelWidth: '80px',
      width: '100%',
      // hidden: '{{formData.selectPage==="part"}}'
      hidden:
        '{{rootValue.allowApplication === "all" || formData.selectPage === "part"}}',
    },
    roleViewList: {
      type: 'array',
      width: '100%',
      widget: 'permissionTree',
      hidden:
        '{{rootValue.allowApplication === "all" || formData.selectPage === "all"}}',
    },
  },
  labelWidth: 120,
  displayType: 'row',
};

// 选择应用组件
const SelectApplication = (props: any) => {
  const { value, onChange, roleId } = props;

  const defaultCheckedList: any = [];
  const [appOptions, setAppOptions] = useState([]);
  const [checkedList, setCheckedList] = useState(defaultCheckedList);
  // const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);
  useEffect(() => {
    setCheckAll(checkedList?.length >= appOptions?.length);
  }, [checkedList, appOptions]);

  const onCheckAllChange = (e: any) => {
    // @ts-ignore
    setCheckedList(e.target.checked ? appOptions.map((item) => item.id) : []);
    // setIndeterminate(false);
    setCheckAll(e.target.checked);
    // @ts-ignore
    onChange(e.target.checked ? appOptions.map((item) => item.id) : []);
  };

  const onCheckitem = (list: any) => {
    setCheckedList(list);
    // setIndeterminate(!!list.length && list.length < appOptions.length);
    setCheckAll(list.length === appOptions.length);
    onChange(list);
  };

  useEffect(() => {
    if (value && value.length > 0) {
      setCheckedList(value);
    } else {
      setCheckedList([]);
    }
  }, [value]);

  useEffect(() => {
    if (!!roleId) {
      // status: 'ENABLED'
      getApps({ pageNum: 1, pageSize: 1000 }).then((res) => {
        setAppOptions(res?.list || []);
      });
    }
  }, [roleId]);

  return (
    <div className={'check-wrap'}>
      <Checkbox
        className={'check-all'}
        indeterminate={!checkAll && checkedList?.length}
        onChange={onCheckAllChange}
        checked={checkAll}
      >
        全选
      </Checkbox>
      <div></div>
      {/* <CheckboxGroup options={plainOptions} value={checkedList} onChange={onCheckitem} /> */}
      <CheckboxGroup
        style={{ width: '100%' }}
        value={checkedList}
        onChange={onCheckitem}
      >
        <Row>
          {appOptions.map((item: any) => {
            return (
              <Col key={item.id} style={{ width: '14%', marginTop: '20px' }}>
                <Checkbox value={item.id}>{item.appName}</Checkbox>
              </Col>
            );
          })}
        </Row>
      </CheckboxGroup>
    </div>
  );
};

const SystemRole: React.FC = (props: any) => {
  const form = useForm(); // 权限限制的form
  const [mount, setMount] = useState(false);
  const roleId = props.roleId;
  // const roleId = 'qZQ3uYFh4Iw6I8jt1eM'

  // 获取对应角色id的权限设置
  const _getRolePerm = (_roleId: string) => {
    getRolePerm(_roleId).then((res) => {
      if (!!res) {
        if (res.appIds[0] === 'ALL') {
          form.setValues({ allowApplication: 'all', authCode: res.authCode });
        } else {
          if (!!res.authCode) {
            form.setValues({
              allowApplication: 'part',
              appIds: res.appIds,
              authCode1: res.authCode,
            });
          } else {
            form.setValues({
              allowApplication: 'part',
              appIds: res.appIds,
              selectPage: 'part',
              roleViewList: res.roleViewList,
            });
          }
        }
      }
    });
  };

  useEffect(() => {
    if (!!roleId) {
      form.resetFields();
      _getRolePerm(roleId);
    }
  }, [roleId]);

  // 提交表单
  const onFinish = async (formData: any, errors: any) => {
    if (errors.length) {
      return;
    }
    console.log(formData, 224);
    const {
      allowApplication,
      authCode,
      appIds,
      selectPage,
      authCode1,
      roleViewList,
    } = formData;
    if (allowApplication === 'all') {
      saveAppPerm({ roleId, appIds: ['ALL'], authCode }).then(() => {
        message.success('保存成功！');
        _getRolePerm(roleId);
      });
    }
    if (allowApplication === 'part' && selectPage === 'all') {
      saveAppPerm({ roleId, appIds: appIds || [], authCode: authCode1 }).then(
        () => {
          message.success('保存成功！');
          _getRolePerm(roleId);
        },
      );
    }
    if (allowApplication === 'part' && selectPage === 'part') {
      let role: any = [];
      if (appIds?.length) {
        appIds.forEach((el: any) => {
          if (roleViewList?.length) {
            roleViewList.forEach((bl: any) => {
              if (bl.appId === el) {
                role.push(bl);
              }
            });
          }
        });
      } else {
        role = [];
      }
      saveViewPerm({ roleId, appIds: appIds || [], roleViewList: role }).then(
        () => {
          message.success('保存成功！');
          _getRolePerm(roleId);
        },
      );
    }
  };
  const onMount = () => {
    setMount(true);
  };
  const reset = () => {
    const values = form.getValues();
    if (!!roleId && mount) {
      if (values.selectPage === 'part') {
        form.setSchemaByPath('roleViewList', {
          props: {
            key: roleId,
            roleId,
            appIds: values.appIds,
            roleViewList: values.roleViewList,
            selectPage: values.selectPage,
          },
        });
      }

      if (values.allowApplication === 'part') {
        form.setSchemaByPath('appIds', {
          props: { roleId },
        });
      }

      if (values.allowApplication === 'all') {
        form.setSchemaByPath('appIds', {
          props: { roleId },
        });
      }
    }
  };
  useEffect(() => {
    reset();
  }, [roleId, mount]);
  return (
    <div className="qx-view" style={{ minHeight: 'calc(100% - 88px)' }}>
      <section
        className="qx-view_content"
        style={{ paddingLeft: '5px', backgroundColor: '#fff' }}
      >
        {roleId?.includes('default_user') && (
          <div style={{ padding: '10px 0 0 23px', color: '#999' }}>
            默认所有成员均拥有此角色
          </div>
        )}
        <div style={{ padding: '10px 0 0 15px' }}>
          <QxFormRender
            form={form}
            schema={SETTING_SCHEMA}
            onFinish={onFinish}
            onMount={onMount}
            widgets={{
              selectApplication: SelectApplication,
              permissionTree: PermissionTree,
            }}
            watch={{
              '#': (val) => {
                if (!val || Object.keys(val).length === 0) {
                  return;
                }
                // reset();
              },
              appIds: (val) => {
                const values = form.getValues();
                form.setSchemaByPath('roleViewList', {
                  props: {
                    key: roleId,
                    roleId,
                    appIds: val,
                    roleViewList: values.roleViewList,
                    selectPage: values.selectPage,
                  },
                });
              },
              selectPage: (val) => {
                if (val !== 'part') {
                  return;
                }
                const values = form.getValues();
                form.setSchemaByPath('roleViewList', {
                  props: {
                    key: roleId,
                    roleId,
                    appIds: values.appIds,
                    roleViewList: values.roleViewList,
                    selectPage: val,
                  },
                });
              },
            }}
          />
          <div style={{ margin: '18px 0' }}>
            <Button type="primary" onClick={form.submit}>
              保存
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
};
export default SystemRole;