import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import ProTable, { ActionType } from "@ant-design/pro-table";
import { useRef, useState } from "react";
import { Drawer, FormInstance } from "antd";
import ContractDetailDrawer from "@/pages/contract/components/detail"
import ProjectDetail from '@/pages/BussinessProject/detail'
import { handleGetBusinessProjectList } from "../service";
import moment from 'moment'

type DetailProps = {
    tableData: any
    detail: any
}
const ContractDetail = ({ tableData, detail }: DetailProps) => {
    const actionRef = useRef<ActionType>();
    const tableFormRef = useRef<FormInstance>();

    // 合同详情抽屉
    const [contractDrawer, setContractDrawer] = useState<boolean>(false)
    // 项目详情抽屉
    const [projectDrawer, setProjectDrawer] = useState<boolean>(false)
    // 点击行的数据详情
    const [currentRow, setCurrentRow] = useState<any>()


    const columns: any = [
        {
            title: '项目名称',
            dataIndex: 'BUSINESSPROJECT_NAME',
            width: 300,
            ellipsis: true,
            render: (_, record) => {
                return <a style={{ display: 'inline-block', width: '270px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }} onClick={() => {
                    setCurrentRow(record)
                    setProjectDrawer(true)
                }}>
                    {record?.BUSINESSPROJECT_NAME || ''}
                </a>
            }
        },
        {
            title: '合同名称',
            dataIndex: 'COMPACT_NAME',
            width: 300,
            render: (_, record) => {
                return <a style={{ display: 'inline-block', width: '270px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }} onClick={() => {
                    setCurrentRow(record)
                    setContractDrawer(true)
                }}>
                    {record?.COMPACT_NAME || ''}
                </a>
            }
        },
        {
            title: '项目开始时间',
            width: 120,
            dataIndex: 'PROJECT_STARTDATE',
            render: (_, record) => {
                return record?.PROJECT_STARTDATE ? moment(record?.PROJECT_STARTDATE).format('YYYY-MM-DD') : ''
            }
        },
        {
            title: '项目结束时间',
            width: 120,
            dataIndex: 'PROJECT_ENDDATE',
            render: (_, record) => {
                return record?.PROJECT_ENDDATE ? moment(record?.PROJECT_ENDDATE).format('YYYY-MM-DD') : ''
            }
        },
        // {
        //     title: '有效状态',
        //     dataIndex: 'PROJECT_VALID',
        //     valueType: 'select',
        //     valueEnum: {
        //         1: '有效',
        //         0: '无效',
        //     }
        // }
    ]

    return (
        <div>
            <ProTable
                actionRef={actionRef}
                formRef={tableFormRef}
                columns={columns}
                search={false}
                request={async () => {
                    console.log('detail', detail);
                    let req: any = {
                        SearchParameter: {
                            SERVERPARTSHOP_ID: detail?.SERVERPARTSHOP_ID || detail?.PropertyShop.SERVERPARTSHOP_ID,
                            PROJECT_VALID: 1
                        },
                        PageIndex: 1,
                        PageSize: 999999
                    }
                    const data = await handleGetBusinessProjectList(req)
                    console.log('data', data);
                    if (data && data.length > 0) {
                        return { data, success: true }
                    }
                    return { data: [], success: true }
                }}
            // dataSource={tableData}
            />



            {/* 跳转到合同详情 */}
            <Drawer
                width={'80%'}
                visible={contractDrawer}
                onClose={() => {
                    setCurrentRow(undefined);
                    setContractDrawer(false);
                }}
                bodyStyle={{ backgroundColor: "#f9f9f9", padding: 16 }}
                closable={false}
                destroyOnClose
            >
                <ContractDetailDrawer contractId={currentRow?.REGISTERCOMPACT_ID} currentRow={currentRow}></ContractDetailDrawer>
            </Drawer>

            {/* 跳转到项目详情 */}
            <Drawer
                width={'80%'}
                visible={projectDrawer}
                onClose={() => {
                    setCurrentRow(undefined);
                    setProjectDrawer(false);
                }}
                bodyStyle={{ backgroundColor: "#f9f9f9", padding: 16 }}
                closable={false}
                destroyOnClose
            >
                <ProjectDetail id={currentRow?.BUSINESSPROJECT_ID} businessType={currentRow?.businessType} showType={'Nooperate'}></ProjectDetail>
            </Drawer>
        </div>
    )
}

export default connect(({ user, }: ConnectState) => ({
    currentUser: user.currentUser,
}))(ContractDetail);