import React, { useRef, useEffect, useState } from 'react';
import { history } from '@umijs/max';

import { Select, Space, Image, Button } from 'antd';
import {
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';
import dayjs from 'dayjs';

import AuthConsumer from '@/components/Authority';

import services from '@/services/admin';

const { deviceOrderItems } = services.DeviceOrderController;
const { userItems } = services.UserController;

import Reportkw from '../../components/Reportkw';


export default () => {

  const actionRef = useRef();

  const initRow = {

  };

  const [config, setConfig] = useState();
  const [reportkwModal, setReportkwModal] = useState(false);

  const [row, setRow] = useState(initRow);
  const [userOption, setUserOption] = useState([]);

  const searchUser = (value) => {
    userItems({
      keyword: value
    }).then(({ data }) => {
      const arr = [];
      data?.items?.map((item) => {
        item.label = `${item.nickname}   ${item.mobile}`;
        arr.push(item);
      });
      setUserOption(arr);
    });

  }


  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
    },
    {
      title: '订单号',
      dataIndex: 'order_no',
      search: true,
    },
    {
      title: '设备号',
      dataIndex: 'device_id',
      search: true,
      render: (_, record) => {
        const time = [];
        return <>
          <Button
            type="link"
            onClick={() => {
              setRow({ device_id: record.device_id });
              setReportkwModal(true);
            }}
          >{record?.device_id}</Button>
        </>;
      },
    },
    {
      title: '用户',
      dataIndex: 'user_id',
      renderFormItem: (
        _,
        { type, defaultRender, formItemProps, fieldProps, ...rest },
        form,
      ) => {
        return <Select
          {...fieldProps}
          showSearch
          style={{ width: "100%" }}
          filterOption={false}
          onSearch={
            (e) => {
              if (!e) {
                return;
              }
              searchUser(e);
            }
          }
          fieldNames={{
            label: "label",
            value: "id"
          }}
          options={userOption}
        />
      },
      render: (_, record) => {
        return <>
          <Image src={record?.user?.avatar_url} width={50} />
          <div>{record?.user?.nickname}</div>
          <div>{record?.user?.mobile}</div>
        </>
      },
    },
    {
      title: '订单金额',
      dataIndex: 'total_money',
      search: false,
    },
    {
      title: '充电金额',
      dataIndex: 'use_money',
      search: false,
    },
    {
      title: '付款方式',
      dataIndex: 'pay_type',
      search: false,
      render: (_, record) => {
        return <>
          {config?.pay_type[record?.pay_type]}
        </>
      },
    },
    {
      title: '充电时间',
      dataIndex: 'pay_time',
      search: false,
      render: (_, record) => {
        const time = [];
        if (record?.pay_time) {
          time.push(dayjs(record.pay_time * 1000).format('HH:mm:ss'));
        }
        if (record?.stop_time) {
          time.push(dayjs(record.stop_time * 1000).format('HH:mm:ss'));
        }
        return time.join(' - ');
      },
    },
    {
      title: '时长',
      dataIndex: 'duration',
      search: false,
      render: (_, record) => {
        return `${record.duration}分钟`;
      },
    },
    {
      title: 'kwh',
      dataIndex: 'kwh',
      search: false,
    },
    {
      title: '状态',
      dataIndex: 'status',
      search: false,
      render: (_, record) => {
        return <>
          <div>订单状态: {config?.status[record?.status]}</div>
          <div>断电方式: {config?.stop_status[record?.stop_status]}</div>
        </>
      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <Space>

        </Space>
      ),
    },
  ];

  return (
    <PageContainer
      ghost
    >
      <>
        <Reportkw
          values={row}
          type={1}
          modalOpenState={reportkwModal}
          onModalOpenState={setReportkwModal}
        />

        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={{
            defaultCollapsed: false,
          }}
          toolBarRender={() => [

          ]}
          request={async (params, sorter, filter) => {
            const { data, success } = await deviceOrderItems({
              ...params,
              sorter,
              filter,
            });
            setConfig(data?.config);
            return {
              data: data.items || [],
              total: data.total,
              success,
            };
          }}
          columns={columns}
        />
      </>
    </PageContainer>
  );
};
