import React, { Fragment, useState, useEffect, useMemo, useRef } from 'react';
import { useNavigate } from 'umi';
import {
  Card,
  Table,
  Empty,
  Button,
  Modal,
  message,
  Form,
  DatePicker,
  Row,
  Col,
  Select,
} from 'antd';
import { PageContainer } from '@ant-design/pro-components';
const { RangePicker } = DatePicker;
import { useRequest, useModel } from '@umijs/max';
import { queryProfileList, queryApplyList } from '@/services/boom';
import dayjs from 'dayjs';
import { queryContractCheck, queryGetContractList } from '@/services/contract';
import ContractModal, {
  Status,
  StatusText,
  Type,
} from '../ContractManager/component/Modal';
import PageContent from '@/components/PageContent';

function profile(props) {
  const { submitting, params, dispatch } = props;
  const { user } = useModel('userInfo');
  const [tabActive, setTabActive] = useState('1');
  const approveFormRef = useRef();
  const applyFormRef = useRef();
  let navigate = useNavigate();
  const [detail, setDetail] = useState({});
  const [conVisible, setConVisible] = useState(false);

  const TYPE = {
    Contract: 1,
    OA: 2,
  };

  //OA我的申请列表
  const {
    data: OAApplyData,
    run: OAApplyRun,
    loading: OAApplyLoading,
  } = useRequest(queryProfileList, {
    // manual: true,
    formatResult: (res) => {
      return res.data?.list?.map((item) => {
        return {
          ...item,
          CName: item.AuthorInfo.CName,
          table_desc: [item.table_desc],
          statusText: (() => {
            switch (item.audit_status) {
              case 0:
                return '审核中';
              case 1:
                return '通过';
              case 2:
                return '拒绝';
              case 3:
                return '终审通过';
            }
          })(),
          key: `${TYPE.Contract}_${item.id}`,
          type: TYPE.OA,
        };
      });
    },
  });
  //OA我的审批和待审批列表
  const {
    data: OAAuditData,
    run: OAAuditRun,
    loading: OAAuditLoading,
  } = useRequest(queryProfileList, {
    manual: true,
    formatResult: (res) => {
      return res.data?.list?.map((item) => {
        return {
          ...item,
          CName: item.AuthorInfo.CName,
          table_desc: [item.table_desc],
          statusText: item.status,
          // key: `${TYPE.Contract}_${item.id}`,
          showBtn: true,
          type: TYPE.OA,
        };
      });
    },
  });

  //合同管理返回处理函数
  const contractResult = (res) => {
    let data = res.data?.list;
    return data?.map((item) => {
      return {
        ...item,
        table_name: `${user.CName}提交的合同审批`,
        table_desc: [
          `合同名称：${item.name}`,
          `合同编号：${item.code}`,
          `合同金额：${item.amount}万元`,
        ],
        CName: user.CName,
        create_time: item.cancel_on || item.created_on,
        type: TYPE.Contract,
        statusText: StatusText[item.status],
        showBtn:
          item.status == Status.Checking || item.status == Status.CalChecking,
        // key: `${TYPE.Contract}_${item.id}`,
      };
    });
  };

  //合同管理相关数据
  //请求我的申请列表
  const {
    data: conApplyData,
    run: conApplyRun,
    loading: conApplyLoading,
  } = useRequest(queryGetContractList, {
    defaultParams: [{ created_by: user?.ID }],
    formatResult: contractResult,
  });
  //我的待审批列表
  const {
    data: conAuditData,
    run: conAuditRun,
    loading: conAduitLoading,
  } = useRequest((data) => queryGetContractList(data), {
    manual: true,
    formatResult: contractResult,
  });
  //我审批过的列表
  const {
    data: conAuditedData,
    run: conAuditedRun,
    loading: conAduitedLoading,
  } = useRequest((data) => queryGetContractList(data), {
    manual: true,
    formatResult: contractResult,
  });

  //审核合同
  const { run: runCheck, loading: checkLoading } = useRequest(
    (data) => queryContractCheck(data),
    {
      manual: true,
      onSuccess: () => {
        conAuditRun({ status: 1 });
        conAuditedRun({ check_by: user.CName });
        setConVisible(false);
        message.success('审核成功');
      },
      onErroe: () => {
        message.error('审核失败');
      },
    },
  );

  //拼接审核数据和申请数据  审核loading和申请loading
  const auditData = useMemo(() => {
    let result = [];
    if (OAAuditData && OAAuditData.length > 0) result = [...OAAuditData];
    if (conAuditData && conAuditData.length > 0)
      result = [...result, ...conAuditData];
    if (conAuditedData && conAuditedData.length > 0)
      result = [...result, ...conAuditedData];
    return result;
  }, [OAAuditData, conAuditData, conAuditedData]);

  const auditLoading = useMemo(() => {
    let loading = false;
    if (OAAuditLoading || conAduitLoading || conAduitedLoading) loading = true;
    return loading;
  }, [OAAuditLoading, conAduitLoading, conAduitedLoading]);

  const applyData = useMemo(() => {
    let result = [];
    if (OAApplyData && OAApplyData.length > 0) result = [...OAApplyData];
    if (conApplyData && conApplyData.length > 0)
      result = [...result, ...conApplyData];
    return result;
  }, [OAApplyData, conApplyData]);

  const applyLoading = useMemo(() => {
    let loading = false;
    if (OAApplyLoading || conApplyLoading) loading = true;
    return loading;
  }, [OAApplyLoading, conApplyLoading]);

  // useEffect(() => {
  //   if (user?.Permission['menu-001-audit']) run({ status: 1 });
  // }, [user]);

  const onTabChange = (activeKey) => {
    if (activeKey == '1') {
      OAApplyRun();
      conApplyRun();
    } else {
      OAAuditRun();
      if (user?.Permission['menu-001-audit']) conAuditRun({ status: 1 });
      conAuditedRun({ check_by: user.CName });
    }
    setTabActive(activeKey);
  };
  const columns = [
    {
      title: '标题',
      dataIndex: 'table_name',
      width: '30%',
    },
    {
      title: '摘要',
      dataIndex: 'table_desc',
      render: (descList) => {
        return (
          <ul>
            {descList?.map((item) => (
              <li>{item}</li>
            ))}
          </ul>
        );
      },
    },
    {
      title: '发起人',
      dataIndex: 'CName',
      width: '20%',
    },
    {
      title: '发起时间',
      render: (record) => {
        return dayjs(record.create_time).format('YYYY-MM-DD HH:mm:ss');
      },
      width: '20%',
    },
    {
      title: '流程状态',
      dataIndex: 'statusText',
      // render: (record) => {
      //   switch (record.audit_status) {
      //     case 0: return '审核中'
      //     case 1: return '通过'
      //     case 2: return '拒绝'
      //     case 3: return '终审通过'
      //   }
      // },
      // width: '20%'
    },
    {
      title: '操作',
      render: (text, record) => (
        <Fragment>
          <>
            <a
              style={{ color: '#4096ff' }}
              onClick={() => {
                navigate(`/profile/${record.id}`);
              }}
            >
              申请
            </a>
          </>
        </Fragment>
      ),
      width: '10%',
    },
  ];
  const approveColumns = [
    {
      title: '标题',
      dataIndex: 'table_name',
    },
    {
      title: '摘要',
      dataIndex: 'table_desc',
      render: (descList) => {
        return (
          <ul>
            {descList?.map((item) => (
              <li>{item}</li>
            ))}
          </ul>
        );
      },
    },
    {
      title: '发起人',
      dataIndex: 'CName',
    },
    {
      title: '发起时间',
      render: (record) => {
        return dayjs(record.create_time).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '流程状态',
      dataIndex: 'statusText',
    },
    {
      title: '操作',
      dataIndex: 'showBtn',
      render: (text, record) => (
        <>
          {text ? (
            <a
              style={{ color: '#4096ff' }}
              onClick={() => {
                if (record.type == TYPE.Contract) {
                  setDetail(record);
                  setConVisible(true);
                } else {
                  navigate(`/oa/detail/${record.flow_id}/${record.id}`);
                }
              }}
            >
              审批
            </a>
          ) : (
            <div>已审批</div>
          )}
        </>
      ),
    },
  ];
  const handleApplySubmit = (values) => {
    console.log(values);
    queryApplyListRequest.run(values);
  };
  const handleApproveSubmit = (values) => {
    console.log(values);
  };
  const handleApplyPaginationChange = (pagination) => {
    queryApplyListRequest.run({
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
    });
  };
  const handleProfilePaginationChange = (pagination) => {
    queryProfileListRequest.run({
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
    });
  };
  const renderPage = (activeKey) => {
    if (activeKey == '1')
      return (
        <>
          {' '}
          <Form
            name="basic"
            // labelCol={{ span: 0 }}
            // wrapperCol={{ span: 24 }}
            onFinish={handleApplySubmit}
            ref={applyFormRef}
          >
            <div style={{ display: 'flex' }}>
              <Form.Item name="range-picker" label="申请时间：">
                <RangePicker />
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ marginLeft: 10 }}
                >
                  查询
                </Button>
              </Form.Item>
            </div>
          </Form>
          <Table
            columns={columns}
            dataSource={applyData}
            loading={applyLoading}
            // columns={columns}
            // loading={queryApplyListRequest.loading}
            // dataSource={queryApplyListRequest?.data?.list}
            // pagination={queryApplyListRequest?.data?.pagination}
            // onChange={handleApplyPaginationChange}
          />
        </>
      );
    else if (activeKey == '2')
      return (
        <>
          {' '}
          <Form
            name="basic"
            // labelCol={{ span: 0 }}
            // wrapperCol={{ span: 24 }}
            onFinish={handleApproveSubmit}
            ref={approveFormRef}
          >
            <div style={{ display: 'flex' }}>
              <Form.Item name="range-picker" label="审批时间：">
                <RangePicker />
              </Form.Item>
              <Form.Item name="audit_status" label="状态：" initialValue="">
                <Select
                  style={{ width: 120 }}
                  options={[
                    { value: '', label: '全部' },
                    { value: '0', label: '审核中' },
                    { value: '1', label: '通过' },
                    { value: '2', label: '拒绝' },
                    { value: '3', label: '终审通过' },
                  ]}
                />
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ marginLeft: 10 }}
                >
                  查询
                </Button>
              </Form.Item>
            </div>
          </Form>
          <Table
            columns={approveColumns}
            dataSource={auditData}
            loading={auditLoading}
            // loading={queryProfileListRequest.loading}
            // columns={approveColumns}
            // dataSource={queryProfileListRequest?.data?.list}
            // pagination={queryProfileListRequest?.data?.pagination}
            // onChange={handleProfilePaginationChange}
          />
        </>
      );
  };
  return (
    <PageContent
    
      tabList={[
        {
          tab: '我的申请',
          key: '1',
        },
        {
          tab: '我的审批',
          key: '2',
        },
      ]}
      onTabChange={onTabChange}
    >
      <div>{renderPage(tabActive)}</div>
      <ContractModal
        detail={detail}
        type={Type.check}
        // projectList={projectData?.list}
        visible={conVisible}
        handleOk={(data) =>
          detail.status == Status.Checking ? runCheck(data) : null
        }
        handleCancel={() => setConVisible(false)}
      />
    </PageContent>
  );
}
export default profile;
