import React, { useState, useCallback, useEffect } from 'react';
import IceContainer from '@icedesign/container';
import {
  Input,
  Button,
  Message,
  DatePicker,
  Radio,
  Select,
  Table,
  Checkbox,
  Dialog
} from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError
} from '@icedesign/form-binder';
import classNames from 'classnames';
import PageHead from '@/components/page-head';
import styles from './index.module.scss';
import getCustomHeader from '@/components/token-header';
import lodashFind from 'lodash.find';
import Tools, { ajax } from '@/utils';
const { Option } = Select;

//
export default function ProductPublishForm() {
  const [value] = useState({});
  const [isLoading, setLoading] = useState(false);
  const currentOrderId = Tools.getUrlParam('tradeOrderId');
  const [data, setData] = useState({});
  const fetchData = useCallback(async () => {
    await setLoading(true);
    try {
      const responseData = await ajax({
        api: 'getOrderDetail',
        method: 'post', //TODO: post
        type: 'json',
        data: JSON.stringify({ tradeOrderId: currentOrderId }),
        contentType: 'application/json',
        headers: getCustomHeader()
      });

      await setLoading(false);
      console.log(responseData);
      if (responseData.success) {
        await setData(responseData.body);
      } else {
      }
    } catch (e) {}
  });

  useEffect(() => {
    fetchData();
  }, []);

  const validateAllFormField = () => {
    form.validateAll(async (errors, values) => {
      if (errors) {
        return;
      }

      const submitValues = {
        itemPublishDTO: {
          ...values
        }
        // sellerId: '11'
      };
      try {
        const responseData = await ajax({
          api: 'productPublish',
          method: 'post',
          type: 'json',
          data: JSON.stringify(submitValues),
          contentType: 'application/json',
          headers: getCustomHeader()
        });

        if (responseData.success) {
          Dialog.alert({
            title: '操作成功！',
            onOk: () => {
              location.href = '/portal/item/manage';
            }
            // content: responseData.message || `系统错误请稍后再试~`
          });
          // Dialog.show('发布成功');
        } else {
          Dialog.alert({
            title: '操作失败！',
            content: responseData.errorMsg || `系统错误请稍后再试~`
          });
        }
      } catch (e) {
        // Dialog.alert('发布失败');
      }
      console.log({ values });
      // Message.success('提交成功');
    });
  };

  return (
    <div>
      <PageHead title="订单详情" />
      {data && data.tradeOrderId ? (
        <IceContainer className={styles.iceContainer}>
          <h3>订单编号：{currentOrderId}</h3>
          <div className={styles.orderData}>
            <div className={styles.buyerData}>
              <h3> 客户信息</h3>
              <p>
                <span>下单时间：</span>
                <span>{data.createTime}</span>
              </p>
              <p>
                <span>买家昵称：</span>
                <span>{data.buyerInfoVO.name}</span>
              </p>
              <p>
                <span>买家电话：</span>
                <span>{data.buyerInfoVO.phoneNum}</span>
              </p>
              {data.buyerInfoVO.email ? (
                <p>
                  <span>买家邮箱：</span>
                  <span>{data.buyerInfoVO.email}</span>
                </p>
              ) : null}
            </div>
            <div className={styles.orderSum}>
              <h3> 付款信息</h3>

              <p>
                <span>商品总价：</span>
                <span>{data.payInfoPortalVO.itemTotalPrice}</span>
              </p>
              <p>
                <span>运费：</span>
                <span>{data.payInfoPortalVO.postFee}</span>
              </p>

              <p>
                <span>折扣：</span>
                <span>{data.payInfoPortalVO.discountFee}</span>
              </p>
              <p>
                <span>合计：</span>
                <span>{data.payInfoPortalVO.actualFee}</span>
              </p>
            </div>
            <div className={styles.shippingInfo}>
              <h3>发货信息</h3>
              <p>
                <span>收货人：</span>
                <span>{data.addressInfoPortalVO.name}</span>
              </p>
              <p>
                <span>地址：</span>
                <span>{data.addressInfoPortalVO.address}</span>
              </p>
              <p>
                <span>电话：</span>
                <span>{data.addressInfoPortalVO.phoneNum}</span>
              </p>
              {data.addressInfoPortalVO.deliveryBillNum ? (
                <p>
                  <span>快递单号：</span>
                  <span>{data.addressInfoPortalVO.deliveryBillNum}</span>
                </p>
              ) : null}
            </div>
          </div>
          <h3>子订单</h3>
          <Table
            loading={isLoading}
            dataSource={data.tradeOrderLinePortalVOList}
            hasBorder={false}
          >
            <Table.Column title="子订单号" dataIndex="tradeOrderLineId" />
            <Table.Column title="SKU" dataIndex="skuId" />
            <Table.Column title="商品名称" dataIndex="itemTitle" />
            <Table.Column title="数量" dataIndex="quantity" />
            <Table.Column title="订单金额" dataIndex="total" />
            <Table.Column title="订单状态" dataIndex="status" />
          </Table>
        </IceContainer>
      ) : null}
    </div>
  );
}