import { useAjax } from "@/Hook/useAjax"
import { getFsResultApi } from "@/services/adqV3/global"
import { Button, Descriptions, Modal } from "antd"
import React, { useState } from "react"
import { APPEAL_STATUS_ENUM, ELEMENT_ENUM } from "../../tencentAdPutIn/const"
import '../../tencentAdPutIn/index.less'

interface Props {
    data: {
        componentInfo: { componentId: number },
        elementFingerprint: string,
        elementId: number,
        accountId: number,
        dynamicCreativeId: number
    }
}

/**
 * 查看复审结果
 * @param param0 
 * @returns 
 */
const LookResult: React.FC<Props> = ({ data }) => {

    /********************************/
    const [result, setResult] = useState<{ visible: boolean, data: { [x: string]: any } }>({ visible: false, data: {} })
    const getFsResult = useAjax((params) => getFsResultApi(params))
    /********************************/

    const getRetriaResult = () => {
        const { componentInfo: { componentId }, elementFingerprint, elementId, accountId, dynamicCreativeId } = data
        getFsResult.run({ accountId, dynamicCreativeId, componentId, elementFingerPrint: elementFingerprint, elementId }).then(res => {
            if (res) {
                setResult({ visible: true, data: res })
            }
        })
    }

    return <>
        <Button style={{ fontSize: 12, padding: 0, margin: 0 }} type="link" onClick={getRetriaResult} loading={getFsResult.loading}>查询复审结果</ Button>

        {result.visible && <Modal
            title={<strong>复审结果</strong>}
            open={result.visible}
            onCancel={() => setResult({ visible: false, data: {} })}
            footer={null}
            className='modalResetCss'
            width={750}
        >
            <Descriptions bordered>
                <Descriptions.Item label="元素类型">{ELEMENT_ENUM[result?.data?.elementType as keyof typeof ELEMENT_ENUM]}</Descriptions.Item>
                <Descriptions.Item label="申诉复审需求">{result?.data?.appealDemand || '--'}</Descriptions.Item>
                <Descriptions.Item label="申诉原因">{result?.data?.appealReason || '--'}</Descriptions.Item>
                <Descriptions.Item label="申诉状态">{APPEAL_STATUS_ENUM[result?.data?.appealStatus as keyof typeof APPEAL_STATUS_ENUM]}</Descriptions.Item>
                <Descriptions.Item label="详细描述">{result?.data?.description || '--'}</Descriptions.Item>
                <Descriptions.Item label="申诉结果">{result?.data?.appealResult || '--'}</Descriptions.Item>
            </Descriptions>
        </Modal>}
    </>
}

export default React.memo(LookResult)