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,
  Divider,
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
const { RangePicker } = DatePicker;
import { useRequest, useModel } from '@umijs/max';
import { queryProfileList, queryApplyList, applyRepeal } 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';
const TYPE = {
  Contract: 1,
  OA: 2,
};
function Apply(props) {
  const {
    initialState: { user },
  } = useModel('@@initialState');
  const [tabActive, setTabActive] = useState('1');
  const [detail, setDetail] = useState({});
  const [conVisible, setConVisible] = useState(false);
  const approveFormRef = useRef();
  const [applyFormRef] = Form.useForm();
  let navigate = useNavigate();

  const contractResult = (res) => {
    let data = res.data?.list?.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}`,
      };
    });
    return { data, pagination: res.data?.pagination };
  };

  //OA我的申请列表
  const {
    data: OAApplyData,
    run: OAApplyRun,
    loading: OAApplyLoading,
  } = useRequest(queryApplyList, {
    // manual: true,
    formatResult: (res) => {
      return {
        data: res.data?.list?.map((item) => {
          return {
            ...item,
            CName: item.AuthorInfo.CName,
            table_desc: [item.table_desc],
            table_name: item.name,
          };
        }),
        pagination: res.data?.pagination,
      };
    },
  });

  //合同管理相关数据
  //请求我的申请列表
  const {
    data: conApplyData,
    run: conApplyRun,
    loading: conApplyLoading,
  } = useRequest(
    (data) =>
      queryGetContractList({ created_by: user?.ID, pageSize: 10, ...data }),
    {
      // manual: true,
      // defaultParams: [{ created_by: user?.ID, pageSize: 10 }],
      formatResult: contractResult,
    },
  );

  //撤回申请
  const { run: runRepeal, loading: repealLoading } = useRequest(
    (id) => applyRepeal({ id: id }),
    {
      manual: true,
      onSuccess: () => {
        OAApplyRun();
      },
    },
  );

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

  const onTabChange = (activeKey) => {
    if (activeKey == '1') {
      OAApplyRun();
    } else {
      conApplyRun({ current: 1 });
    }
    setTabActive(activeKey);
  };

  const onRepeal = (record) => {
    Modal.confirm({
      title: '撤回',
      icon: <ExclamationCircleOutlined />,
      content: `确定撤回申请`,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        runRepeal(record.id);
      },
    });
  };

  const handleApplySubmit = (values) => {
    console.log(values);
    OAApplyRun(values);
  };

  const handleApplyPaginationChange = (pagination) => {
    applyFormRef.validateFields().then((values) => {
      OAApplyRun({
        ...values,
        currentPage: pagination.current,
        pageSize: pagination.pageSize,
      });
    });
  };

  const handleProfilePaginationChange = (pagination) => {
    conApplyRun({
      current: pagination.current,
    });
  };

  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: 'status',
      render: (record) => {
        if (record.is_repeal) return '已撤回';
        switch (record.audit_status) {
          case 0:
            return '审核中';
          case 1:
            return '通过';
          case 2:
            return '拒绝';
          case 3:
            return '终审通过';
        }
      },
      width: '20%',
    },
    {
      title: '操作',
      render: (text, record) => {
        return (
          !record.is_repeal && (
            <Fragment>
              <>
                <a
                  style={{ color: '#4096ff' }}
                  onClick={() => {
                    navigate(`/profile/${record.id}`);
                  }}
                >
                  详情
                </a>
                {tabActive == '1' && record?.audit_status == 0 && (
                  <>
                    <Divider type="vertical" />
                    <a
                      style={{ color: '#4096ff' }}
                      onClick={() => onRepeal(record)}
                    >
                      撤回
                    </a>
                  </>
                )}
              </>
            </Fragment>
          )
        );
      },
      width: '10%',
    },
  ];
  const agreementColumns = [
    {
      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 renderPage = (activeKey) => {
    if (activeKey == '1')
      return (
        <>
          {' '}
          <Form
            name="basic"
            // labelCol={{ span: 0 }}
            // wrapperCol={{ span: 24 }}
            onFinish={handleApplySubmit}
            form={applyFormRef}
          >
            <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
            rowKey="id"
            columns={columns}
            dataSource={applyData}
            loading={OAApplyLoading}
            pagination={OAApplyData?.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={agreementColumns}
            dataSource={conApplyData?.data}
            loading={conApplyLoading}
            pagination={conApplyData?.pagination}
            onChange={handleProfilePaginationChange}
          />
        </>
      );
  };
  return (
    <PageContent
      tabList={[
        {
          tab: `OA审批(${OAApplyData?.pagination?.total || 0})`,
          key: '1',
        },
        {
          tab: `合同管理(${conApplyData?.pagination?.total || 0})`,
          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 Apply;