import React, { useRef, useState } from 'react';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Button, Col, Empty, Row, message } from 'antd';
import ApprovalProcess from './components/ApprovalProcess';
import AuditDetailed from './components/AuditDetailed';
import AliyunOSSUpload from '@/components/OssUpload/AliyunOssUploader';
import {
  queryProcessFlows,
  createAduit,
  advanceSubmitNextNode,
  queryOSSData,
} from '@/services/boom';
import { useParams, useRequest, useNavigate } from 'umi';

const OaDetail = () => {
  const [approvalProcess, setApprovalProcess] = useState([]);
  const { oaId } = useParams();
  const formValueRef = useRef({
    form: '',
  });
  const uploadList = useRef([]);
  const navigate = useNavigate();
  const { data, loading } = useRequest(queryProcessFlows, {
    defaultParams: [{ ids: oaId }],
  });
  const { data: OSSData } = useRequest(queryOSSData, {
    defaultParams: [{ ids: oaId }],
  });
  console.log(OSSData);
  const { loading: createLoadin, run: createRun } = useRequest(createAduit, {
    manual: true,
    onSuccess() {
      message.success('申请审批成功');
      navigate(-1);
    },
  });

  const { run } = useRequest(advanceSubmitNextNode, {
    debounceInterval: 500,
    manual: true,
    formatResult(res) {
      setApprovalProcess(res.data[0]);
    },
  });

  //填写表单实时计算审批流程
  const advanceSubmit = async (changedFields, allValues) => {
    console.log(changedFields, allValues);
    let formValues = data.formData
      .map((item) => {
        const itemProps = item.props;
        let val = allValues[itemProps.id];
        if (!itemProps.label) return;
        if (!val && val !== 0) return;
        if (val instanceof Object) {
          return {
            name: itemProps.label,
            id: itemProps.id,
            value: [...val],
          };
        } else if (allValues[itemProps.id]) {
          return {
            name: itemProps.label,
            id: itemProps.id,
            value: [allValues[itemProps.id]] || undefined,
          };
        }
      })
      .filter((item) => item);

    let params = {
      flow_id: Number(oaId),
      template_node_id: 0,
      formComponentValues: formValues,
      audit_list: [],
    };
    formValueRef.current.form = formValues;
    run(params);
  };

  const submit = () => {
    const { form } = formValueRef.current;
    const audit_list = approvalProcess?.map((item) => {
      if (item[0].type == 'role') return item[0].nowValue;
      return item[0].value;
    });
    createRun({
      flow_id: Number(oaId),
      form: JSON.stringify(form),
      audit_list,
      files: uploadList.current.join(','),
    });
  };
  const OnModelFileDone = (file) => {
    var path = OSSData.host + '/' + file.url;
    uploadList.current = [...uploadList.current, path];
    // const files = form.getFieldsValue('files');
    // form.setFieldValue('files', files.concat(path));
    // console.log(uploadList.current);
    // setThumbnail(path);
  };

  return (
    <PageContainer
      loading={loading}
      footer={[
        <Button onClick={submit} type="primary" loading={createLoadin}>
          提交审批
        </Button>,
      ]}
    >
      <ProCard style={{ minHeight: '80vh' }}>
        <Row gutter={24}>
          <Col span={12}>
            {OSSData && (
              <AliyunOSSUpload
                OSSData={OSSData}
                onDone={OnModelFileDone}
                directory={false}
                noStyle={false}
                label="上传文件"
              />
            )}
            <AuditDetailed
              items={data?.formData}
              onValuesChange={advanceSubmit}
            />
          </Col>
          <Col span={12}>
            {approvalProcess.length == 0 ? (
              <Empty description="请先填写表单" />
            ) : (
              <ApprovalProcess
                approvalProcess={approvalProcess}
                onChange={setApprovalProcess}
              />
            )}
          </Col>
        </Row>
      </ProCard>
    </PageContainer>
  );
};

export default OaDetail;