
import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProFormText,
    ProFormSegmented,
    ProFormSelect,
    ProForm,
    ProFormRadio,
    ProFormDatePicker,
    ProFormDigit
} from '@ant-design/pro-components';
import { ConfigProvider, Flex, Space, Modal, message, Image, Row, Col, Switch, Form, Typography } from 'antd';
import { GetAdvertareaList, getCompanyList, PostAdvertscheduleAdd, PostAdvertscheduleUpdate, GetAdvertscheduleDetail } from '@/apis/api';
import { Imageprefix } from '@/constants';
import UploadModel from '@/components/Common/upload';

const selectfieldNames = { label: 'name', value: 'id' };
const selectfieldCompanyNames = { label: 'full_name', value: 'id' };


const PagesMainAdvertisementPutinCreate: React.FC = ({ dispatch, dictModel, openModel, id }: any) => {
    const formRef = useRef<ProFormInstance>();
    const [openPreview, setOpenPreview] = useState(false);
    const [detail, setDetail] = useState<InformationType.article | null>(null)

    useEffect(() => {
        setOpenPreview(openModel.openModal)
    }, [openModel.openModal])

    const [uploadedFilephotoName, setUploadedFilephotoName] = useState<string>('');
    const handleFileUploadedphoto = (filename: string) => {
        setUploadedFilephotoName(filename);
    };


    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#4FBE70',
                    }, components: {
                        Segmented: {
                            itemSelectedBg: '#19be6e',
                            itemSelectedColor: '#ffffff'
                        },
                    },
                }}
            >
                <Modal
                    open={openPreview}
                    title={id ? '编辑投放' : '添加投放'}
                    centered
                    maskClosable={false}
                    footer={null}
                    destroyOnClose
                    width={1000}
                    onCancel={() => {
                        dispatch({ type: 'openModel/getOpenModal', payload: false })
                    }}
                >
                    <ProForm<InformationType.article>
                        formRef={formRef}
                        request={async () => {
                            if (id) {
                                let res = await GetAdvertscheduleDetail({ id: id })
                                setUploadedFilephotoName(res.data.image_url)
                                setDetail(res.data)
                                return res.data;
                            } else {
                                setUploadedFilephotoName('')
                                setDetail(null)
                                return {
                                    area_id: null,
                                    title: '',
                                    image_url: '',
                                    ad_description: '',
                                    target_url: '',
                                    show_order: 0,
                                    valid_date: null,
                                    hide_ad: 2,
                                    company_id: null,
                                }
                            }
                        }}
                        submitter={{
                            searchConfig: {
                                resetText: '取消',
                                submitText: '保存',
                            },
                            render: (_, dom) => { return <Flex justify='flex-end'> <Space>{dom}</Space></Flex> },
                            onReset: () => {
                                setDetail(null)
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                        onFinish={async (values) => {
                            values.image_url = uploadedFilephotoName ? uploadedFilephotoName : '';
                            console.log(values)
                            if (id) {
                                values.id = id;
                                let res = await PostAdvertscheduleUpdate(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            } else {
                                let res = await PostAdvertscheduleAdd(values)
                                message.success('提交成功')
                                dispatch({ type: 'openModel/getOpenModal', payload: false })
                            }
                        }}
                    >
                        <Row gutter={[16, 16]}>
                            <Col span={24}>
                                <UploadModel multiple={false} form_name="image_url" image_length={1} uploadTxt="上传封面图" image_type={3} imageUrl={uploadedFilephotoName} onUploadComplete={handleFileUploadedphoto}></UploadModel>
                            </Col>
                            <Col span={8}>
                                <ProFormText
                                    label="广告标题"
                                    name="title"
                                    placeholder="请输入广告标题"
                                    rules={[{ required: true, message: '请输入广告标题' }]}
                                />
                            </Col>
                            <Col span={8}>
                                <ProFormSelect
                                    showSearch
                                    name="area_id"
                                    label="投放位置"
                                    placeholder="请选择投放位置"
                                    fieldProps={{
                                        fieldNames: selectfieldNames
                                    }}
                                    request={(keyword) =>
                                        GetAdvertareaList({ page: 1, pagesize: 100, keyword: keyword.keyWords, sortby: 'desc', }).then(res => {
                                            return res.data.advertareas;
                                        })
                                    }
                                    rules={[{ required: true, message: '请选择投放位置' }]}

                                />
                            </Col>
                            <Col span={8}>
                                <ProFormText
                                    label="说明"
                                    name="ad_description"
                                    placeholder="请输入说明"
                                    rules={[{ required: true, message: '请输入说明' }]}
                                />
                            </Col>
                            <Col span={24}>
                                <ProFormText
                                    label="跳转网址，小程序内部路径，以/pages/开头，如/pages/index/index, 外部网址需以http://或https://开头, 没有链接就填 //"
                                    name="target_url"
                                    placeholder="请输入跳转网址"
                                    rules={[{ required: true, message: '请输入跳转网址' }]}
                                />
                            </Col>
                            <Col span={8}>
                                <ProFormDigit
                                    label="此广告展示顺序"
                                    placeholder="请输入此广告展示顺序,请输入优先级的数字"
                                    name="show_order"
                                    min={1}
                                    rules={[{ required: true, message: '请输入此广告展示顺序,请输入优先级的数字' }]}
                                />
                            </Col>
                            <Col span={8}>
                                <ProFormDatePicker
                                    width={'lg'}
                                    name="valid_date"
                                    label="有效时间"
                                    fieldProps={{
                                        format: 'YYYY-MM-DD'
                                    }}
                                    rules={[{ required: true, message: '请选择有效时间' }]}
                                />
                            </Col>
                            <Col span={8}>
                                <ProFormRadio.Group
                                    name="hide_ad"
                                    label="是否隐藏广告"
                                    request={async () => [
                                        { label: '是', value: 1 },
                                        { label: '否', value: 2 }
                                    ]}
                                    rules={[{ required: true, message: '请选择是否隐藏广告' }]}
                                />
                            </Col>
                            <Col span={8}>

                                <ProFormSelect
                                    showSearch
                                    name="company_id"
                                    label="选择企业，没有企业选人才市场"
                                    placeholder="请选择企业"
                                    fieldProps={{
                                        fieldNames: selectfieldCompanyNames
                                    }}
                                    rules={[{ required: true, message: '请选择企业' }]}
                                    request={(keyword) =>
                                        getCompanyList({ page: 1, pagesize: 100, keyword: keyword.keyWords }).then(res => {
                                            return res.data.list;
                                        })
                                    }
                                />

                            </Col>
                        </Row>




                    </ProForm>
                </Modal>
            </ConfigProvider >
        </>
    );
};



export default connect(({ dictModel, openModel }: any) => ({
    dictModel, openModel
}))(PagesMainAdvertisementPutinCreate);