Dingdong_app/screens/Goods/GoodsSpecificationScreen.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 } from "@umijs/hooks";
import ActionButton from "react-native-action-button";
import ListComponent from "../../components/ListComponent";
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 { httpGet, httpPost } = useModel("httpModel", true);
  const { success, warnning } = useModel("loadingModel", true);
  const { showDialog } = useModel("dialogModel");
  const [allEditInfo, setEdit] = React.useState([]);
  const [goodsId, setGoodsId] = React.useState(0);
  const [startState, changeState] = React.useState(true);
  const [editList, setEditList] = React.useState([]);
  const [addNew, changeNew] = React.useState([]);
  const list$ = useEventEmitter();

  const {
    delText,
    editText,
    confirm,
    cancel,
    successText,
    removeTips,
    YMZEFF,
    MUKYDG,
    TMMNWL,
    IQYCDU,
    GVDYKL,
    BCXVJS,
    CUYTPO,
    MLPRPD,
  } = useModel("wordsModel");
  const { addClassGoods } = useModel("goodsModel");
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
    }, [])
  );

  const route = useRoute();

  function getList() {
    const { params } = route;
    const { goodsId } = params || {};
    setGoodsId(goodsId);
    return httpGet(
      "/goodsSpecification/byGoodsId",
      {
        goodsId: goodsId || 0,
      },
      true
    ).then(res => {
      changeState(false);
      let isNew = false;
      if (res.length === 0) {
        isNew = true;
        changeNew([]);
      } else {
        isNew = false;
      }
      let content = [];
      if (res.length > 0) {
        let parents = res.filter(item => {
          return !item.parent;
        });
        parents.forEach(item => {
          content.push(item);
          let _children = res.filter(_f => {
            return _f.parent === item.id;
          });
          content = content.concat(_children);
        });
      }

      if (isNew) {
        content.push({ name: "", multiple: false, addIndex: 0 });
        changeNew([{ name: "", multiple: false, addIndex: 0 }]);
      } else {
        addNew.forEach((item, index) => {
          if (item.addType === "1") {
            content.push({ name: "", multiple: false, addIndex: index });
          } else {
            let _index = content.findIndex(_i => {
              return _i.id === item.parent;
            });
            content.splice(_index + 1, 0, {
              name: "",
              amount: "",
              parent: item.parent,
              addIndex: index,
            });
          }
        });
      }
      content = content.map(item => {
        const _info = {
          ...item,
          amount: item.amount != null ? item.amount.toString() : "",
        };
        if (!_info.id || editList.indexOf(_info.id) !== -1) {
          _info.edit = true;
        } else {
          _info.edit = false;
        }
        return _info;
      });
      setEdit(content);

      return Promise.resolve({
        content,
        last: true,
      });
    });
  }

  const listByOrder = (list1, list2, type, extra) => {
    let list = [...list1];
    if (type === "add") {
      list2.forEach((item, index) => {
        if (item.addType === "1") {
          list.push({ name: "", multiple: false, addIndex: index });
        } else {
          let _index = list.findIndex(_i => {
            return _i.id === item.parent;
          });
          list.splice(_index + 1, 0, {
            name: "",
            amount: "",
            parent: item.parent,
            addIndex: index,
          });
        }
      });
    } else if (type === "save") {
      list = list.map(item => {
        if (
          (item.addIndex === extra && extra != null) ||
          item.id === list2[0].id
        ) {
          item = { ...list2[0] };
        }
        return item;
      });
    } else if (type === "edit") {
      list = list.map(item => {
        if (item.id === extra) {
          item = {
            ...item,
            edit: true,
          };
        }
        return item;
      });
    } else if (type === "cancel" && extra.id) {
      list = list.map(item => {
        if (item.id === extra.id) {
          item.edit = false;
        }
        return item;
      });
    } else if (type === "del" || (!extra.id && type === "cancel")) {
      list = list.filter(item => {
        return (
          (extra.id && item.id !== extra.id) ||
          (!extra.id && item.addIndex !== extra.addIndex)
        );
      });
    }
    setEdit(list);
    return list;
  };

  const editInfo = id => {
    const _editList = [...editList];
    _editList.push(id);
    setEditList(_editList);
    list$.emit({
      type: "edit",
      list: [],
      changeEvent: listByOrder,
      extra: id,
    });
  };
  const delInfo = info => {
    showDialog({
      bodyText: removeTips,
      status: "danger",
      cancelable: true,
      confirmCallback: () => {
        if (!info.parent) {
          let _allEditInfo = [...allEditInfo];
          let _children = _allEditInfo.filter(item => {
            return item.parent === info.id;
          });
          if (_children.length > 0) {
            showDialog({
              bodyText: YMZEFF,
              status: "danger",
            });
            return;
          }
        }
        httpPost(`/goodsSpecification/del/${info.id}`)
          .then(() => {
            success(successText);
            // changeState(true);
            list$.emit({
              type: "del",
              list: [],
              changeEvent: listByOrder,
              extra: info,
            });
          })
          .catch(e => {
            warnning(e.error);
          });
      },
    });
  };
  // 取消
  const cancelInfo = info => {
    if (info.id) {
      let _editList = [...editList];
      _editList = _editList.filter(item => {
        return item !== info.id;
      });
      setEditList(_editList);
      list$.emit({
        type: "cancel",
        list: [],
        changeEvent: listByOrder,
        extra: info,
      });
    } else {
      let _addNew = [...addNew];
      _addNew.splice(info.addIndex, 1);
      changeNew(_addNew);

      list$.emit({
        type: "cancel",
        list: [],
        changeEvent: listByOrder,
        extra: info,
      });
    }
    // changeState(true);
  };

  // 保存
  const saveInfo = info => {
    // const _editInfo = { ...allEditInfo };
    // let name = "";
    // let amount = "";
    // if (_editInfo[info.id || "new"]) {
    //   name = _editInfo[info.id || "new"].name;
    //   amount = _editInfo[info.id || "new"].amount;
    // }
    const data = {
      ...info,
      goodsId,
    };
    delete data.addIndex;
    addClassGoods(data).then(res => {
      if (info.id) {
        let _editList = [...editList];
        _editList = _editList.filter(item => {
          return item !== info.id;
        });
        setEditList(_editList);
        list$.emit({
          type: "save",
          list: [res],
          changeEvent: listByOrder,
        });
      } else {
        let _addNew = [...addNew];
        _addNew.splice(info.addIndex, 1);
        changeNew(_addNew);
        list$.emit({
          type: "save",
          list: [res],
          extra: info.addIndex,
          changeEvent: listByOrder,
        });
      }
    });
  };

  //
  const addFullReduction = info => {
    let list = [...addNew];
    let hasType1 = list.find(item => {
      return item.addType === "1";
    });

    if (info && info.parent) {
      let hasParent = list.find(item => {
        return item.parent === info.parent;
      });
      if (!hasParent) {
        list.push(info);
        changeNew(list);
        list$.emit({
          type: "add",
          list: [
            {
              ...info,
            },
          ],
          changeEvent: listByOrder,
        });
      }
    } else if (!info && !hasType1) {
      list.push({
        addType: "1",
      });
      changeNew(list);
      list$.emit({
        type: "add",
        list: [
          {
            addType: "1",
          },
        ],
        changeEvent: listByOrder,
      });
    }
  };

  const saveItem = (info, index) => {
    let editNowInfo = { ...info };
    return (
      <View Key={index}>
        <Layout style={styles.item}>
          <Layout style={[styles.text, styles.flexRow]}>
            {editNowInfo.parent ? (
              <Text category="c1">
                {MUKYDG}
                {editNowInfo.name}
              </Text>
            ) : (
              <Text category="s1">
                {TMMNWL}
                {editNowInfo.name}
              </Text>
            )}
            {!!editNowInfo.parent && (
              <Layout style={styles.money}>
                <Text category="c1">¥{editNowInfo.amount}</Text>
              </Layout>
            )}
            {!editNowInfo.parent && (
              <Layout style={styles.money}>
                <Text category="s1">
                  {editNowInfo.multiple ? { IQYCDU } : { GVDYKL }}
                </Text>
              </Layout>
            )}
          </Layout>

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

  const editItem = (info, index) => {
    let _allEditInfo = [...allEditInfo];
    let editNowInfo = { ..._allEditInfo[index] };
    return (
      <Layout style={styles.item}>
        <Layout style={[styles.text, styles.flexRow]}>
          <Text>{editNowInfo.parent ? { BCXVJS } : { TMMNWL }}</Text>
          <Input
            size="small"
            defaultValue={editNowInfo.name}
            style={styles.input}
            key={`${index}_0`}
            onChangeText={text => {
              editNowInfo.name = text;
              _allEditInfo.splice(index, 1, editNowInfo);
              setEdit(_allEditInfo);
            }}
          />
          {!!editNowInfo.parent && (
            <>
              <Text>价钱</Text>
              <Input
                size="small"
                defaultValue={info.amount}
                style={styles.input}
                key={`${index}_2`}
                keyboardType="numeric"
                onChangeText={text => {
                  editNowInfo.amount = text;
                  _allEditInfo.splice(index, 1, editNowInfo);
                  setEdit(_allEditInfo);
                }}
              />
            </>
          )}
          {!editNowInfo.parent && (
            <>
              <Text>{MLPRPD}</Text>
              <Toggle
                key="Toggle"
                checked={editNowInfo.multiple}
                onChange={checked => {
                  editNowInfo.multiple = checked;
                  _allEditInfo.splice(index, 1, editNowInfo);
                  setEdit(_allEditInfo);
                }}
              />
            </>
          )}
        </Layout>

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

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

  return (
    <>
      <NavHeaderBar title={CUYTPO} />

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