import React, { useState, useEffect } from 'react';
import { Input, Modal, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import XForm, { FieldTypes } from '../../../components/XForm';
import router from 'umi/router';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import moment from 'moment';



const header = props => {

    const [data, setData] = useState({})

    const [datas, setDatas] = useState([])//表格数据
    const [visible, setVisible] = useState()
    const [formsdate, setFormsDate] = useState({})
    //   const [page, changePage] = useState({})
    useEffect(() => {

        setVisible(false)

    }, [])
    const ModalData = props => {

        const data = [];
        return (
            <>
                <div>
                </div>
            </>
        )
    }

    const onSelectBusiness = (e) => {
        console.log('11111')

    }

    const fields = [
        {
            label: '姓名',
            name: 'contactName',
            type: FieldTypes.Text,
            value: data.contactName,
            rules: [
                { required: true, message: '请输入姓名' },
                { max: 6, message: '姓名不能超过6个字符' }
            ]
        },
        {
            label: '性别',
            name: 'sex',
            type: FieldTypes.Select,
            value: data.sex === undefined || data.sex === null ? "" : data.sex + "",
            dict: [{
                name: '男',
                value: '1',
            },
            {
                name: '女',
                value: '2',
            },],
            rules: [
                { required: false, message: '请选择性别' }
            ]
        },
        {
            label: '头像',
            name: 'avatar',
            type: FieldTypes.ImageUploader,
            value: data.avatar,
            rules: [
                { required: false, message: '请选择头像' },
            ],
            help: '建议尺寸：66*66px，比例：1:1，格式：jpg，大小：不超过300KB，用于客户查看',
        },
        {
            label: '对外头衔',
            name: 'appellation',
            type: FieldTypes.Text,
            value: data.appellation,
            rules: [
                { required: false, message: '请输入对外头衔' },
                { max: 20, message: '对外头衔不能超过20个字符' }
            ],
            placeholder:"外部平台如业务平台的用户看到此联系人的头衔"
        },
        {
            label: '固话',
            name: 'telephone',
            type: FieldTypes.Text,
            value: data.telephone,
            rules: [
                { required: false, message: '请输入固话' },
                { max: 20, message: '固话内容不能超过20个字符' }
            ]
        },
        {
            label: '手机号',
            name: 'phone',
            type: FieldTypes.Text,
            value: data.phone,
            rules: [
                { required: true,message: '请输入手机号' },
                { pattern: new RegExp('^1[0-9]{10}$'), message: '请输入正确的手机号' }
            ]
        },
        {
            label: '微信号',
            name: 'wxCardImg',
            type: FieldTypes.ImageUploader,
            value: data.wxCardImg,
            rules: [
                { required: false, message: '请上传微信号' },
            ],
            help: '联系人的微信二维码名片，请到手机端微信-我-顶部微信号中保存后上传',
        },
        {
            label: '邮箱',
            name: 'mail',
            type: FieldTypes.Text,
            value: data.mail,
            rules: [
                { required: false, message: '请输入邮箱' },
                { max: 20, message: '邮箱不能超过20个字符' }
            ]
        },
        {
            label: '联系地址',
            name: 'address',
            type: FieldTypes.Text,
            value: data.address,
            rules: [
                { required: false, message: '请输入联系地址' },
                { max: 50, message: '联系地址不能超过50个字符' }
            ]
        },
        {
            label: '内部岗位',
            name: 'job',
            type: FieldTypes.Text,
            value: data.job,
            rules: [
                { required: false, message: '请输入内部岗位' },
                { max: 10, message: '内部岗位不能超过10个字符' }
            ],
            placeholder:"联系人的公司内部岗位，便于区分联系人"
        },
        {
            label: '权重',
            name: 'orderNo',
            type: FieldTypes.Number,
            value: data.orderNo,

            placeholder: '用于列表排序，越大越靠前'
        },
    ]

    const handleSubmit = (values) => {
        let submitValues = values;
        props.form.validateFields((err, values) => {
            console.log(values)
            if (!err) {
                request({ ...apis.contact.taContactAdd, data: { ...submitValues }, }).then((data) => {
                    //   message.info("保存成功,请上传房源")
                    router.push({
                        pathname: '/contact/contact/list',
                        query: {
                            //   salesBatchId: data.salesBatchId,
                        },
                    });
                }).catch((err) => {
                    message.info(err.msg || err.message)
                })
            }
        });
    }
    //model
    const handleShowModel = val => {
        setVisible(true);
    }

    const handleCancel = val => {
        setVisible(false);
    }

    const cancelPage = () => {
        router.push({
            pathname: '/contact/contact/list',
        });
    }

    function beforeUpload(file) {
        console.log("开始上传")
        console.log(file)
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          message.error('请上传jpg格式的图片');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
      }

    return (
        <>
            <div>
                <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
            </div>
        </>
    )
}

const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
export default WrappedNormalLoginForm