import React, { Fragment, useState, useEffect, useMemo, useRef } from 'react';
import { useNavigate } from 'umi';
import { Table, Modal, DatePicker, Divider } from 'antd';
import { useRequest } from '@umijs/max';
import { queryProfileList, queryApplyList, applyRepeal } from '@/services/boom';
import dayjs from 'dayjs';
import PageContent from '@/components/PageContent';
import { queryApprovedList } from '@/services/contract';
import { ExclamationCircleOutlined } from '@ant-design/icons';

export const Type = {
  OA: 1,
  CON: 2,
};

function profile(props) {
  const [tabActive, setTabActive] = useState('1');
  const [loading, setLoading] = useState(false);
  const [columns, setColumes] = useState([]);
  const [data, setData] = useState({
    list: [],
    pagination: {},
  });
  let navigate = useNavigate();

  const columnsApplay = [
    {
      title: '标题',
      dataIndex: 'table_name',
      width: '30%',
    },

    {
      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: (record) => {
        return (
          !record.is_repeal && (
            <Fragment>
              <>
                <a
                  style={{ color: '#4096ff' }}
                  onClick={() => {
                    if (record.extend_code) {
                      navigate('/profile/detail', {
                        state: {
                          id: record.id,
                          code: record.extend_code,
                          type: Type.CON,
                        },
                      });
                    } else {
                      navigate('/profile/detail', {
                        state: { id: record.id, type: Type.OA },
                      });
                    }
                  }}
                >
                  详情
                </a>
                {tabActive == '1' && record?.audit_status == 0 && (
                  <>
                    <Divider type="vertical" />
                    <a
                      style={{ color: '#4096ff' }}
                      onClick={() => onRepeal(record)}
                    >
                      撤回
                    </a>
                  </>
                )}
              </>
            </Fragment>
          )
        );
      },
      width: '10%',
    },
  ];
  const columnsApproved = [
    {
      title: '标题',
      dataIndex: '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: '我审批的时间',
      render: (record) => {
        return dayjs(record.audit_time).format('YYYY-MM-DD HH:mm:ss');
      },
      width: '20%',
    },
    {
      title: '状态',
      // dataIndex: 'status',
      render: (record) => {
        switch (record.audit_status) {
          case 0:
            return '审核中';
          case 1:
            return '通过';
          case 2:
            return '拒绝';
          case 3:
            return '终审通过';
        }
      },
      width: '20%',
    },
  ];

  //我的申请
  const queryApplay = async () => {
    const data = await queryApplyList();
    console.log(data);
    setData(data);
    setLoading(false);
  };
  //我的待审批
  const queryApprove = async () => {
    const data = await queryProfileList();
    console.log(data);
    setData(data);
    setLoading(false);
  };
  //我的已审批
  const queryApproved = async () => {
    const data = await queryApprovedList();
    console.log(data);
    setData(data);
    setLoading(false);
  };

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

  const handlerTabChange = (tab) => {
    setLoading(true);
    switch (tab) {
      case '1':
        setColumes(columnsApplay);
        queryApplay();
        break;
      case '2':
        setColumes(columnsApplay);
        queryApprove();
        break;
      case '3':
        setColumes(columnsApproved);
        queryApproved();
        break;
    }
  };

  useEffect(() => {
    handlerTabChange('1');
  }, []);

  useEffect(() => {
    handlerTabChange(tabActive);
  }, [tabActive]);

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

  return (
    <PageContent
      tabList={[
        {
          tab: '我的申请',
          key: '1',
        },
        {
          tab: '我的审批',
          key: '2',
        },
        {
          tab: '已审批',
          key: '3',
        },
      ]}
      onTabChange={setTabActive}
    >
      <Table columns={columns} dataSource={data?.list} loading={loading} />
    </PageContent>
  );
}
export default profile;
