import React, { useState, useEffect } from 'react';
import { Tabs, Card, Form, Row, Col, Select, DatePicker, Table, Divider, Input, TreeSelect, Spin } from 'antd';
import {
    DownloadOutlined,
    TableOutlined,
} from '@ant-design/icons';
import { connect, history } from 'umi';
import { dispatchHandle } from '@/utils/publicHandle';
import moment from 'moment';
import ExportFile from '@/components/Custom/ExportFile';
import CustormRangePicker from '@/components/CustormRangePicker';
import Echarts from "./Echarts";
import Tables from './Tables';
import DepartTree from './DepartTree';
import { FeeEchartData } from './eChartData'

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Search } = Input;
const { Option } = Select;
let number = 1;

const RepaireFeeSta = (props) => {
    const {
        dispatch,
        feeLoading,
        deviceType,
        repaireType,
        systemData,
        user: { userTree },
        statistical: {
            devicesList,
            repaireTaskFeeStaList
        },
    } = props
    const [option, setOption] = useState({})
    const [form] = Form.useForm();
    const formItemLayout = {
        wrapperCol: { span: 16 },
    };
    const getListItem = (payload = {}) => {
        payload.planBusinessType = 'repair_task'
        dispatchHandle(
            dispatch,
            'statistical/operation_service_statistics_repairTaskCostStatistics_post',
            payload,
            res => {
                setOption(FeeEchartData(res || [], ['维修费用']))
            }
        )
    }

    /**
     * @页面初始化
     */
    useEffect(() => {
        // 初始化值
        getListItem()
    }, [])

    const onValuesChange = (changedValues, allValues) => {
        const { date } = allValues
        const payload = {
            ...allValues,
            startMonth: (date && date.length > 0) ? moment(date[0]).format("YYYY-MM") : moment().startOf('year').format("YYYY-MM"),
            endMonth: (date && date.length > 0) ? moment(date[1]).format("YYYY-MM") : moment().endOf('year').format("YYYY-MM"),
        }
        delete payload.date
        getListItem(payload)
        number += 1
    }
    const tableExport = (
        <ExportFile name="导出记录" url="/device-service/status-record/export">
            <a style={{ marginRight: '40px' }}><DownloadOutlined /> 导出记录</a>
        </ExportFile>
    );
    const detailAction = (statisticalTime) => {
        const taskType = form.getFieldValue('taskType') || '';
        const equipmentId = form.getFieldValue('equipmentId') || '';
        history.push(`/ops/maintenance/order?statisticalTime=${statisticalTime}&taskType=${taskType}&equipmentId=${equipmentId}`)
    }
    const columnsFee = [
        {
            title: '时间', dataIndex: 'yearsMonth',
            render: val => <span>{moment(val).format('YYYY-MM')}</span>
        },
        { title: '维修费用（元）', dataIndex: 'cost' },
        {
            title: '操作', dataIndex: 'action',
            render: (text, record) => <a onClick={() => detailAction(record?.yearsMonth)}>查看详情</a>
        },
    ]
    return <>
        <div style={{ margin: '15px 0' }}>
            <Form form={form} onValuesChange={onValuesChange}>
                <Row>
                    <Col span={6}>
                        <Form.Item name='departmentId' label='部门' {...formItemLayout}>
                            <DepartTree treeData={userTree} />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='equipmentSystem' label='设备系统' {...formItemLayout}>
                            <TreeSelect
                                allowClear
                                placeholder="请选择"
                                treeData={systemData}
                                showSearch
                                treeNodeFilterProp="title"
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='equipmentType' label='设备类型' {...formItemLayout}>
                            <TreeSelect
                                allowClear
                                placeholder="请选择"
                                treeData={deviceType}
                                showSearch
                                treeNodeFilterProp="title"
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='equipmentId' label='选择设备' {...formItemLayout}>
                            <Select placeholder="请选择" allowClear showSearch optionFilterProp="children">
                                {
                                    devicesList && devicesList.length > 0 &&
                                    devicesList.map(i => <Option value={i.id} key={i.id}>{i.name}</Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='taskType' label='维修类型' {...formItemLayout}>
                            <Select placeholder="请选择" allowClear showSearch optionFilterProp="children">
                                {
                                    repaireType && repaireType?.length > 0 &&
                                    repaireType.map(i => <Option value={i.value} key={i.value}>{i.title}</Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='date' label='选择日期' {...formItemLayout}>
                            <CustormRangePicker style={{ width: '100%' }} picker="month" allowClear />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Divider style={{ marginTop: '0' }} />
            <Spin spinning={feeLoading || false}>
                <Echarts keyIndex={number} option={option} />
            </Spin>
        </div>
        <div >
            <Tabs
            // tabBarExtraContent={tableExport}
            >
                <TabPane tab={<span><TableOutlined style={{ marginRight: 5 }} />表格</span>} key='11' >
                    <Table
                        loading={feeLoading || false}
                        columns={columnsFee}
                        dataSource={repaireTaskFeeStaList || []}
                        rowKey={record => record.yearsMonth}
                        scroll={{
                            x: 1300,
                        }}
                        bordered={true}
                        pagination={{
                            defaultCurrent: 1,
                        }}
                        style={{ marginTop: '5px' }}
                    />
                </TabPane>
            </Tabs>
        </div>
    </>
}

export default connect(({ statistical, loading, dict, user }) => ({
    statistical, dict, user,
    feeLoading: loading.effects['statistical/operation_service_statistics_repairTaskCostStatistics_post'],
}))(RepaireFeeSta);