import { DownloadOutlined } from '@ant-design/icons';
import { Button, message, Select, Input } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import api from './service';
import OrderflowDetail from './Detail';
import CreateForm from './components/CreateForm';

const handleAdd = async (fields) => {
  const hide = message.loading('正在处理');
  try {
    await api.Update(JSON.stringify(fields)).then((r) => {
      console.log('fds', r);
      if (r.data) {
        message.success('处理成功');
      } else {
        message.error('失败请重试！');
      }
    });
    hide();
    return true;
  } catch (error) {
    hide();
    message.error('失败请重试！');
    return false;
  }
};
const Manage = () => {
  const [row, setRow] = useState();
  const [orderAfterSalesModalVisible, handleModalVisible] = useState();
  const [updateModalVisible, updatehandleModalVisible] = useState(false);
  const actionRef = useRef();
  /** 国际化配置 */

  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '订单时间',
      dataIndex: 'order_CreateTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            order_CreateTime: value[0],
            order_EndTime: value[1],
          };
        },
      },
    },
    {
      title: '订单号',
      dataIndex: 'orderId',
    },
    {
      title: '订单金额',
      dataIndex: 'orderRealMoney',
      renderText: (val) => `${val}¥`,
      hideInSearch: true,
    },
    {
      title: '售后原因',
      dataIndex: 'why',
      hideInSearch: true,
    },
    {
      title: '售后状态',
      dataIndex: 'auditStatus',
      key: 'auditStatus',
      valueEnum: {
        0: {
          text: '取消申请',
          status: 'success',
        },
        1: {
          text: '拒绝',
          status: 'success',
        },
        2: {
          text: '未审核',
          status: 'warning',
        },
        3: {
          text: '审核中',
          status: 'Processing',
        },
        4: {
          text: '处理完成',
          status: 'success',
        },
      },
    },
    {
      title: '处理结果',
      dataIndex: 'auditWhy',
      hideInSearch: true,
    },
    {
      title: '处理时间',
      sorter: true,
      dataIndex: 'updatedAt',
      valueType: 'dateTime',
      hideInSearch: true,
      renderFormItem: (item, { defaultRender, ...rest }, form) => {
        return defaultRender(item);
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => {
        let node = <a key="primary"></a>;
        if (record.auditStatus == '2') {
          node = (
            <a
              key="primary"
              onClick={() => {
                updatehandleModalVisible(true);
                setRow(record);
              }}
            >
              开始处理
            </a>
          );
        }
        if (record.auditStatus == '3') {
          node = (
            <a
              key="primary"
              onClick={() => {
                updatehandleModalVisible(true);
                setRow(record);
              }}
            >
              继续处理
            </a>
          );
        }
        return [
          <a
            key="primary"
            onClick={() => {
              handleModalVisible(true);
              setRow(record);
            }}
          >
            处理日志
          </a>,
          node,
        ];
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="售后申请"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        columns={columns}
        //数据绑定
        request={async (params, sorter, filter) => {
          const msg = await api.orderList(params);
          return {
            data: msg.data.data,
            success: true,
            total: msg.data.total,
          };
        }}
      ></ProTable>

      {!!row && (
        <OrderflowDetail
          onCancel={() => {
            setRow(undefined);
            handleModalVisible(false);
          }}
          ModalVisible={orderAfterSalesModalVisible}
          values={row || {}}
        />
      )}
      <CreateForm
        onFinish={async (value) => {
          var success = false;
          success = await handleAdd(value);
          if (success) {
            updatehandleModalVisible(false);
            setRow(undefined);

            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => {
          updatehandleModalVisible(false);
          setRow(undefined);
        }}
        updateModalVisible={updateModalVisible}
        values={row || {}}
      />
    </PageContainer>
  );
};

export default Manage;
