import { Button, Descriptions, Form, Input, Modal, Typography } from "antd"
import React, { useEffect, useState } from "react"
import UploadImg from "./uploadImg"
import InputByteLength from "../inputByteLength"
import { txtLength } from "@/utils/utils"
import { useAjax } from "@/Hook/useAjax"
import { getAppIdListApi } from "../../API/global"



interface Props {
    value?: any
    visible?: boolean,
    onChange?: (value?: any) => void
    onClose?: () => void
}
const MiniprogramModal: React.FC<Props> = ({ value, visible, onChange, onClose }) => {

    /***************************/
    const [checkData, setCheckData] = useState<{ appDesc: string, appId: string, appName: string, appRemark: string }>()
    const [form] = Form.useForm();
    const miniprogramAppid = Form.useWatch('miniprogramAppid', form)

    const getAppIdList = useAjax((params) => getAppIdListApi(params))
    /***************************/

    useEffect(() => {
        if (value && Object.keys(value).length > 0) {
            form.setFieldsValue({ ...value })
        }
    }, [value])

    const handleOk = () => {
        form.validateFields().then(valid => {
            onChange?.(valid)
        }).catch(err => {})
    }

    const check = () => {
        getAppIdList.run({ pageNum: 1, pageSize: 1, appId: miniprogramAppid }).then(res => {
            if (res?.data?.records) {
                setCheckData(res?.data?.records?.[0])
            } else {
                setCheckData(undefined)
            }
        })
    }

    return <Modal
        title='添加小程序'
        open={visible}
        onCancel={() => onClose?.()}
        onOk={handleOk}
    >
        <Form
            form={form}
            labelCol={{ span: 5 }}
            autoComplete="off"
            initialValues={{}}
            labelAlign="left"
            colon={false}
        >
            <Form.Item
                name="miniprogramTitle"
                label={<strong>小程序标题</strong>}
                rules={[
                    { required: true, message: '请输入小程序标题!', type: 'string' },
                    {
                        required: true, message: '长度不超过64字节，一个中文（3字节），英文（1字节）', validator(rule, value, callback) {
                            if (txtLength(value?.toString()) > 64) {
                                return Promise.reject()
                            }
                            return Promise.resolve()
                        },
                    },
                ]}
            >
                <InputByteLength placeholder="请输入小程序标题" maxLength={64} showCount />
            </Form.Item>
            <Form.Item name="miniprogramPicurl" label={<strong>小程序图片</strong>} rules={[{ required: true, message: '请上传图片!' }]}>
                <UploadImg size={{ width: 675, height: 540, evalW: '!=', evalH: '!=', msg: '需要图片大小675*540' }} isEdit={true} type="miniprogram" isCropper />
            </Form.Item>
            {/* <Form.Item label="小程序APPID">
                <div style={{ width: '100%', display: 'flex', gap: 10 }}>
                    <Form.Item name="miniprogramAppid" noStyle normalize={(value) => { return value?.trim() }}>
                        <Input placeholder="请输入小程序APPID" style={{ width: '100%' }} />
                    </Form.Item>
                    <Button disabled={!miniprogramAppid} onClick={check} loading={getAppIdList.loading}>校验详情</Button>
                </div>
            </Form.Item> */}
            {/* {checkData && <Form.Item label={<span></span>}>
                <Descriptions>
                    <Descriptions.Item label="名称" span={3}>{checkData?.appName}</Descriptions.Item>
                    <Descriptions.Item label="详情" span={3}>{checkData?.appDesc}</Descriptions.Item>
                    <Descriptions.Item label="备注" span={3}>{checkData?.appRemark}</Descriptions.Item>
                </Descriptions>
            </Form.Item>}
            <Form.Item name="miniprogramPage" label="小程序路径" normalize={(value) => { return value?.trim() }}>
                <Input placeholder="请输入小小程序路径（pages/index/index）" />
            </Form.Item> */}
        </Form>
    </Modal>
}


export default React.memo(MiniprogramModal)