import React, { useState, useRef, useEffect } from 'react';
import AutoTable from '@/components/AutoTable/mtable';
import { useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch';
import styles from "./index.less";
import { Tooltip } from "antd";
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
const columnsa = [
    {
        title: '客户名称',
        dataIndex: 'ledgerCustomer',
        key: 'ledgerCustomer'
    },
    {
        title: '台数',
        dataIndex: 'deviceNum',
        key: 'deviceNum',
        search: false,
        width: 80
    },
    {
        title: '使用率',
        dataIndex: 'rate',
        key: 'rate',
        search: false,
        width: 80
    },
],
    columnsb = [
        {
            title: '合同单号',
            dataIndex: 'contractNo',
            key: 'contractNo'
        },
        {
            title: '设备编号',
            dataIndex: 'equipmentNo',
            key: 'equipmentNo'
        },
        {
            title: '设备名称',
            dataIndex: 'equipmentName',
            key: 'equipmentName'
        },
        {
            title: '设备型号',
            dataIndex: 'equipmentModelName',
            key: 'equipmentModelId',
            valueType: 'select',
            options: { path: '/asset/equipmentModel/query/selection', params: {} },
            fieldProps: {
                showSearch: true
            }
        },
        {
            title: '设备品牌',
            dataIndex: 'brand',
            key: 'brand'
        },
        {
            title: '状态',
            dataIndex: 'collectStatusName',
            key: 'collectStatus',
            valueType: 'select',
            options: [
                {
                    value: 1,
                    label: '工作'
                },
                {
                    value: 2,
                    label: '待机'
                },
                {
                    value: 3,
                    label: '关机'
                },
                {
                    value: 4,
                    label: '报警'
                },
            ],
            width: 60
        },
        {
            title: '工作',
            dataIndex: 'runRate',
            key: 'runRate',
            search: false,
            render: (_, row) => {
                return <span style={{ color: "#7ac143" }}>{row.runRate}%</span>
            },
            width: 60
        },
        {
            title: '待机',
            dataIndex: 'standbyRate',
            key: 'standbyRate',
            search: false,
            render: (_, row) => {
                return <span style={{ color: "orange" }}>{row.standbyRate}%</span>
            },
            width: 60
        },
        {
            title: '报警',
            dataIndex: 'alarmRate',
            key: 'alarmRate',
            search: false,
            render: (_, row) => {
                return <span style={{ color: "#fa4659" }}>{row.alarmRate}%</span>
            },
            width: 60
        },
        {
            title: '关机',
            dataIndex: 'offRate',
            key: 'offRate',
            search: false,
            render: (_, row) => {
                return <span style={{ color: "#6a737b" }}>{row.offRate}%</span>
            },
            width: 60
        },
    ];

const LeftTable = ({ onChange }) => {
    const [searchParams, csp] = useState({}),
        [clickrow, cr] = useState({}),
        [flag, setFlag] = useState(true);
    const ledgerCustomer = useRequest(async () => {
        let res = await doFetch({ url: "/lease/umLeaseLedger/ledgerCustomerEquipmentUseRate", params: { ...searchParams } });
        // cr(res?.data?.dataList?.[0]);
        return res?.data?.dataList ?? [];
    }, {
        refreshDeps: [searchParams]
    });
    useEffect(() => {
        onChange(clickrow?.ledgerCustomerId)
    }, [clickrow?.ledgerCustomerId])
    return <div style={{ width: flag ? 350 : 0 }}>
        <div style={{ cursor: 'pointer' }} onClick={() => {
            setFlag(!flag);
        }}>
            {
                flag ? <Tooltip title='收起'>
                    <MenuFoldOutlined style={{ fontSize: 22 }} />
                </Tooltip> :
                    <Tooltip title='展开'>
                        <MenuUnfoldOutlined style={{ fontSize: 22 }} />
                    </Tooltip>
            }
        </div>
        <AutoTable
            columns={columnsa}
            dataSource={ledgerCustomer?.data ?? []}
            resizeable={false}
            pageextra="none"
            onRow={(record) => {
                return {
                    onClick: (event) => {
                        cr(record);
                    }
                };
            }}
            pagination={'false'}
            dataSourceFieldsChange={(val) => {
                csp({ ...val })
            }}
            toolBarRender={true}
            options={{
                reload: () => {
                    ledgerCustomer.run()
                }
            }}
            rowKey='ledgerCustomerId'
            rowClassName={(record, index) => {
                return record.ledgerCustomerId == clickrow?.ledgerCustomerId ? styles.rowClass : ''
            }}
            style={{ display: flag ? 'block' : 'none' }}
        />
    </div>
}

const Leasedevice = () => {
    const [extraparamsId, setExtraparamsId] = useState('');
    return <div style={{ background: '#fff' }}>
        <div className="ant-card-head" style={{ backgroundColor: 'white' }}>
            <div className="ant-card-head-wrapper">
                <div className="ant-card-head-title">
                    <h3 className="page-title">设备OEE</h3>
                </div>
            </div>
        </div>
        <div style={{ display: "flex", gap: 20, padding: 15 }}>
            <LeftTable onChange={(val) => {
                setExtraparamsId(val);
            }} />
            <div style={{ flex: 1, marginTop: 26, borderLeft: '1px solid #f0f0f0', paddingLeft: 15 }}>
                <AutoTable
                    columns={columnsb}
                    path='/lease/umLeaseLedger/ledgerCustomerEquipmentUseDetail'
                    resizeable={false}
                    pageextra="none"
                    extraparams={{ ledgerCustomerId: extraparamsId }}
                />
            </div>
        </div>
    </div>
}
export default Leasedevice;