import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import styles from './style.less';
import { fetch, apis } from '../../../utils/request';
import request from '../../../utils/request';
import AuthButton from '@/components/AuthButton';

function header(props) {

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

    useEffect(() => {
        getList({ pageNum: 1, pageSize: 10 });
    }, [])
    // 查询列表

    const getList = params => {
        request({ ...apis.relatedOrganization.get, params: { ...params } }).then(data => {
            setData(data)
        })
    }

    const toAdd = (id) => () => {

        router.push({
            pathname: '/eContract/relatedOrganization/add',
            query: {
                id
            },
        });

    }

    const onDelete = rowData => {
        Modal.confirm({
            title: '删除后组织将不能使用企业电子签章，确认删除？',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                request({ ...apis.relatedOrganization.delete, urlData: { id: rowData.companyOrgId } }).then((data) => {
                    message.info("操作成功")
                    getList({ pageNum: 1, pageSize: 10 });

                }).catch((err) => {
                })
            },
        });
    }

    const handleSubmit = (e, props) => {
        e.preventDefault();
        getList({ pageNum: 1, pageSize: 10, ...props.form.getFieldsValue() });
    }

    function handleReset() {
        props.form.resetFields();
        getList({ pageNum: 1, pageSize: 10 });
    }


    const changePageNum = pageNumber => {
        getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
    }

    const columns = [
        {
            title: '企业名称',
            dataIndex: 'companyName',
            key: 'companyName',
            align: 'center',

        },
        {
            title: '企业编号',
            dataIndex: 'companyCode',
            key: 'companyCode',
            align: 'center',

        },
        {
            title: '实名认证状态',
            dataIndex: 'companyStatus',
            key: 'companyStatus',
            align: 'center',
            render: (companyStatus) => <>
                {/* {companyStatus === 0 && <span>未激活</span>}
                {companyStatus === 1 && <span>未认证</span>}
                {companyStatus === 2 && <span>审核通过</span>}
                {companyStatus === 3 && <span>已提交待审核</span>}
                {companyStatus === 4 && <span>审核不通过</span>} */}
                {companyStatus === 0 && <span>未认证</span>}
                {companyStatus === 1 && <span>管理员资料已提交</span>}
                {companyStatus === 2 && <span>企业基本资料（没有申请表）已提交</span>}
                {companyStatus === 3 && <span>已提交待审核</span>}
                {companyStatus === 4 && <span>审核通过</span>}
                {companyStatus === 5 && <span>审核不通过</span>}
                {companyStatus === 6 && <span>人工初核通过</span>}

            </>,

        },
        {
            title: '关联组织名',
            dataIndex: 'orgName',
            key: 'orgName',
            align: 'center',
        },
        {
            title: '组织编号',
            dataIndex: 'orgId',
            key: 'orgId',
            align: 'center',

        },
        {
            title: '小程序名称',
            dataIndex: 'miniAppName',
            key: 'miniAppName',
            align: 'center',

        },

        {
            title: '关联时间',
            dataIndex: 'createDate',
            key: 'createDate',
            align: 'center',
            render: (x, row) => <><span>{row.createDate ? `${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}` : ''}</span></>,
        },
        {
            title: '操作',
            dataIndex: 'handle',
            key: 'handle',
            align: 'center',
            render: (x, row) => (
                <>


                    <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={e => onDelete(row)}>
                        删除<Icon type="form" className={styles.edit} />
                    </span>

                </>
            ),
        },

    ];


    const { getFieldDecorator } = props.form

    return (

        <>
            <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
                <Form.Item>
                    {getFieldDecorator('companyName')(
                        <Input
                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="企业名称 "
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('companyCode')(
                        <Input
                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="企业编号 "
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('companyStatus')(
                        <Select style={{ width: '280px' }} placeholder="实名认证状态">
                            {/* <Select.Option value="">全部</Select.Option>
                            <Select.Option value="0">未激活</Select.Option>
                            <Select.Option value="1">未认证</Select.Option>
                            <Select.Option value="2">审核通过</Select.Option>
                            <Select.Option value="3">已提交待审核</Select.Option>
                            <Select.Option value="4">审核不通过</Select.Option> */}
                            <Select.Option value="">全部</Select.Option>
                            <Select.Option value='0'>未认证</Select.Option>
                            <Select.Option value='1'>管理员资料已提交</Select.Option>
                            <Select.Option value='2'>企业基本资料（没有申请表）已提交</Select.Option>
                            <Select.Option value='3'>已提交待审核</Select.Option>
                            <Select.Option value='4'>审核通过</Select.Option>
                            <Select.Option value='5'>审核不通过</Select.Option>
                            <Select.Option value='6'>人工初核通过</Select.Option>
                        </Select>,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('orgName')(
                        <Input
                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="关联组织名 "
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('miniAppName')(
                        <Input
                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="小程序名称 "
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>搜索</Button>
                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
                </Form.Item>
            </Form>
            <Button type="danger" className={styles.addBtn} onClick={toAdd()}>新增</Button>

            <Table id='noticeTable' dataSource={data.records} columns={columns} pagination={false} />

            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={e => changePageNum(e)} current={data.current} />
            </div>
        </>
    )
}

const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader