import { useModel } from 'umi'
import { Modal, Button, Form, Select, message, Space } from 'antd'
import { SelectValue } from 'antd/es/select'
import TextArea from 'antd/lib/input/TextArea'
import React, { useCallback, useEffect, useState } from "react"
import style from './index.less'
const { Option } = Select

type Props = {
    visible: boolean,
    // handleOk: () => void
    hideModal: () => void,
    editData?: any,
    ajax: any,
    dataType: string
}

function AddTitle(props: Props) {
    let { visible, hideModal, editData, ajax, dataType: typeData } = props
    const [queryForm, setQueryForm] = useState<any>({ content: '', labelIds: [], title: '', dataType: typeData })
    const [maxLength, setMaxLength] = useState<number>(0)//内容
    const [maxTLength, setMaxTLength] = useState<number>(0)//标题
    const { addContents, getLabels, editContents } = useModel('useLaunch.useMaterial')
    useEffect(() => {
        if (editData && typeof editData === 'object' && Object.keys(editData).length > 0) {
            let { content, labelIds, title, id } = editData
            setQueryForm({ content, labelIds: labelIds || [], title, id, dataType: typeData })
        }
    }, [editData])
    useEffect(() => {
        getLabels.run({ pageNum: 1, pageSize: 200 })
    }, [])
    // 输入文案时判断
    useEffect(() => {
        if (queryForm.content) {
            let length = queryForm.content?.length
            let text = queryForm.content?.replace(/[\x00-\xff]/g, '')
            setMaxLength(text?.length + Number(((length - text?.length) / 2).toFixed()))
        } else {
            setMaxLength(0)
        }
    }, [queryForm.content])
    useEffect(() => {
        if (queryForm.title) {
            let length = queryForm.title?.length
            let text = queryForm.title?.replace(/[\x00-\xff]/g, '')
            setMaxTLength(text?.length + Number(((length - text?.length) / 2).toFixed()))
        } else {
            setMaxTLength(0)
        }
    }, [queryForm.title])
    /** 上传创意 确定  */
    const handleOk = useCallback(() => {
        let { labelIds, content, title, dataType, id } = queryForm
        let isOk = (content || title)
        if (!isOk) {
            message.error('请输入文案或标题')
            return
        }
        if (maxLength > 40) {
            message.error('文案超过40字')
            return
        }
        if (maxTLength > 12) {
            message.error('标题超过12字')
            return
        }
        if (labelIds.length === 0) {
            message.error('请选择标签')
            return
        }
        if (editData && typeof editData === 'object' && Object.keys(editData).length > 0) {// 修改
            editContents.run({ content, title, dataType, labelIds, id }).then(res => {
                setQueryForm({ title: '', labelIds: [], content: '', dataType: '' })
                hideModal()
                ajax?.refresh()
            })
        } else {  // 新增
            addContents.run({ content, title, dataType, labelIds }).then(res => {
                setQueryForm({ title: '', labelIds: [], content: '', dataType: '' })
                hideModal()
                ajax?.refresh()
            })
        }

    }, [queryForm, maxLength, maxTLength])
    return <Modal visible={visible} title="上传文案/标题" onOk={handleOk} onCancel={hideModal}
        footer={
            <>
                <Space>
                    <Button onClick={hideModal}>取消</Button>
                    <Button type="primary" onClick={handleOk} loading={addContents?.loading || editContents?.loading}>{editData && typeof editData === 'object' && Object.keys(editData).length > 0 ? '修改' : '新增'}</Button>
                </Space>
            </>
        }
    >
        <Form labelCol={{ span: 4 }}>
            <Form.Item >
                <TextArea
                    disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0}
                    value={queryForm.title}
                    placeholder="请输入标题"
                    autoSize={{ minRows: 1, maxRows: 3 }}
                    onChange={(e) => { setQueryForm({ ...queryForm, title: e.target.value }) }}
                />
                <div className={style.maxLength}>
                    <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{maxTLength > 12 && '广告标题不得超过12字，请缩短输入内容'}</div>
                    <div>{maxTLength}/12</div>
                </div>
            </Form.Item>
            <Form.Item >
                <TextArea
                    disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0}
                    value={queryForm.content}
                    placeholder="请输入文案"
                    autoSize={{ minRows: 2, maxRows: 6 }}
                    onChange={(e) => { setQueryForm({ ...queryForm, content: e.target.value }) }}
                />
                <div className={style.maxLength}>
                    <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{maxLength > 40 && '广告文案不得超过40字，请缩短输入内容'}</div>
                    <div>{maxLength}/40</div>
                </div>
            </Form.Item>
            <Form.Item label="标签">
                <Select value={queryForm.labelIds} onChange={(value: SelectValue) => { setQueryForm({ ...queryForm, labelIds: value }) }} placeholder="选择标签" mode="tags">
                    {getLabels?.data?.records.map((item: any) => (<Option value={item?.id} key={item?.id}>{item?.label}</Option>))}
                </Select>
            </Form.Item>
            {/* <Form.Item label="类型">
                <Select value={queryForm.type} onChange={(value: SelectValue)=>{setQueryForm({...queryForm, type: value})}} placeholder="选择类型" disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0}>
                    <Option value={1}>标题</Option>
                    <Option value={2}>文案</Option>
                </Select>
            </Form.Item> */}
            <Form.Item label="数据类型">
                <Select value={queryForm.dataType} disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0 && typeData === 'all'} onChange={(value: SelectValue) => { setQueryForm({ ...queryForm, dataType: value }) }} placeholder="选择数据类型">
                    <Option value='personal' disabled={editData && typeof editData === 'object' && Object.keys(editData).length > 0 && typeData === 'group'}>个人</Option>
                    <Option value='group'>组内共享</Option>
                    <Option value='all'>公司全员共享</Option>
                </Select>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(AddTitle)