import React, { useState, useCallback, useEffect } from 'react';
import IceContainer from '@icedesign/container';
import {
  Input,
  Button,
  Message,
  DatePicker,
  Radio,
  Select,
  Table,
  Checkbox,
  Cascader,
  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';
import ProductPropertyFormItem from './saleFormItem';
import CommonPropertyFormItem from './commonPropertyItem';
import formRenderFormatter from './formRenderFormatter';
import formValueFormatter from './formValueFormatter';
import formatCategory from './categoryValueFormatter';
import generateRadomId from './generateRadomId';
import descartes from './descartes';
const { Option } = Select;
const { Group: RadioGroup } = Radio;
const { RangePicker } = DatePicker;

const defaultItemPublishDTO = {
  title: '',
  subTitle: '',
  pictUrl: '',
  leafCategoryId: '',
  postageId: '',
  skuList: [],
  itemDim: 0,
  returnPolicy: 0,
  description: '',
  itemPVPairList: [],
  storeId: ''
};
const defaultSkuListDTO = {
  skuId: '',
  description: '',
  price: 0,
  imageList: [],
  salePVPairList: [],
  outerId: ''
};
const defaultItemImagePublishDTO = {
  name: '',
  url: '',
  major: false,
  position: 0
};
const defaultItemPVPairDTO = {
  propertyId: '',
  propertyText: '',
  valueId: '',
  valueText: ''
};
let form;
const defaultImageList = [
  {
    major: false,
    name: '苹果-灰色图片1',
    position: 1,
    url:
      'https://img.alicdn.com/imgextra/i3/4080579105/O1CN01FUFrcO2H88kMOTPh7_!!4080579105.jpg'
  }
];
const dialogDefaultItem = {
  dialogTitle: '选择类目'
};
export default function ProductPublishForm() {
  const [value, setValue] = useState({});
  const [isLoading, setLoading] = useState(false);
  const [dialogVisible, setDialogVisible] = useState(false);
  const [dialogData, setDialogData] = useState({ ...dialogDefaultItem });
  const [data, setData] = useState({});
  const [itemData, setItemData] = useState({});
  const [descartesTableData, setDescartesTableData] = useState([]);
  const [skuList, setSkuList] = useState([]);
  const [itemPVPairList, setItemPVPairList] = useState([]);
  const [categoryIdFromCascader, setCategoryIdFromCascader] = useState();
  const [categoryId, setCategoryId] = useState();
  // const categoryId = Tools.getUrlParam('categoryId');
  // const categoryId = Tools.getUrlParam('categoryId');
  const itemId = Tools.getUrlParam('itemId');
  const [categoryDataSource, setCategoryDataSource] = useState([]);
  const queryCategoryRenderData = categoryId => {
    return ajax({
      api: 'productPublishRender',
      method: 'post', // TODO: post
      type: 'json',
      data: JSON.stringify({ categoryId }),
      contentType: 'application/json',
      headers: getCustomHeader()
    });
  };
  const queryCategoryTreeData = categoryId => {
    return ajax({
      api: 'getCategory',
      method: 'get',
      type: 'json',
      data: { categoryId },
      contentType: 'application/json'
      // headers: getCustomHeader()
    });
  };
  const fetchData = useCallback(async () => {
    await setLoading(true);
    if (!itemId) {
      if (categoryId) {
        try {
          const responseData = await queryCategoryRenderData(categoryId);

          await setLoading(false);
          // console.log(responseData);
          if (responseData.success) {
            await setData(formRenderFormatter(responseData.model, null));
          } else {
          }
        } catch (e) {
          console.log(e);
        }
      }
    } else {
      try {
        const itemData = await ajax({
          api: 'productEditGetData',
          method: 'post', // TODO: post
          type: 'json',
          data: JSON.stringify({ itemId }),
          contentType: 'application/json',
          headers: getCustomHeader()
        });
        // console.log('item', itemData.model);
        if (
          itemData.success &&
          itemData.model &&
          itemData.model.leafCategoryId
        ) {
          const editRenderData = await queryCategoryRenderData(
            itemData.model.leafCategoryId
          );
          // console.log(editRenderData);
          if (editRenderData.success) {
            await setData(
              formRenderFormatter(editRenderData.model, itemData.model)
            );
            await setCategoryId(itemData.model.leafCategoryId);
            await setValue(formValueFormatter(itemData.model));

            await getSkuTableData(
              editRenderData.model.categoryVO.salePropertyVOList,
              itemData.model
            );
            await setItemData(itemData.model);
            await setItemPVPairList(itemData.model.itemPVPairList);
          } else {
            Dialog.alert({
              title: '加载失败',
              content: editRenderData.errorMsg || `系统错误请稍后再试~`
            });
          }
        } else {
          Dialog.alert({
            title: '加载失败',
            content: itemData.errorMsg || `系统错误请稍后再试~`
          });
        }
        await setLoading(false);
      } catch (e) {
        await setLoading(false);
        Dialog.alert({
          title: '加载失败',
          content: e.errorMsg || `系统错误请稍后再试~`
        });

        console.log(e);
      }
    }
  });

  useEffect(() => {
    fetchData();
  }, [categoryId]);
  const formChange = formValue => {
    // console.log('value', formValue);
  };
  const changeCategory = () => {
    setDialogVisible(false);
    setCategoryId(categoryIdFromCascader);
    // location.href =
    //   '/portal/item/manage/itemPublishPage?categoryId=' + categoryId;
  };
  const renderCategoryDialog = () => {
    return (
      <Dialog
        title={dialogData.dialogTitle}
        visible={dialogVisible}
        footer={false}
        style={{ width: '60%' }}
        onClose={() => setDialogVisible(false)}
      >
        <div className={styles.categoryList}>
          {categoryDataSource.length > 0 ? (
            <div>
              <Cascader
                canOnlySelectLeaf
                onChange={cascaderChange}
                dataSource={categoryDataSource}
                loadData={loadLeafData}
                listStyle={{ minWidth: 180, fontSize: 12 }}
              />
            </div>
          ) : null}
          <div>
            <Button type="primary" onClick={changeCategory}>
              确定
            </Button>
          </div>
        </div>
      </Dialog>
    );
  };
  const cascaderChange = value => {
    console.log('onchange', value, data);
    setCategoryIdFromCascader(value);
  };

  const loadLeafData = async (data, source) => {
    try {
      const categoryData = await queryCategoryTreeData(source.value);
      if (
        categoryData.success &&
        categoryData.result &&
        categoryData.result.categoryQueryHierarchyVOList
      ) {
        const children = formatCategory(
          categoryData.result.categoryQueryHierarchyVOList
        );

        // source.children = [
        //   { value: '2975', label: '西安市', isLeaf: true },
        //   { value: '2976', label: '高陵县', isLeaf: true }
        // ];
        source.children = children;
        const newCategoryDataSource = [...categoryDataSource];

        return setCategoryDataSource(newCategoryDataSource);
      }
    } catch (e) {
      // console.log(e);
      // reject(e);
    }
  };
  const showCategoryDialog = async () => {
    setDialogData({
      ...dialogDefaultItem
    });
    setDialogVisible(true);
    try {
      const categoryData = await queryCategoryTreeData(0);
      if (
        categoryData.success &&
        categoryData.result &&
        categoryData.result.categoryQueryHierarchyVOList
      ) {
        setCategoryDataSource(
          formatCategory(categoryData.result.categoryQueryHierarchyVOList)
        );
      }
    } catch (e) {
      console.log(e);
    }
  };
  const validateAllFormField = () => {
    form.validateAll(async (errors, values) => {
      if (errors) {
        return;
      }
      const storeItemPublishDTOList = [];
      if (Array.isArray(values.storeId)) {
        values.storeId.map(item => {
          storeItemPublishDTOList.push({ storeId: item });
        });
        delete values.storeId;
      }
      const submitValues = itemId
        ? {
            itemEditDTO: {
              ...values,
              itemId,
              itemDim: values.itemDim,
              leafCategoryId: value.leafCategoryId,
              pictUrl: '/c/苹果.jpg',
              // storeId: values.storeId,
              storeItemPublishDTOList,
              returnPolicy: values.returnPolicy,
              skuList,
              itemPVPairList
            }
          }
        : {
            itemPublishDTO: {
              ...values,
              itemDim: values.itemDim,
              leafCategoryId: categoryId,
              pictUrl: '/c/苹果.jpg',
              // storeId: values.storeId,
              storeItemPublishDTOList,
              returnPolicy: values.returnPolicy,
              skuList,
              itemPVPairList
            }
            // sellerId: '11'
          };
      try {
        const responseData = await ajax({
          api: itemId ? 'productEdit' : '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';
            }
          });
        } else {
          Dialog.alert({
            title: '操作失败！',
            content: responseData.errorMsg || `系统错误请稍后再试~`
          });
        }
      } catch (e) {
        // Dialog.alert('发布失败');
      }
      // console.log({ values });
      // Message.success('提交成功');
    });
  };
  const addPropValueForMultiInput = (propertyItem, value) => {
    const newData = { ...data };
    newData.categoryVO.salePropertyVOList.map(pItem => {
      if (pItem.propertyKeyId === propertyItem.propertyKeyId) {
        pItem.propertyValueVOList.push({
          propertyValueText: value,
          uniqueId: generateRadomId(),
          checked: true
        });
      }
      return pItem;
    });
    setData(newData);
  };
  const checkAndRenderSkuTable = (e, propertyKeyId) => {
    const newData = { ...data };
    newData.categoryVO.salePropertyVOList.map(pItem => {
      if (pItem.propertyKeyId === propertyKeyId) {
        pItem.propertyValueVOList.map(valueItem => {
          if (e.indexOf(valueItem.propertyValueId) > -1) {
            valueItem.checked = true;
          } else {
            valueItem.checked = false;
          }
        });
      }
      return pItem;
    });
    const skuTableData = getSkuTableData(
      newData.categoryVO.salePropertyVOList,
      itemData || null
    );
    setData(newData);
  };

  const getSkuTableData = (salePropertyVOList, initData) => {
    const columList = [];
    salePropertyVOList.map(pItem => {
      let hasSlected = false;
      const columnItem = [];
      pItem.propertyValueVOList.map(valueItem => {
        hasSlected = true;
        if (valueItem.checked) {
          columnItem.push({
            propertyValueId: valueItem.propertyValueId,
            valueText: valueItem.propertyValueText,
            propertyKeyId: pItem.propertyKeyId,
            propertyKeyText: pItem.propertyKeyText
          });
        }
      });
      if (hasSlected) {
        columList.push(columnItem);
      }
    });
    if (columList.length == salePropertyVOList.length) {
      const tableData = descartes(columList).map(item => {
        item = Array.isArray(item) ? item : [item];
        const tableItem = {
          price: 0,
          quantity: 0,
          description: '',
          pvPair: item
        };
        if (initData && initData.skuList) {
          const pvPairShort = [];
          tableItem.pvPair.map(pairItem => {
            pvPairShort.push({
              propertyId: pairItem.propertyKeyId,
              valueId: pairItem.propertyValueId
            });
          });
          tableItem.pvPairShort = pvPairShort;

          const skuItem = lodashFind(initData.skuList, {
            salePVPairList: pvPairShort
          });
          if (skuItem && skuItem.skuId) {
            tableItem.price = skuItem.price;
            tableItem.quantity = skuItem.quantity;
            tableItem.description = skuItem.description;
            tableItem.skuId = skuItem.skuId;
          }
          // console.log('tableItem default data', tableItem);
        }
        item.map(propertyItem => {
          tableItem[propertyItem.propertyKeyId] = propertyItem.valueText;
        });
        // else {
        //   tableItem[item.propertyKeyId] = item.valueText;
        // }
        tableItem.extraInfo = [
          {
            valueText: '0',
            key: 'price',
            propertyKeyText: '价格',
            input: true
          },
          {
            valueText: '0',
            key: 'quantity',
            propertyKeyText: '数量',
            input: true
          },
          {
            valueText: '0',
            key: 'description',
            propertyKeyText: '描述',
            input: true
          }
        ];

        return tableItem;
      });
      setDescartesTableData(tableData);
      if (initData) {
        setSkuList(getSkuListFromDescartesData(tableData));
        // setSkuList(initData.skuList);
      }
    }
  };
  const renderSaleProperty = propertyItem => {
    return (
      <div
        className={classNames(styles.formItem, styles.alignTop)}
        key={propertyItem.propertyKeyId}
      >
        <div className={styles.formLabel}>{propertyItem.propertyKeyText}：</div>
        <IceFormBinder name={propertyItem.propertyKeyId} message="xx">
          <ProductPropertyFormItem
            propertyItem={propertyItem}
            events={{
              onAdd: value => {
                addPropValueForMultiInput(propertyItem, value);
              },
              checkAndRenderSkuTable: (e, propertyKeyId) => {
                checkAndRenderSkuTable(e, propertyKeyId);
              }
            }}
          />
        </IceFormBinder>
        <div className={styles.formError}>
          <IceFormError name={propertyItem.propertyKeyId} />
        </div>
      </div>
    );
  };
  const commonPropertyChange = (val, propertyKeyId) => {
    // console.log(val, propertyKeyId);
    const newItemPVPairList = [...itemPVPairList];
    data.categoryVO.commonPropertyVOList.map(pItem => {
      if (propertyKeyId == pItem.propertyKeyId) {
        let oldPVPairItem = lodashFind(newItemPVPairList, {
          propertyId: propertyKeyId
        });
        if (!oldPVPairItem) {
          oldPVPairItem = { propertyId: propertyKeyId };

          newItemPVPairList.push(oldPVPairItem);
        }
        oldPVPairItem.valueId = val;
      }
    });
    setItemPVPairList(newItemPVPairList);
    console.log(newItemPVPairList);
  };
  // const defaultItemPVPairList = () => {
  //   data.categoryVO.commonPropertyVOList.map(pItem => {
  //     pVPairItem={ propertyId: propertyKeyId };
  //   });
  //   setItemPVPairList(data.categoryVO.commonPropertyVOList);
  //   // console.log(newItemPVPairList);
  // };

  const renderCommonProperty = propertyItem => {
    return (
      <div className={styles.formItem} key={propertyItem.propertyKeyId}>
        <div className={styles.formLabel}>{propertyItem.propertyKeyText}：</div>
        <IceFormBinder name={propertyItem.propertyKeyId} message="xx">
          <CommonPropertyFormItem
            propertyItem={propertyItem}
            events={{
              onChange: commonPropertyChange
            }}
          />
        </IceFormBinder>
        <div className={styles.formError}>
          <IceFormError name={propertyItem.propertyKeyId} />
        </div>
      </div>
    );
  };
  const getSkuListFromDescartesData = descartesData => {
    const newSkuList = [];
    descartesData.map(tableItem => {
      const skuItem = { salePVPairList: [], imageList: defaultImageList };
      if (tableItem.skuId) {
        skuItem.skuId = tableItem.skuId;
      }
      tableItem.extraInfo.map(extraItem => {
        skuItem[extraItem.key] = tableItem[extraItem.key];
      });
      tableItem.pvPair.map(pvPairItem => {
        const submitPVPair = { propertyId: pvPairItem.propertyKeyId };
        if (pvPairItem.propertyValueId && pvPairItem.propertyValueId.length) {
          submitPVPair.valueId = pvPairItem.propertyValueId;
        } else {
          submitPVPair.valueText = pvPairItem.valueText;
        }
        skuItem.salePVPairList.push(submitPVPair);
      });
      newSkuList.push(skuItem);
    });
    return newSkuList;
  };
  const skuTableChange = (key, val, index, record) => {
    // console.log('record', key, record, index, val);
    descartesTableData[index][key] = val;
    const newSkuList = getSkuListFromDescartesData(descartesTableData);
    // descartesTableData.map(tableItem => {
    //   const skuItem = { salePVPairList: [], imageList: defaultImageList };

    //   tableItem.extraInfo.map(extraItem => {
    //     skuItem[extraItem.key] = tableItem[extraItem.key];
    //   });
    //   tableItem.pvPair.map(pvPairItem => {
    //     const submitPVPair = { propertyId: pvPairItem.propertyKeyId };
    //     if (pvPairItem.propertyValueId && pvPairItem.propertyValueId.length) {
    //       submitPVPair.valueId = pvPairItem.propertyValueId;
    //     } else {
    //       submitPVPair.valueText = pvPairItem.valueText;
    //     }
    //     skuItem.salePVPairList.push(submitPVPair);
    //   });
    //   newSkuList.push(skuItem);
    // });
    setSkuList(newSkuList);
  };
  const getInputKey = record => {
    let str = '';
    record.pvPair.map(pvItem => {
      str = `${str}-${pvItem.propertyKeyId}-${pvItem.propertyValueId}-`;
    });
    return str;
  };
  const renderTableCellInput = (key, value, index, record) => {
    // console.log(key, value, index, record);
    // console.log(`${getInputKey(record)}${key}`);
    return (
      <Input
        defaultValue={value}
        key={`${getInputKey(record)}${key}`}
        onChange={val => {
          skuTableChange(key, val, index, record);
        }}
      />
    );
  };
  const getColumns = firstLine => {
    const columns = [];
    Object.keys(firstLine).map(key => {
      if (
        key !== 'pvPair' &&
        key !== 'pvPairShort' &&
        key !== 'extraInfo' &&
        key !== 'skuId'
      ) {
        const pvItem = lodashFind(firstLine.pvPair, { propertyKeyId: key });
        if (pvItem) {
          columns.push(
            <Table.Column
              key={key}
              title={pvItem.propertyKeyText}
              dataIndex={key}
            />
          );
        } else {
          const extraItem = lodashFind(firstLine.extraInfo, { key });
          if (extraItem && extraItem.input) {
            columns.push(
              <Table.Column
                title={extraItem.propertyKeyText}
                key={key}
                dataIndex={key}
                cell={(value, index, record) =>
                  renderTableCellInput(extraItem.key, value, index, record)
                }
              />
            );
          } else {
            columns.push(
              <Table.Column
                key={key}
                title={extraItem.propertyKeyText}
                dataIndex={key}
              />
            );
          }
        }
      }
    });

    return columns;
  };
  return (
    <div>
      <PageHead title={itemId ? '编辑商品' : '添加商品'} />
      {renderCategoryDialog()}
      <IceFormBinderWrapper
        value={value}
        // onChange={formChange}
        ref={formRef => (form = formRef)}
      >
        <IceContainer className={styles.iceContainer}>
          当前类目：
          {data.selectCategoryDesc}
          {!itemId ? (
            <Button onClick={showCategoryDialog} style={{ marginLeft: 25 }}>
              {categoryId ? '修改类目' : '选择类目'}
            </Button>
          ) : null}
        </IceContainer>
        {categoryId ? (
          <IceContainer className={styles.iceContainer}>
            <h3 className={styles.tabName}>基础信息</h3>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>宝贝标题：</div>
              <IceFormBinder name="title">
                <Input className={styles.goodsName} />
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="title" />
              </div>
            </div>

            <div className={styles.formItem}>
              <div className={styles.formLabel}>宝贝类型：</div>
              <IceFormBinder name="itemDim">
                {/* <Select
                className={styles.goodsName}
                dataSource={data.itemDimList}
              /> */}
                <Radio.Group
                  itemDirection="hoz"
                  dataSource={data.itemDimList}
                ></Radio.Group>
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="itemDim" />
              </div>
            </div>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>宝贝副标题：</div>
              <IceFormBinder name="subTitle">
                <Input className={styles.goodsName} />
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="subTitle" />
              </div>
            </div>
            <div className={classNames(styles.formItem, styles.alignTop)}>
              <div className={styles.formLabel}>类目属性：</div>
              <div className={styles.commonPropertyForm}>
                {data && data.categoryVO
                  ? data.categoryVO.commonPropertyVOList.map(item => {
                      return renderCommonProperty(item);
                    })
                  : null}
              </div>
            </div>
          </IceContainer>
        ) : null}

        {categoryId ? (
          <IceContainer className={styles.iceContainer}>
            <h3 className={styles.tabName}>销售信息</h3>
            <div className={styles.saleProperty}>
              {data && data.categoryVO
                ? data.categoryVO.salePropertyVOList.map(item => {
                    return renderSaleProperty(item);
                  })
                : null}
            </div>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>销售属性表格：</div>
              <Table dataSource={descartesTableData}>
                {descartesTableData && descartesTableData[0]
                  ? getColumns(descartesTableData[0])
                  : null}
              </Table>
            </div>
            {/* <div className={styles.formItem}>
            <div className={styles.formLabel}>总数量：</div>
            <IceFormBinder name="stock">
              <Input value={stockTotal} />
            </IceFormBinder>
          </div> */}
          </IceContainer>
        ) : null}

        {categoryId ? (
          <IceContainer className={styles.iceContainer}>
            <h3 className={styles.tabName}>图文描述</h3>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>文本描述：</div>
              <IceFormBinder name="description">
                <Input.TextArea />
              </IceFormBinder>
            </div>
          </IceContainer>
        ) : null}

        {categoryId ? (
          <IceContainer className={styles.iceContainer}>
            <h3 className={styles.tabName}>物流信息</h3>

            <div className={styles.formItem}>
              <div className={styles.formLabel}>运费模板：</div>
              <IceFormBinder name="postageId">
                <Select
                  className={styles.goodsName}
                  dataSource={data.postageVOList}
                  itemRender={item => {
                    return item.postageName;
                  }}
                  valueRender={item => {
                    return item.postageName;
                  }}
                />
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="postageId" />
              </div>
            </div>
          </IceContainer>
        ) : null}

        {categoryId ? (
          <IceContainer className={styles.iceContainer}>
            <h3 className={styles.tabName}>门店信息</h3>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>选择门店：</div>
              <IceFormBinder name="storeId">
                <Select
                  mode="multiple"
                  className={styles.goodsName}
                  dataSource={data.storeVOList}
                  disabled={itemId ? true : false}
                  itemRender={item => {
                    return item.storeName;
                  }}
                  valueRender={item => {
                    return item.storeName;
                  }}
                />
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="storeId" />
              </div>
            </div>
          </IceContainer>
        ) : null}

        {categoryId ? (
          <IceContainer className={styles.iceContainer}>
            <h3 className={styles.tabName}>其他信息</h3>
            <div className={styles.formItem}>
              <div className={styles.formLabel}>退换货策略：</div>
              <IceFormBinder name="returnPolicy">
                <Radio.Group
                  itemDirection="hoz"
                  dataSource={data.returnPolicyList}
                ></Radio.Group>
              </IceFormBinder>
              <div className={styles.formError}>
                <IceFormError name="returnPolicy" />
              </div>
            </div>
            <Button type="primary" onClick={validateAllFormField}>
              提 交
            </Button>
          </IceContainer>
        ) : null}
      </IceFormBinderWrapper>
    </div>
  );
}