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 lodashFind from 'lodash.find';
import getCustomHeader from '@/components/token-header';
import Tools, { ajax } from '@/utils';
const FormItem = Form.Item;
const formItemWidth = '500px';
const defaultTemplateDetail = {
  addFee: 0.0,
  addStandard: 1,
  destination: '1',
  startFee: 0.0,
  startStandard: 1
};
const defaultSubmitData = {
  assumeType: {
    selectedValue: '1'
  },
  shipTime: {},
  templateId: '100000', // 如果是新建则不传
  templateName: '测试运费模板名称',
  templateProtocoList: [
    {
      baseTemplateDetail: {
        addFee: 0.0,
        addStandard: 1,
        destination: '1',
        startFee: 0.0,
        startStandard: 1,
        templateDetailId: '10000111'
      },
      protocoId: '1',
      selected: true
    },
    {
      baseTemplateDetail: { destination: '1', startStandard: 1 },
      protocoId: '2',
      selected: false
    }
  ],
  valuationType: {
    selectedValue: '0'
  }
};
const defaultTemplateItem = {
  startStandard: 1,
  startFee: '',
  addStandard: 1,
  addFee: ''
};
const ShippingForm = () => {
  const [isLoading, setLoading] = useState(false);
  const templateId = Tools.getUrlParam('templateId') || '';
  const [data, setData] = useState({});
  // const [values, setValues] = useState(...data);
  useEffect(() => {
    fetchData();
  }, []);

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

      await setLoading(false);
      if (responseData.success) {
        await setData(formRenderFormatter(responseData.result));
        // console.log('newdata', data);
      } else {
      }
    } catch (e) {}
  });
  const formRenderFormatter = formData => {
    const formValues = {};
    if (formData.assumeType && formData.assumeType.typeList) {
      formData.assumeType.typeList = formData.assumeType.typeList.map(item => {
        item.label = item.title;
        return item;
      });
    }
    if (formData.assumeType.selectedValue) {
      formValues.assumeType = formData.assumeType.selectedValue;
    }
    if (formData.shipTime && formData.shipTime.typeList) {
      formData.shipTime.typeList = formData.shipTime.typeList.map(item => {
        item.label = item.title;
        return item;
      });
    }
    if (formData.shipTime.selectedValue) {
      formValues.shipTime = formData.shipTime.selectedValue;
    }
    if (formData.valuationType && formData.valuationType.typeList) {
      formData.valuationType.typeList = formData.valuationType.typeList.map(
        item => {
          item.label = item.title;
          if (item.value !== '0') {
            item.disabled = true;
          }
          return item;
        }
      );
    }
    if (formData.valuationType.selectedValue) {
      formValues.valuationType = formData.valuationType.selectedValue;
    }

    if (formData.templateProtocoList) {
      const defaultValue = [];
      formData.templateProtocoList = formData.templateProtocoList.map(item => {
        item.label = item.protocoName;
        item.value = item.protocoId;
        if (item.selected) {
          defaultValue.push(item.protocoId);
        }
        return item;
      });
      formValues.templateProtocoList = defaultValue;
    }
    formValues.templateName = formData.templateName;
    formData.formValues = formValues;

    return formData;
  };
  const addOrEditTemplate = () => {
    form.validateAll(async (errors, values) => {
      if (errors) {
        return;
      }
      // console.log('submit', values);
      // console.log('data', data);
      const submitData = { ...data };
      if (values.assumeType) {
        submitData.assumeType.selectedValue = values.assumeType;
      }
      if (values.templateName) {
        submitData.templateName = values.templateName;
      }
      if (values.shipTime) {
        submitData.shipTime.selectedValue = values.shipTime;
      }
      if (values.valuationType) {
        submitData.valuationType.selectedValue = values.valuationType;
      }
      // console.log('submitData', submitData);
      delete submitData.formValues;
      delete submitData.defaultTemplateProtoco;

      try {
        const responseData = await ajax({
          api: 'updateTemplateItem',
          method: 'post',
          type: 'json',
          data: JSON.stringify(submitData),
          contentType: 'application/json',
          headers: getCustomHeader()
        });
        if (responseData.success) {
          // history.back();
          location.href = '/portal/delivery/template';
        } else {
          Dialog.alert({
            title: templateId ? '编辑失败！' : '新建失败',
            content: responseData.message || `系统错误请稍后再试~`
          });
        }
      } catch (e) {
        Dialog.alert({
          title: '操作失败！',
          content: `系统错误请稍后再试~`
        });
      }
    });
  };

  const protocoItemChange = (val, key, protocoItem) => {
    const newProtocoList = data.templateProtocoList.map(newProtocoItem => {
      if (newProtocoItem.protocoId === protocoItem.protocoId) {
        newProtocoItem.baseTemplateDetail[key] = val;
      }
      return newProtocoItem;
    });
    const newData = { ...data };
    newData.templateProtocoList = newProtocoList;
    setData(newData);
  };

  const renderTemplateTable = protocoItem => {
    if (protocoItem.baseTemplateDetail) {
    }
    return (
      <div className={styles.templateEditLine}>
        <span>默认运费</span>
        <Input
          defaultValue={protocoItem.baseTemplateDetail.startStandard}
          name="startStandard"
          className={styles.templateEditInput}
          onChange={val => {
            protocoItemChange(val, 'startStandard', protocoItem);
          }}
        />
        <span>件内</span>
        <Input
          defaultValue={protocoItem.baseTemplateDetail.startFee}
          className={styles.templateEditInput}
          name="startFee"
          onChange={val => {
            protocoItemChange(val, 'startFee', protocoItem);
          }}
        />
        <span>元,</span>
        <span>每增加</span>
        <Input
          defaultValue={protocoItem.baseTemplateDetail.addStandard}
          className={styles.templateEditInput}
          name="addStandard"
          onChange={val => {
            protocoItemChange(val, 'addStandard', protocoItem);
          }}
        />
        <span>件，增加运费</span>
        <Input
          defaultValue={protocoItem.baseTemplateDetail.addFee}
          className={styles.templateEditInput}
          name="addFee"
          onChange={val => {
            protocoItemChange(val, 'addFee', protocoItem);
          }}
        />
        <span>元</span>
      </div>
    );
  };
  let form;
  const protocoChange = values => {
    // console.log(values);
    const newProtocoList = data.templateProtocoList.map(protocoItem => {
      protocoItem.selected = false;
      if (values.indexOf(protocoItem.protocoId) > -1) {
        protocoItem.selected = true;
        if (!protocoItem.baseTemplateDetail.templateDetailId) {
          protocoItem.baseTemplateDetail = Object.assign(
            {},
            defaultTemplateDetail,
            protocoItem.baseTemplateDetail
          );
        }
      }
      return protocoItem;
    });
    const newData = { ...data };
    newData.templateProtocoList = newProtocoList;
    setData(newData);
    // console.log(newProtocoList);
  };
  const formSubmit = values => {
    console.log('formsubmit', values);
  };
  return (
    <div className={styles.container}>
      <PageHead title={templateId ? '修改运费模板' : '添加运费模板'} />
      {data && data.shipTime ? (
        <IceContainer>
          <IceFormBinderWrapper
            value={data.formValues}
            // onSubmit={formSubmit}
            ref={formRef => (form = formRef)}
          >
            <div className={styles.formItem}>
              <div className={styles.formLabel}>
                <em>*</em>
                模板名称：
              </div>
              <IceFormBinder
                name="templateName"
                required
                message="请输入模板名称"
              >
                <Input className={styles.goodsName} />
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="templateName" />
              </div>
            </div>

            <div className={styles.formItem}>
              <div className={styles.formLabel}>
                <em>*</em>发货时间:
              </div>
              <IceFormBinder name="shipTime" required message="请选择发货时间">
                <Radio.Group
                  itemDirection="hoz"
                  dataSource={data.shipTime.typeList}
                ></Radio.Group>
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="shipTime" />
              </div>
            </div>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>
                <em>*</em>是否包邮:
              </div>
              <IceFormBinder
                name="assumeType"
                required
                message="请选择是否包邮"
              >
                <Radio.Group
                  itemDirection="hoz"
                  dataSource={data.assumeType.typeList}
                ></Radio.Group>
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="assumeType" />
              </div>
            </div>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>
                <em>*</em>计价方式:
              </div>
              <IceFormBinder
                name="valuationType"
                required
                message="请选择计价方式"
              >
                <Radio.Group
                  itemDirection="hoz"
                  dataSource={data.valuationType.typeList}
                ></Radio.Group>
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="valuationType" />
              </div>
            </div>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>
                <em>*</em>运送方式:
              </div>
              <IceFormBinder
                name="templateProtocoList"
                required
                message="请选择运送方式"
              >
                <Checkbox.Group
                  name="templateProtocoList"
                  itemDirection="hoz"
                  onChange={e => {
                    protocoChange(e);
                  }}
                >
                  {data.templateProtocoList.map(protocoItem => {
                    return (
                      <div key={protocoItem.protocoId}>
                        <Checkbox
                          value={protocoItem.protocoId}
                          className={styles.hCheckboxItem}
                        >
                          {protocoItem.protocoName}
                        </Checkbox>
                        {protocoItem.selected
                          ? renderTemplateTable(protocoItem)
                          : null}
                      </div>
                    );
                  })}
                </Checkbox.Group>
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="templateProtocoList" />
              </div>
            </div>

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