import { App, Form, InputNumber, Select } from "antd";
import React from "react";
import SelectBook from "../../selectBook";
import { useAjax } from "@/Hook/useAjax";
import { getFreeChapterListApi } from "@/pages/weComTask/API/bookLink";

interface Props extends BOOKLINK.BookLinkChildProps {
    huaShengCreateLinkDTO: { [x: string]: any }
    platform: string,
    mpAccountIds: number[]
}
/**
 * 花生作品链接
 * @returns 
 */
const BookPromoLinkCreateDTO: React.FC<Props> = ({ restField, name, huaShengCreateLinkDTO, platform, mpAccountIds }) => {

    /**********************************/
    const { message } = App.useApp()
    const getFreeChapterList = useAjax((params) => getFreeChapterListApi(params))
    /**********************************/

    const getChapterList = () => {
        if (platform && mpAccountIds?.length && huaShengCreateLinkDTO?.bookPromoLinkCreateDTO?.bookId) {
            getFreeChapterList.run({ platform, mpAccountIds, bookId: huaShengCreateLinkDTO.bookPromoLinkCreateDTO.bookId })
        } else {
            message.error('请先选择书城、公众号')
        }
    }

    return <>
        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'bookId']}
            rules={[{ required: true, message: '请输入作品(书籍)ID!' }]}
            label={<strong>作品(书籍)ID</strong>}
        >
            <SelectBook
                platformKey={platform}
                searchChapterDisabled={!huaShengCreateLinkDTO?.bookPromoLinkCreateDTO?.bookId}
                searchChapterLoading={getFreeChapterList.loading}
                hanldeSearchChapter={getChapterList}
            />
        </Form.Item>

        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'chapterId']}
            label={<strong>章节</strong>}
            rules={[{ required: true, message: '请选择章节!' }]}
        >
            <Select
                showSearch
                placeholder="请选择章节"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                }
                allowClear
                options={getFreeChapterList?.data?.data?.chapterList?.map(item => ({ value: item.chapterId, label: item.chapterName }))}
            />
        </Form.Item>

        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'forceChapter']}
            label={<strong>强关章节序号</strong>}
            rules={[{ required: true, message: '请输入强关章节序号!' }]}
        >
            <InputNumber placeholder="请输入强关章节序号" style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
            {...restField}
            name={[name, 'bookPromoLinkCreateDTO', 'cost']}
            label={<strong>推广成本</strong>}
            rules={[{ required: true, message: '请输入推广成本!' }]}
        >
            <InputNumber placeholder="请输入推广成本" min={0} style={{ width: '100%' }} />
        </Form.Item>
    </>
}

export default React.memo(BookPromoLinkCreateDTO);