import { useAjax } from "@/Hook/useAjax"
import { getCreativeReviewDetailApi } from "@/services/adqV3/global"
import { Card, Drawer, Table } from "antd"
import React, { useEffect, useState } from "react"
import { tableConfigDetail } from "./tableConfig"
import '../../tencentAdPutIn/index.less'

interface Props {
    dynamic: any
    visible?: boolean,
    onClose?: () => void
}
/**
 * 审核详情
 * @returns 
 */
const ReviewDetails: React.FC<Props> = ({ dynamic, visible, onClose }) => {

    /****************************/
    const [tableData, setTableData] = useState<any[]>([])
    const getCreativeReviewDetail = useAjax((params) => getCreativeReviewDetailApi(params))
    /****************************/

    useEffect(() => {
        if (dynamic && Object.keys(dynamic).length) {
            const { accountId, dynamicCreativeId } = dynamic
            getCreativeReviewDetail.run({ accountId, dynamicCreativeIds: [dynamicCreativeId] }).then(res => {
                console.log('------------->', res)
                if (res) {
                    let { elementResultList } = res[0]
                    let cover: any, count = 0
                    elementResultList.forEach((item: any) => {
                        if (item?.elementName === '图片' && item?.componentInfo?.componentType === "VIDEO") {
                            cover = item
                        }
                        if (item?.componentInfo) {
                            count += 1
                        }
                    })

                    setTableData(elementResultList?.map((item: any, index: number) => {
                        let params = { ...item, id: index, rowSpan: 1 }
                        if (item?.componentInfo?.componentType === 'VIDEO' && cover) {
                            if (item?.elementType === "VIDEO") {
                                params.rowSpan = 2
                            } else {
                                params.rowSpan = 0
                            }
                        }
                        if (index === count) {
                            params.rowSpan = elementResultList.length - count
                        } else if (index > count) {
                            params.rowSpan = 0
                        }
                        return params
                    }))
                }
            })
        }
    }, [dynamic])

    return <Drawer
        title={<strong>创意审核详情</strong>}
        visible={visible}
        width={'70%'}
        onClose={onClose}
        bodyStyle={{ backgroundColor: '#f1f4fc', padding: 10 }}
    >
        <Card
            title={<strong>{dynamic?.dynamicCreativeName}</strong>}
            bodyStyle={{ padding: 0 }}
            className="cardResetCss"
        >
            <Table
                columns={tableConfigDetail()}
                dataSource={tableData}
                size="small"
                loading={getCreativeReviewDetail?.loading}
                scroll={{ x: 1100 }}
                bordered
                rowKey={'id'}
            />
        </Card>
    </Drawer>
}

export default React.memo(ReviewDetails)