import React, { useEffect } from 'react';
import { Button, Card, DatePicker, Col, Row, TreeSelect, Spin } from 'antd';
import styles from './index.less';
import moment from 'moment';
const { RangePicker } = DatePicker;

/**
 * 条件查询通用头部
 * @returns 
 */
export default function Index(props) {

    const LoadingCard = () => {
        return (
            <div className={styles['loading-card']}>
                <Spin size="large" />
            </div>
        )
    }

    return (
        <div>
            {props.showLoading ? <LoadingCard></LoadingCard> : null}
            <Card className={styles['data-search-card']}>
                <Row gutter={20} className={styles['data-search-row']}>
                    <Col xs={24} sm={24} md={24} lg={12} xl={6} className={styles['data-search-item']}>
                        <RangePicker size='middle' className={styles['data-search-sufixx']} value={props.timeRange} onChange={(date, dateStrings) => {
                            let tempDate = [
                                moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')),
                                moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')),
                            ]
                            props.onTimePickerChange(tempDate);
                        }} />
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={12} xl={6} className={styles['data-search-item']}>
                        <div className={props.searchDayIndex === 0 ? `${styles['data-search-day']} ${styles['search-day-selected']}` : `${styles['data-search-day']}`} onClick={() => props.onChangeTimeIndex(0)}>
                            今天
                        </div>
                        <div className={props.searchDayIndex === 1 ? `${styles['data-search-day']} ${styles['search-day-selected']}` : `${styles['data-search-day']}`} onClick={() => props.onChangeTimeIndex(1)}>
                            昨天
                        </div>
                        <div className={props.searchDayIndex === 2 ? `${styles['data-search-day']} ${styles['search-day-selected']}` : `${styles['data-search-day']}`} onClick={() => props.onChangeTimeIndex(2)}>
                            近7天
                        </div>
                        <div className={props.searchDayIndex === 3 ? `${styles['data-search-day']} ${styles['search-day-selected']}` : `${styles['data-search-day']}`} onClick={() => props.onChangeTimeIndex(3)}>
                            近30天
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={12} xl={6} className={styles['data-search-item']}>
                        <TreeSelect
                            className={styles['data-search-sufixx']}
                            dropdownStyle={{
                                maxHeight: 400,
                                overflow: 'auto',
                            }}
                            value={props.currentOrg.title}
                            treeData={props.orgTree}
                            onSelect={(value, node) => {
                                if (node.type === 2 || node === 3) {
                                    props.onCurrentOrgChange(node);
                                } else {
                                    props.onCurrentOrgChange("");
                                }
                            }}
                            placeholder="请选择组织架构"
                            treeDefaultExpandAll
                        />
                    </Col>
                    <Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
                        <div className={styles['data-search-btns']}>
                            <Button className={styles['search-btn-item']} onClick={props.onResetSearch}>重置</Button>
                            <Button className={styles['search-btn-item']} type="primary" onClick={props.onQueryBtn}>查询</Button>
                        </div>
                    </Col>
                </Row>
            </Card>
        </div>
    )
}
