import { Row, Form, Col, Divider, Select, DatePicker, Card, Table } from 'antd';
import moment from 'moment';
import React, { useEffect } from 'react';
import { connect, history } from 'umi';
import { dispatchHandle } from '@/utils/publicHandle';
import DepartTree from './DepartTree';
import TreeSelector from './TreeSelector';
import CustormRangePicker from '@/components/CustormRangePicker';
import styles from '../index.less';

const { RangePicker } = DatePicker;

const AbnormalDetails = (props) => {
    const {
        dispatch,
        loading,
        location: {
            query
        },
        user: { userTree },
        statistical: {
            inspectionAbnormalStaDetail,
        },
    } = props
    console.log(props)
    const [form] = Form.useForm()
    const columns = [
        { title: '任务名称', dataIndex: 'taskName' },
        {
            title: '异常率', dataIndex: 'abnormaltionRate',
            render: text => text ? `${text}%` : '0%'
        },
        { title: '总检设备数（个）', dataIndex: 'total' },
        { title: '正常数（个）', dataIndex: 'complete' },
        { title: '异常数（个）', dataIndex: 'abnormal' },
        { title: '执行人', dataIndex: 'taskExecutorNames', render: text => text || '暂无' },
        {
            title: '执行时间', dataIndex: 'time',
            render: (text, record) => <span>{
                (record?.actualStartTime || record?.actualEndTime) ? `${record?.actualStartTime ? moment(record?.actualStartTime).format('YYYY-MM-DD HH:mm:ss') : ''}-
                ${record?.actualEndTime ? moment(record?.actualEndTime).format('YYYY-MM-DD HH:mm:ss') : ''}` : '暂无'
            }</span>
        },
        {
            title: '操作', dataIndex: 'action', fixed: 'right',
            render: (text , record) => <a onClick={()=>history.push(`/ops/inspection/tasks/record?id=${record?.taskId || ''}`)}>查看详情</a>
        },
    ]
    useEffect(() => {
        form.setFieldsValue({
            departmentId: query?.dep || null,
            userId: query?.userId || null,
            date: query?.date ? [moment(query?.date), moment(query?.date)] : [moment(), moment()]
        })
        const payload = {
            queryMonth: query?.date || '',
            departmentId: query?.dep || '',
            userId: query?.userId || ''
        }
        dispatchHandle( // 详情
            dispatch,
            'statistical/operation_service_statistics_exceptionStatisticsDetails_post',
            payload
        )
        dispatchHandle(// 组织架构
            dispatch,
            'user/account_service_organization_tree_user_post',
            {}
        )
    }, [])
    const formItemLayout2 = {
        // labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };
    return (
        <Card>
            <Form form={form} style={{ margin: '15px 0 0' }}>
                <Row justify="space-between">
                    <Col span={8}>
                        <Form.Item name='departmentId' label='部门' {...formItemLayout2}>
                            <DepartTree treeData={userTree} disabled={true} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item name='userId' label='执行人' {...formItemLayout2}>
                            <TreeSelector treeData={userTree} disabled={true} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item name='date' label='选择日期' {...formItemLayout2}>
                            <CustormRangePicker style={{ width: '100%' }} picker="month" allowClear disabled />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Divider style={{ marginTop: '0' }} />
            <div className={styles.fourCards} style={{ marginBottom: '20px' }}>
                <Row gutter={{ md: 8, xxl: 16 }} style={{ width: '100%' }}>
                    <Col span={6}>
                        <Card className={styles.abCards} hoverable>
                            <h3>异常率</h3>
                            <p style={{ color: '#BD10E0' }}>{query?.abnormaltionRate ? `${query.abnormaltionRate}%` : '0%'}</p>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card className={styles.abCards} hoverable>
                            <h3>总检设备数</h3>
                            <p style={{ color: '#1890FF' }}>{query?.total || 0}</p>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card className={styles.abCards} hoverable>
                            <h3>正常数</h3>
                            <p style={{ color: '#7ED321' }}>{query?.complete || 0}</p>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card className={styles.abCards} hoverable>
                            <h3>异常数</h3>
                            <p style={{ color: '#FF3C7A' }}>{query?.abnormal || 0}</p>
                        </Card>
                    </Col>
                </Row>
            </div>
            <Table
                loading={loading || false}
                columns={columns}
                dataSource={inspectionAbnormalStaDetail || []}
                rowKey={record => record.id}
                scroll={{
                    x: 1300,
                }}
                bordered={true}
                pagination={{
                    defaultCurrent: 1,
                }}

            />
        </Card>
    )
}
export default connect(({ statistical, loading, dict, user }) => ({
    statistical, dict, user,
    loading: loading.effects['statistical/operation_service_statistics_exceptionStatisticsDetails_post'],
}))(AbnormalDetails);