import WxSelect from '@/components/WxSelect'
import { Input, InputNumber, Modal, Tag } from 'antd'
import React, { useMemo } from 'react'
import { useModel } from 'umi'
/**新建文件夹,修改非图文素材名称 */
function FileModal(props: { isAll?: boolean }) {
    const { isAll } = props
    const { state, set, fileOk, nameOk, offEditFile } = useModel(isAll ? 'useOperating.useBdMedia' : 'useOperating.useBdMediaPup')
    const { fileVisible, actionItem, fileName, sort, videoDescription, videoTitle } = state
    const { state: { selectWx }, initSelectWx } = useModel('useOperating.useWxGroupList')//公众号筛选
    const title = useMemo(() => {
        if (actionItem?.folder) {
            return '编辑文件夹'
        }
        switch (actionItem?.fileType) {
            case 'image':
                return '编辑图片';
            case 'voice':
                return '编辑音频';
            case 'video':
                return '编辑视频';
        }
        return '新建文件夹'
    }, [actionItem])
    console.log(state)
    return <Modal
        visible={fileVisible}
        destroyOnClose
        onOk={(e) => { actionItem ? nameOk(selectWx) : fileOk(e, undefined, selectWx); initSelectWx() }}
        onCancel={() => { offEditFile(); initSelectWx() }}
        width={400}
        title={title}
        closable={false}
    >
        <Tag color='warning'>数值越大越靠前</Tag>
        <div style={{ display: 'flex', flexFlow: 'row', marginBottom: 10, alignItems: 'center', marginTop: 10 }}>
            <label style={{ width: '15%' }}>排序：</label>
            <InputNumber
                style={{ width: '100%' }}
                value={sort}
                placeholder='请输入序号, 数值越大越靠前'
                onChange={(e: number) => {
                    set({ sort: e })
                }} 
            />
        </div>

        {
            actionItem?.fileType === 'video' ? <div>
                <div style={{ display: 'flex', flexFlow: 'row', marginBottom: 10, alignItems: 'center' }}>
                    <label style={{ width: '15%' }}>名称：</label>
                    <Input
                        value={videoTitle}
                        allowClear
                        placeholder='请输入名称'
                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                            set({ videoTitle: event.target.value })
                        }}
                    /></div>
                <div style={{ display: 'flex', flexFlow: 'row', alignItems: 'center' }}>
                    <label style={{ width: '15%' }}>描述：</label>
                    <Input.TextArea
                        placeholder='请输入描述内容'
                        allowClear
                        value={videoDescription}
                        onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
                            set({ videoDescription: event.target.value })
                        }}
                    />
                </div>
                <WxSelect />
            </div> : <>
                <div style={{ display: 'flex', flexFlow: 'row', marginBottom: 10, alignItems: 'center' }}>
                    <label style={{ width: '15%' }}>名称：</label>
                    <Input
                        value={fileName}
                        allowClear
                        placeholder='请输入名称'
                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                            set({ fileName: event.target.value })
                        }}
                    />
                </div>
                <WxSelect />
            </>
        }
    </Modal>
}
export default React.memo(FileModal)