
import { useRef, useState, useEffect } from 'react';
import { connect } from '@umijs/max';
import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
import {
    ProFormText,
    ProFormSelect,
    ProForm,

    ProFormDependency
} from '@ant-design/pro-components';
import { ConfigProvider, Flex, Space, message, Row, Col } from 'antd';
import { PostJobapplicantAddskill, PostJobapplicantUpdateskill, PostJobapplicantSkilldetail } from '@/apis/api';

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

const PagesMainJobseekerListResumeSkill: React.FC = ({ dispatch, dictModel, openModel, id }: any) => {
    const formRef = useRef<ProFormInstance>();
    const [detail, setDetail] = useState<ResumeType.skill | null>(null)


    useEffect(() => {
        dispatch({ type: 'dictModel/getList', payload: { code: 2007, type: 'setOtherLanguageList' } })
        dispatch({ type: 'dictModel/getList', payload: { code: 2008, type: 'setDegreeList' } })
        dispatch({ type: 'dictModel/getList', payload: { code: 2023, type: 'setVehicleList' } })
    }, [])


    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#4FBE70',
                    }
                }}
            >
                <ProForm<ResumeType.skill>
                    formRef={formRef}
                    request={async () => {
                        if (id) {
                            let res = await PostJobapplicantSkilldetail({ customer_id: id.customer_id })
                            setDetail(res.data)
                            return res.data;
                        }
                    }}
                    submitter={{
                        searchConfig: {
                            resetText: '取消',
                            submitText: '保存',
                        },
                        render: (_, dom) => { return <Flex justify='flex-end'> <Space>{dom}</Space></Flex> },
                        onReset: () => {

                        }
                    }}
                    onFinish={async (values) => {
                        values.computer_skills = '电脑水平' + values.computer_skills;
                        if (detail) {
                            values.id = detail.id;
                            values.customer_id = detail.customer_id;
                            let res = await PostJobapplicantUpdateskill(values)
                            message.success('提交成功')
                        } else {
                            values.customer_id = id.customer_id;
                            let res = await PostJobapplicantAddskill(values)
                            message.success('提交成功')
                        }
                    }}
                >
                    <Row gutter={[16, 16]}>
                        <Col span={8}>
                            <ProFormSelect
                                name="english"
                                label="英语"
                                fieldProps={{
                                    fieldNames: selectfieldNames,
                                    placeholder: '请选择英语的掌握程度'
                                }}
                                options={dictModel.degreeList}
                                rules={[{ required: true, message: '请选择英语的掌握程度' }]}

                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="mandarin"
                                label="国语"
                                fieldProps={{
                                    fieldNames: selectfieldNames,
                                    placeholder: '请选择国语的掌握程度'
                                }}
                                options={dictModel.degreeList}
                                rules={[{ required: true, message: '请选择国语的掌握程度' }]}

                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="cantonese"
                                label="粤语"
                                fieldProps={{
                                    fieldNames: selectfieldNames,
                                    placeholder: '请选择粤语的掌握程度'
                                }}
                                options={dictModel.degreeList}
                                rules={[{ required: true, message: '请选择粤语的掌握程度' }]}

                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="other_language"
                                label="第二外语"
                                fieldProps={{
                                    fieldNames: selectfieldNames,
                                    placeholder: '请选择第二外语'
                                }}
                                options={dictModel.otherLanguageList}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="computer_skills"
                                label="电脑水平"
                                fieldProps={{
                                    fieldNames: { label: 'name', value: 'name' },
                                    placeholder: '请选择电脑水平'
                                }}
                                options={
                                    dictModel.degreeList.filter(item => [100103, 100101, 1001096].includes(item.id))
                                }
                                rules={[{ required: true, message: '请选择电脑水平' }]}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="vehicle_type"
                                label="交通工具"
                                fieldProps={{
                                    fieldNames: selectfieldNames,
                                    placeholder: '请选择交通工具'
                                }}
                                options={dictModel.vehicleList}
                            />
                        </Col>
                        <ProFormDependency name={['vehicle_type']}>
                            {({ vehicle_type }) => {
                                {
                                    return (
                                        vehicle_type === 1001101 && <Col span={8}>
                                            <ProFormText
                                                label="其他交通工具"
                                                name="vehicle_type_other"
                                                placeholder="请输入其他交通工具"
                                            />
                                        </Col>
                                    );
                                }
                            }}
                        </ProFormDependency>
                        <Col span={8}>
                            <ProFormText
                                label="驾照类型"
                                name="drive_type"
                                placeholder="请输入驾照类型"
                            />
                        </Col>
                    </Row>
                </ProForm>
            </ConfigProvider>
        </>
    );
};



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