import React, { useState, useEffect, useCallback } from 'react';
import {
  Table,
  Input,
  Select,
  Checkbox,
  Radio,
  Pagination,
  Button,
  Dialog,
  Form
} from '@alifd/next';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError
} from '@icedesign/form-binder';
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 FormItem = Form.Item;
const formItemWidth = '500px';

const defaultSubmitData = {
  attributes: { isv_check: true }
};

const ShippingForm = () => {
  const [isLoading, setLoading] = useState(false);
  const tradeOrderId = Tools.getUrlParam('tradeOrderId');
  const [data, setData] = useState({});
  // const [values, setValues] = useState(...data);
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = useCallback(async () => {
    await setLoading(true);
    try {
      const responseData = await ajax({
        api: 'getSendGoodData',
        method: 'get',
        data: {
          tradeOrderId
        }
      });

      await setLoading(false);
      if (responseData.success) {
        await setData(formRenderFormatter(responseData.result));
        // console.log('newdata', data);
      } else {
      }
    } catch (e) {}
  });
  const formRenderFormatter = formData => {
    if (formData.lgCompanyList) {
      formData.lgCompanyList = formData.lgCompanyList.map(lgCompany => {
        lgCompany.label = lgCompany.lgCompanyName;
        lgCompany.value = lgCompany.lgCompanyId;
        return lgCompany;
      });
    }
    return formData;
  };
  const sendGoodSubmit = () => {
    form.validateAll(async (errors, values) => {
      if (errors) {
        return;
      }
      const submitData = { ...values };
      if (data.shipAddressList.length && data.shipAddressList[0].addressId) {
        submitData.sendAddressId = data.shipAddressList[0].addressId;
      }
      submitData.tradeOrderId = data.tradeOrderVO.tradeOrderId;
      try {
        const responseData = await ajax({
          api: 'sendGood',
          method: 'post',
          type: 'json',
          data: JSON.stringify(submitData),
          contentType: 'application/json',
          headers: getCustomHeader()
        });
        if (responseData.success) {
          history.back();
        } else {
          Dialog.alert({
            title: '操作失败！',
            content: responseData.message || `系统错误请稍后再试~`
          });
        }
      } catch (e) {
        Dialog.alert({
          title: '操作失败！',
          content: `系统错误请稍后再试~`
        });
      }
    });
    // async;
  };

  const renderTemplateTable = () => {
    const tableDom = [];
    data.tradeOrderVO.orderLineVOList.map(subOrder => {
      tableDom.push(
        <div className={styles.subOrderItem}>
          {/* <span>{subOrder.tradeOrderLineId}</span> */}
          <div className={styles.img}>
            <img
              src={subOrder.skuPictUrl}
              width="90"
              alt={subOrder.itemTitle}
            />
          </div>
          <div className={styles.subOrderInfo}>
            <h4>{subOrder.itemTitle}</h4>
            <p>
              <span>skuId:</span>
              {subOrder.skuId}
            </p>
            <p>
              <span>数量：</span>
              {subOrder.quantity}
            </p>
          </div>
        </div>
      );
    });
    return <div className={styles.subOrderTable}>{tableDom}</div>;
  };
  let form;
  return (
    <div className={styles.container}>
      <PageHead title="订单发货" />
      {data && data.tradeOrderVO ? (
        <IceContainer>
          <div className={styles.tradeInfo}>
            <h3 className={styles.stepTitle}>
              <em>第一步</em>确认收货信息及交易详情
            </h3>
            <p className={styles.orderInfo}>
              <span>订单编号：</span>
              {data.tradeOrderVO.tradeOrderId}
              <span>创建时间：</span>
              {data.tradeOrderVO.orderCreatedTime}
            </p>
            {renderTemplateTable()}
            <p className={styles.buyerInfo}>
              <span>买家收货信息：</span>
              {data.tradeOrderVO.deliveryAddress}, {data.tradeOrderVO.buyerName}{' '}
              ,{data.tradeOrderVO.deliveryPhone}
            </p>
          </div>

          <div className={styles.tradeInfo}>
            <h3 className={styles.stepTitle}>
              <em>第二步</em>确认发货信息
            </h3>
            <p className={styles.sellerInfo}>
              <span>我的发货信息：</span>
              {data.shipAddressList.length ? (
                data.shipAddressList[0].address
              ) : (
                <span style={{ color: 'red' }}>
                  没有设置发货信息，无法发货！
                </span>
              )}
            </p>
          </div>
          <div className={styles.tradeInfo}>
            <h3 className={styles.stepTitle}>
              <em>第三步</em>选择物流服务
            </h3>
          </div>
          <IceFormBinderWrapper
            // value={data.formValues}
            // onChange={formChange}
            ref={formRef => (form = formRef)}
          >
            <div className={styles.formItem}>
              <div className={styles.formLabel}>物流公司：</div>
              <IceFormBinder name="lgCompanyId">
                <Select
                  className={styles.goodsName}
                  dataSource={data.lgCompanyList}
                />
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="lgCompanyId" />
              </div>
            </div>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>物流单号：</div>
              <IceFormBinder name="lgCompanyDeliveryId">
                <Input className={styles.goodsName} />
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="lgCompanyDeliveryId" />
              </div>
            </div>

            <FormItem>
              <Form.Submit type="primary" onClick={sendGoodSubmit}>
                提交
              </Form.Submit>
            </FormItem>
          </IceFormBinderWrapper>
        </IceContainer>
      ) : null}
    </div>
  );
};
export default ShippingForm;