/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2022-04-03 10:53:25
 */
import React, { useState, useEffect } from 'react';
import {
  Modal,
  Table
} from 'antd';

import services from '@/services/admin';

const { shopOrderBonus } = services.ShopOrderController;

export default ({ values, modalOpenState, onModalOpenState }) => {

  const [config, setConfig] = useState(null);
  const [items, setItems] = useState(null);


  useEffect(() => {
    shopOrderBonus({
      order_id: values?.id
    }).then(({ data, success }) => {
      if (success) {
        setItems(data?.items || []);
        setConfig(data?.config)
      }
    }).catch(() => {

    });
  }, [values]);

  const columns = [
    {
      title: '账单号',
      dataIndex: 'order_no',
      search: false,
    },
    {
      title: '投资人',
      dataIndex: 'shop',
      search: false,
      render: (_, record) => {
        return <>
          <div>用户名：{record?.shop?.username}</div>
          <div>手机号：{record?.shop?.mobile}</div>
          <div>等级：{record?.vip}</div>
        </>
      },
    },
    {
      title: '类型',
      dataIndex: 'type',
      search: false,
      render: (_, record) => {
        return config?.scene[record?.scene] + '-' + config?.type[record?.type]
      },
    },
    {
      title: '金额',
      dataIndex: 'money',
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      search: false,
    },
  ];

  return (
    <>
      <Modal width="800px" title="分红" open={modalOpenState} onOk={() => {
        onModalOpenState(false);
      }} onCancel={() => {
        onModalOpenState(false)
      }}>
        <>
          <Table
            rowKey="id"
            columns={columns}
            dataSource={items}
            pagination={false}
          />
        </>
      </Modal>
    </>
  );
};