import React, { useState, useEffect } from 'react';
import { Card, Form, Row, Col, TreeSelect, Input, Button, Table, Divider, Select, DatePicker } from 'antd';
import { connect, useAccess, Access } from 'umi';
import moment from 'moment'
import CustormRangePicker from '@/components/CustormRangePicker';
import { SearchOutlined, InfoCircleFilled } from '@ant-design/icons';
import { DictBizType, dicFindUtils, batchDicData } from '@/utils/utils';
import ExportFile from '@/components/Custom/ExportFile';
import ImportFile from '@/components/Custom/ImportFile';
import { dispatchHandle } from '@/utils/publicHandle';
import FinalReport from './ConsumablesCost/components/FinalReport'
import useFormTable from '@/useHooks/useFormTable';
import style from './index.less'

const MaintenancePremium = (props) => {
    const {
        dispatch,
        loading,
        dict: {
            dicTotalsList
        },
        fee: {
            maintenanceList
        }
    } = props
    const access = useAccess();
    const [form] = Form.useForm()
    const [list, setList] = useState([])
    // const monthsList = []
    // for (let index = 1; index <= 12; index+=1) {
    //     monthsList.push(`${index}月`)
    // }
    const { deviceType } = batchDicData(
        ['deviceType'],
        dicTotalsList
    )
    const getListItem = (payloads = {}) => {
        const payload = { ...payloads }
        delete payload.year;
        delete payload.month;
        dispatchHandle(
            dispatch,
            'fee/operation_service_maintain_post',
            payload,
            res => {
                if (res) {
                    const arr = res?.map((item, index) => ({ ...item, id: index }))
                    setList(arr)
                }
            }
        )
    }
    const { tableProps, search } = useFormTable(getListItem, { form, manual: true })
    const onValuesChange = (a, values) => {
        const payload = { ...values, createTimeStr: `${moment(values?.year).year()}-${moment(values?.month).month() + 1 >= 10 ? moment(values?.month).month() + 1 : `0${moment(values?.month).month() + 1}`}` }
        search.submit(payload)
    }
    const columns = [
        {
            title: '序号', dataIndex: 'index',
            render: (text, record, index) => index + 1
        },
        { title: '设备类型', dataIndex: 'deviceTypeName' },
        { title: '维保厂商', dataIndex: 'maintainVendorName', ellipsis: true },
        { title: '维保项目', dataIndex: 'maintainProject' },
        { title: '维保类型', dataIndex: 'maintainTypeNames' },
        {
            title: '维保费用', dataIndex: 'maintainAmount',
            render: text => text ? `￥${text}` : '--'
        },
        {
            title: '维保月份', dataIndex: 'maintainMonth',
        },
        { title: '结报单号', dataIndex: 'closingOrder', render: text=> text ? text : '未结报' },
        {
            title: '结报金额', dataIndex: 'closingAmount',
            render: (text, record) => access.insideAccess('vTtUAYZhmQz') ? <FinalReport search={search} title={text} record={record} type="maintenance" /> : <a>{text}</a>
        },
        {
            title: '最近变更', dataIndex: 'updateTime',
            render: (text, record) => text ? moment(text).format('YYYY/MM/DD HH:mm:ss') : moment(record?.createTime).format('YYYY/MM/DD HH:mm:ss')
        },
    ]
    useEffect(() => {
        const payload = { createTimeStr: `${moment().year()}-${moment().month() + 1 >= 10 ? moment().month() + 1 : `0${moment().month() + 1}`}` }
        search.submit(payload)
        form.setFieldsValue({
            year: moment(),
            month: moment()
        })
    }, [])
    const searchData = (data) => {
        const payload = { ...data }
        payload.createTimeStr = `${moment(data?.year).year()}-${moment(data?.month).month() + 1 >= 10 ? moment(data?.month).month() + 1 : `0${moment(data?.month).month() + 1}`}`
        delete payload.year;
        delete payload.month;
        return payload

    }
    return <Card>
        <Form form={form} onValuesChange={onValuesChange}>
            <Row justify="space-between">
                <Col span={5}>
                    <Form.Item label="年度" name="year">
                        <DatePicker picker='year' style={{ width: '100%' }} allowClear={ false } />
                    </Form.Item>
                </Col>
                <Col span={5}>
                    <Form.Item label="设备类型" name="deviceTypeId">
                        <TreeSelect
                            allowClear
                            showSearch
                            treeNodeFilterProp="title"
                            treeData={deviceType?.selectData || []}
                            placeholder="全部"
                        />
                    </Form.Item>
                </Col>
                <Col span={5}>
                    <Form.Item label="月份" name="month">
                        <DatePicker picker='month' format="MM" style={{ width: '100%' }} dropdownClassName={style.dropdown_date} allowClear={ false } />
                    </Form.Item>
                </Col>
                <Col style={{ display: 'flex' }}>
                    <Access accessible={access.insideAccess('pPxvNJITMEG')}>
                        <ExportFile name="维保费用列表" url="/operation-service/maintain/export" data={searchData(search.data)}>
                            <Button style={{ margin: '0 16px' }} type="primary">导出</Button>
                        </ExportFile>
                    </Access>
                </Col>
            </Row>
        </Form>
        <Divider style={{ margin: '0 0 24px' }} />
        <Table
            loading={loading || false}
            columns={columns}
            dataSource={list || []}
            rowKey={record => record.id}
            className='custom-table-setting'
            pagination={{
                ...maintenanceList.pagination,
                showTotal: total => `总共 ${total || 0} 项`
            }}
            {...tableProps}
        />
    </Card>
}

export default connect(({ dict, user, fee, loading }) => ({
    user,
    dict, fee,
    loading: loading.effects['fee/operation_service_maintain_post']
}))(MaintenancePremium)