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 { exportLink } from '@/utils/func';

import AuthConsumer from '@/components/Authority';

import services from '@/services/admin';

const { shopActivityItems } = services.ShopActivityController;
const { shopItems } = services.ShopController;

export default () => {

  const actionRef = useRef();

  const [config, setConfig] = useState();

  const [shopOption, setShopOption] = useState([]);
  const [searchParams, setSearchParams] = useState(null);

  const searchShop = (value) => {
    shopItems({
      username: value
    }).then(({ data }) => {
      const arr = [];
      data?.data?.map((item) => {
        item.label = `${item.username}   ${item.mobile}`;
        arr.push(item);
      });
      setShopOption(arr);
    });
  }

  const columns = [
    {
      title: '活动名称',
      dataIndex: 'title',
      search: false,
    },
    {
      title: '投资人',
      dataIndex: 'shop_id',
      render: (_, record) => {
        return <>
          <div>用户名：{record?.shop?.username}</div>
          <div>手机号：{record?.shop?.mobile}</div>
          <div>等级：{record?.vip}</div>
        </>
      },
      renderFormItem: (
        _,
        { type, defaultRender, formItemProps, fieldProps, ...rest },
        form,
      ) => {
        return <Select
          {...fieldProps}
          allowClear
          showSearch
          placeholder="请输入用户名"
          style={{ width: "100%" }}
          filterOption={false}
          onSearch={
            (e) => {
              if (!e) {
                return;
              }
              searchShop(e);
            }
          }
          fieldNames={{
            label: "label",
            value: "id"
          }}
          options={shopOption}
        />
      },
    },
    {
      title: '时间',
      dataIndex: 'm',
      search: false,
      render: (_, record) => {
        return record?.m + '个月'
      },
    },
    {
      title: '有效期',
      dataIndex: 'type',
      search: false,
      render: (_, record) => {
        return record?.valid_time ? dayjs(record?.valid_time * 1000).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '客户资料',
      dataIndex: 'type',
      search: false,
      render: (_, record) => {
        return <>
          <div>车辆型号：{record?.info?.car_name}</div>
          <div>车主姓名：{record?.info?.realname}</div>
          <div>车牌号码：{record?.info?.plate_code}</div>
          <div>车架号码：{record?.info?.car_code}</div>
          <div>还款卡号：{record?.info?.bank_num}</div>
          <div>银行名称：{record?.info?.bank_name}</div>
          <div>还款日期：{record?.info?.todate}</div>
        </>
      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      search: false,
    },
  ];

  return (
    <PageContainer
      ghost
    >
      <>
        <ProTable
          actionRef={actionRef}
          rowKey="id"
          search={{
            defaultCollapsed: false,
          }}
          toolBarRender={() => [
            <AuthConsumer action={'admin/shop_activity/export'} key="admin/shop_activity/export">
              <Button type="primary" onClick={() => {
                window.location.href = exportLink(searchParams, '/admin/shop_activity/export');
              }}>导出表格</Button>
            </AuthConsumer>,
          ]}
          request={async (params, sorter, filter) => {
            setSearchParams({ token: '', ...params });
            const { data, success } = await shopActivityItems({
              ...params,
              sorter,
              filter,
            });
            return {
              data: data?.items || [],
              total: data?.total,
              success,
            };
          }}
          columns={columns}
        />
      </>
    </PageContainer>
  );
};
