import React, { useState, useRef } from 'react';
import AutoTable from '@/components/AutoTable/mtable';
import { useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch';
const columnsa = [
    {
        title: '客户名称',
        dataIndex: 'ledgerCustomer',
        key: 'ledgerCustomer'
    },
    {
        title: '租赁数量',
        dataIndex: 'deviceNum',
        key: 'deviceNum',
        search: false
    },
    {
        title: '使用率',
        dataIndex: 'rate',
        key: 'rate',
        search: false
    },
],
    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: {} }
        },
        {
            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: '报警'
                },
            ]
        },
        {
            title: '工作',
            dataIndex: 'runRate',
            key: 'runRate',
            search: false
        },
        {
            title: '待机',
            dataIndex: 'standbyRate',
            key: 'standbyRate',
            search: false
        },
        {
            title: '报警',
            dataIndex: 'alarmRate',
            key: 'alarmRate',
            search: false
        },
        {
            title: '关机',
            dataIndex: 'offRate',
            key: 'offRate',
            search: false
        },
    ];

const Leasedevice = () => {
    const [clickrow, cr] = useState({}),
        [searchParams, csp] = useState({}),
        formRef = useRef();
    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]
    })
    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">租赁设备</h3>
                </div>
            </div>
        </div>
        <div style={{ display: "flex", gap: 20, padding: 15 }}>
            <div style={{ flex: 1 }}>
                <AutoTable
                    columns={columnsa}
                    dataSource={ledgerCustomer?.data ?? []}
                    resizeable={false}
                    pageextra="none"
                    onRow={(record) => {
                        return {
                            onClick: (event) => {
                                console.log(event, record);
                            }
                        };
                    }}
                    pagination={'false'}
                    formRef={formRef}
                    dataSourceFieldsChange={(val) => {
                        csp({ ...val })
                    }}
                    toolBarRender={true}
                    options={false}
                />
            </div>
            <div style={{ flex: 2 }}>
                <AutoTable
                    columns={columnsb}
                    path='/lease/umLeaseLedger/ledgerCustomerEquipmentUseDetail'
                    resizeable={false}
                    pageextra="none"
                />
            </div>
        </div>
    </div>
}
export default Leasedevice;