Dingdong_app/screens/Goods/GoodsSpecificationScreenNew.js

/* eslint-disable no-else-return */
/* eslint-disable prefer-const */
/* eslint-disable react/jsx-one-expression-per-line */
/* eslint-disable no-underscore-dangle */
/* eslint-disable no-shadow */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet, View } from "react-native";
import { useModel } from "flooks";
import {
  Layout,
  Text,
  useTheme,
  Button,
  Input,
  Toggle,
} from "@ui-kitten/components";
import { useFocusEffect, useRoute } from "@react-navigation/native";
import { useEventEmitter, useCreation, useMap, useUnmount } from "@umijs/hooks";
import ActionButton from "react-native-action-button";
import ListComponent from "../../components/ListComponentParent";
import NavHeaderBar from "../../components/NavHeaderBar";

const styles = StyleSheet.create({
  lay: {
    backgroundColor: "#fff",
    flex: 1,
  },
  padBot: {
    paddingBottom: 100,
  },
  list: {
    paddingVertical: 10,
    paddingHorizontal: 15,
    backgroundColor: "transparent",
    flex: 0,
  },
  item: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 10,
  },
  input: {
    marginHorizontal: 5,
    minWidth: 49,
    // width: 49,
  },
  text: {
    flex: 1,
  },
  flexRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  buttonlast: {
    marginLeft: 10,
  },
  button: {
    alignSelf: "flex-start",
  },
  money: {
    marginLeft: 10,
  },
  addNew2: {
    width: 80,
    alignSelf: "center",
  },
  separatorStyle: {
    height: 0,
  },
});

export default function GoodsSpecificationScreen() {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel", true);
  // const { mid } = useModel("userModel");
  const {  httpPost } = useModel("httpModel", true);
  const { showDialog } = useModel("dialogModel");
  const [goodsId, setGoodsId] = React.useState(0);
  const list$ = useEventEmitter();
  const [dataMap, dataMapAction] = useMap();
  const [editMap, editMapAction] = useMap();

  const parentIds = useCreation(() => {
    return Array.from(dataMap.keys());
  }, [dataMap]);

  const { delText, editText, YMZEFF, confirm, cancel, removeTips } = useModel(
    "wordsModel"
  );

  const {
    addClassGoods,
    getGoodsClassParent,
    setGoodsClassMap,
    editGoodsMap,
  } = useModel("goodsModel");
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
    }, [])
  );

  useUnmount(() => {
    setGoodsClassMap(goodsId, dataMap);
    dataMapAction.reset();
    editMapAction.reset();
    console.log(editGoodsMap);
  });

  const route = useRoute();

  function getList() {
    const { params } = route;
    const { goodsId } = params || {};
    setGoodsId(goodsId || "NEW");
    return getGoodsClassParent(goodsId || "NEW").then(res => {
      dataMapAction.setAll(res);
      return Promise.resolve();
    });
  }

  const editInfo = info => {
    if (!info.parent) {
      dataMapAction.set(info.id, {
        ...info,
        edit: true,
      });
    } else {
      let parentinfo = dataMapAction.get(info.parent);
      parentinfo.children[info.childIndex].edit = true;
      dataMapAction.set(info.parent, parentinfo);
    }
    if (info.id) {
      editMapAction.set(info.id, info);
    } else {
      editMapAction.set(`${info.parent}_${info.childIndex}`, info);
    }
  };
  const delInfo = info => {
    showDialog({
      bodyText: removeTips,
      status: "danger",
      cancelable: true,
      confirmCallback: () => {
        if (!info.parent) {
          let parent = dataMapAction.get(info.id);
          if (parent.children.length > 0) {
            showDialog({
              bodyText: YMZEFF,
              status: "danger",
            });
            return;
          }
          dataMapAction.remove(info.id);
        } else {
          let parent = dataMapAction.get(info.parent);
          parent.children.splice(info.childIndex, 1);
          dataMapAction.set(info.parent, parent);
        }

        if (info.id && info.id > 0) {
          httpPost(`/goodsSpecification/del/${info.id}`, {}, {}, true);
        }
      },
    });
  };
  // 取消
  const cancelInfo = info => {
    // 处理dataMap
    if (info.parent) {
      let parent = dataMapAction.get(info.parent);
      if (info.isNew) {
        parent.children = parent.children.filter((item, index) => {
          return index !== info.childIndex;
        });
      } else {
        parent.children = parent.children.map((item, index) => {
          if (index === info.childIndex) {
            return {
              ...item,
              edit: false,
            };
          } else {
            return item;
          }
        });
      }
      dataMapAction.set(info.parent, parent);
    } else if (info.isNew) {
      dataMapAction.remove(info.id);
    } else {
      dataMapAction.set(info.id, {
        ...info,
        edit: true,
      });
    }

    // 处理editMap
    if (info.id) {
      editMapAction.remove(info.id);
    } else {
      editMapAction.remove(`${info.parent}_${info.childIndex}`);
    }
  };

  // 保存
  const saveInfo = info => {
    let saveData = {};
    if (info.id) {
      saveData = editMapAction.get(info.id);
    } else {
      saveData = editMapAction.get(`${info.parent}_${info.childIndex}`);
    }
    delete saveData.isNew;
    if (saveData.parent) {
      let parent = dataMapAction.get(saveData.parent);
      parent.children[saveData.childIndex] = {
        ...saveData,
        edit: false,
      };
      dataMapAction.set(saveData.parent, parent);
    } else {
      dataMapAction.set(info.id, {
        ...saveData,
        edit: false,
      });
    }

    // 处理editMap
    if (info.id) {
      editMapAction.remove(info.id);
    } else {
      editMapAction.remove(`${info.parent}_${info.childIndex}`);
    }

    if (saveData.id && saveData.id > 0) {
      const data = {
        ...saveData,
        goodsId,
      };
      delete data.addIndex;
      addClassGoods(data);
    }
  };

  function getRandomId() {
    const id = 0 - Math.floor(Math.random() * 100 + 1);
    if (parentIds.includes(id)) {
      return getRandomId();
    } else {
      return id;
    }
  }

  // 添加新类
  const addFullReduction = info => {
    if (info) {
      // 二级分类
      let parentInfo = dataMapAction.get(info.parent);
      let hasNew = parentInfo.children.some(item => {
        return item.isNew;
      });
      if (!hasNew) {
        info = {
          parent: info.parent,
          name: "",
          amount: "",
          edit: true,
          isNew: true,
          childIndex: parentInfo.children.length,
        };
        parentInfo.children.push(info);
        dataMapAction.set(info.parent, parentInfo);
        editMapAction.set(`${info.parent}_${info.childIndex}`, info);
      }
    } else {
      // 一级分类
      let hasNew = Array.from(dataMap.values()).some(item => {
        return item.isNew;
      });
      if (!hasNew) {
        let newKey = getRandomId();
        let newInfo = {
          name: "",
          multiple: false,
          edit: true,
          isNew: true,
          children: [],
          id: newKey,
        };
        dataMapAction.set(newKey, newInfo);
        editMapAction.set(newKey, newInfo);
      }
    }
  };

  const saveItem = (info, index) => {
    return (
      <View Key={index}>
        <Layout style={styles.item}>
          <Layout style={[styles.text, styles.flexRow]}>
            {info.parent ? (
              <Text category="c1">添加{info.name}</Text>
            ) : (
              <Text category="s1">分类名：{info.name}</Text>
            )}
            {!!info.parent && (
              <Layout style={styles.money}>
                <Text category="c1">¥{info.amount}</Text>
              </Layout>
            )}
            {!info.parent && (
              <Layout style={styles.money}>
                <Text category="s1">{info.multiple ? "多选" : "单选"}</Text>
              </Layout>
            )}
          </Layout>

          <Button
            size="small"
            appearance="outline"
            onPress={() => editInfo(info)}
          >
            {editText}
          </Button>
          <Button
            size="small"
            status="danger"
            style={styles.buttonlast}
            onPress={() => delInfo(info)}
          >
            {delText}
          </Button>
        </Layout>
        {!info.parent && (
          <Button
            style={styles.addNew2}
            onPress={() =>
              addFullReduction({ addType: "2", parent: info.id, index })
            }
          >
            添加规格
          </Button>
        )}
      </View>
    );
  };

  const editItem = info => {
    let editData = {};
    if (info.id) {
      editData = editMapAction.get(info.id);
    } else {
      editData = editMapAction.get(`${info.parent}_${info.childIndex}`);
    }
    return (
      <Layout style={styles.item}>
        <Layout style={[styles.text, styles.flexRow]}>
          <Text>{info.parent ? "规格" : "类名"}</Text>
          <Input
            size="small"
            defaultValue={editData.name}
            style={styles.input}
            key={`${info.id ? info.id : `${info.parent}_${info.childIndex}`}_0`}
            onChangeText={text => {
              if (info.id) {
                editMapAction.set(info.id, {
                  ...editData,
                  name: text,
                });
              } else {
                editMapAction.set(`${info.parent}_${info.childIndex}`, {
                  ...editData,
                  name: text,
                });
              }
            }}
          />
          {!!info.parent && (
            <>
              <Text>价钱</Text>
              <Input
                size="small"
                defaultValue={editData.amount}
                style={styles.input}
                key={`${
                  info.id ? info.id : `${info.parent}_${info.childIndex}`
                }_1`}
                keyboardType="numeric"
                onChangeText={text => {
                  if (info.id) {
                    editMapAction.set(info.id, {
                      ...editData,
                      amount: text.toString(),
                    });
                  } else {
                    editMapAction.set(`${info.parent}_${info.childIndex}`, {
                      ...editData,
                      amount: text.toString(),
                    });
                  }
                }}
              />
            </>
          )}
          {!info.parent && (
            <>
              <Text>是否多选</Text>
              <Toggle
                key="Toggle"
                checked={editData.multiple}
                onChange={checked => {
                  editMapAction.set(info.id, {
                    ...editData,
                    multiple: checked,
                  });
                }}
              />
            </>
          )}
        </Layout>

        <Button
          disabled={!editData.name || (!editData.amount && !!editData.parent)}
          size="small"
          onPress={() => saveInfo(info)}
        >
          {confirm}
        </Button>
        <Button
          size="small"
          appearance="outline"
          style={styles.buttonlast}
          onPress={() => cancelInfo(info)}
        >
          {cancel}
        </Button>
      </Layout>
    );
  };

  const renderItem = ({ item, index }) => {
    if (item.edit) {
      return editItem(item, index);
    }
    return saveItem(item, index);
  };

  return (
    <>
      <NavHeaderBar title="商品规格编辑" />

      <Layout style={[styles.lay]}>
        <ListComponent
          getInfo={getList}
          dataList={dataMap}
          renderItem={renderItem}
          style={styles.list}
          separatorStyle={styles.separatorStyle}
          showEmpty
          list$={list$}
          extraData={{ dataMap, editMap }}
        />
        <ActionButton
          buttonColor={theme["color-primary-500"]}
          onPress={addFullReduction}
          position="left"
        />
      </Layout>
    </>
  );
}