Dingdong_app/screens/Guide1Screen.js

/* eslint-disable react/jsx-one-expression-per-line */
/* eslint-disable no-shadow */
/* eslint-disable camelcase */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { Layout, Text, useTheme, Button, Card } from "@ui-kitten/components";
import { useModel } from "flooks";
import { useFocusEffect, useRoute } from "@react-navigation/native";
import { useCreation, useUnmount, useMount } from "@umijs/hooks";
import moment from "moment";
import Textarea from "react-native-textarea";
import ScrollPage from "../components/ScrollPage";
import FormInput from "../components/FormInput";
import ConnectButton from "../components/ConnectButton";
import GuideHeaderBar from "../components/GuideHeaderBar";
import NavHeaderBar from "../components/NavHeaderBar";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 33,
  },
  tabContent: {
    backgroundColor: "#fff",
    marginTop: 20,
  },
  img: {
    width: 100,
    height: 100,
    alignSelf: "center",
  },
  img2: {
    width: 97,
    height: 21,
    alignSelf: "center",
    marginTop: 2,
  },
  text: {
    marginTop: 16,
  },
  layoutLeft: {
    // flexDirection: "row",
    paddingVertical: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  form: {
    paddingHorizontal: 26,
    paddingVertical: 20,
  },
  textareaContainer: {
    backgroundColor: "#F0F0F0",
    height: 100,
    borderRadius: 4,
  },
  textarea: {
    textAlignVertical: "top", // hack android
    fontSize: 13,
    color: "#333",
    paddingHorizontal: 14,
    paddingVertical: 10,
    height: 100,
  },
  lay: {
    flexDirection: "row",
    marginLeft: 120,
    marginBottom: 10,
  },
  money: {
    marginLeft: 10,
  },
});

export default function Guide1Screen({ navigation }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { httpGet, httpPost } = useModel("httpModel", true);
  const { success, loading, clearLoading } = useModel("loadingModel", true);
  const { mid, changeGuideStep } = useModel("userModel", true);
  const {
    addClassification,
    editGoodsMap,
    saveClassByList,
    removeGoodsClassMap,
    sortClassification,
  } = useModel("goodsModel");

  const {
    guide1_title1,
    guideHome_title2,
    guide1_form_1,
    guide1_pla_1,
    guide1_form_2,
    guide1_pla_2,
    guide1_form_3,
    guide1_pla_3,
    guide1_form_4,
    guide1_pla_4,
    guide1_form_5,
    guide1_pla_5,
    next,
    pass,
    passTips,
    confirm,
    addGoods,
    delText,
    removeTips,
  } = useModel("wordsModel");
  const { showDialog } = useModel("dialogModel");
  const route = useRoute();
  const [routeName, setRouteName] = React.useState("");

  const [id, changeId] = React.useState("NEW");

  const [name, changeName] = React.useState("");
  const [amount, changeAmount] = React.useState("");
  const [discountAmount, changeDiscountAmount] = React.useState("");
  const [inventory, changeInventory] = React.useState(0);
  const [week, changeWeek] = React.useState("");
  const [startTime, changeStartTime] = React.useState("08:00");
  const [endTime, changeEndTime] = React.useState("22:00");
  const [introduction, changeIntroduction] = React.useState();
  const [defaultValue, ChangeDefaultValue] = React.useState("");
  const [goodsSpecification, changeGoodsSpecification] = React.useState([]);

  const [img, changeImg] = React.useState();

  // 需要批量提交的规格
  const postByList = useCreation(() => {
    return goodsSpecification.filter(item => {
      return !item.id || item.id < 0;
    });
  }, [goodsSpecification]);

  function getInfo(res) {
    changeName(res.name || "");
    if (res.discountAmount) {
      changeDiscountAmount(res.discountAmount.toString());
    }
    if (res.amount) {
      changeAmount(res.amount.toString());
    }
    if (res.inventory) {
      changeInventory(res.inventory.toString());
    }
    changeWeek(res.week || "");
    changeStartTime(res.startTime || "");
    changeEndTime(res.endTime || "");
    changeIntroduction(res.introduction || "");
    // if (res.img && res.img.length) {
    changeImg(res.img);
    // }

    if (res.week) {
      ChangeDefaultValue([
        `${moment(res.startTime, "HH:mm:ss").format("HH:mm")}~${moment(
          res.endTime,
          "HH:mm:ss"
        ).format("HH:mm")}`,
        res.week,
      ]);
    }
  }

  useMount(() => {
    const { params, name } = route;
    setRouteName(name);
    if (params) {
      if (params.id) {
        changeId(params.id);
        loading();
        httpGet(`/goods/get/${params.id}`, {}, true)
          .then(res => {
            getInfo(res);
            changeGoodsSpecification(sortClassification(res.specifications));
          })
          .finally(() => {
            clearLoading();
          });
      }
    }
  });
  useUnmount(() => {
    removeGoodsClassMap();
  });

  React.useEffect(() => {
    if (editGoodsMap.has(id)) {
      changeGoodsSpecification(editGoodsMap.get(id));
    }
  }, [editGoodsMap.get(id)]);
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
    }, [])
  );

  const specify = () => {
    return goodsSpecification.map((item, index) => {
      return (
        <Layout key={index} style={styles.lay}>
          {item.parent ? (
            <Text category="h1">
              添加
              {item.name}
            </Text>
          ) : (
            <Text category="c1">
              分类名：
              {item.name}
            </Text>
          )}
          <Layout style={styles.money}>
            {item.parent ? (
              <Text category="h1">¥{item.amount}</Text>
            ) : (
              <Text category="c1">{item.multiple ? "多选" : "单选"}</Text>
            )}
          </Layout>
        </Layout>
      );
    });
  };

  const canNext = React.useMemo(() => {
    if (name && amount && inventory && week && startTime && endTime && img) {
      return true;
    }
    return false;
  }, [
    name,
    amount,
    discountAmount,
    inventory,
    week,
    startTime,
    endTime,
    introduction,
    img,
  ]);

  return (
    <>
      {routeName !== "AddGoods" ? (
        <GuideHeaderBar />
      ) : (
        <NavHeaderBar title={addGoods} />
      )}

      <ScrollPage>
        <Layout style={styles.container}>
          {routeName !== "AddGoods" && (
            <Card appearance="headFilled">
              <Text category="s1">{guide1_title1}</Text>
              <Text category="s1">{guideHome_title2}</Text>
            </Card>
          )}
          <Card appearance="formFilled">
            {/* 商品名称 */}
            <FormInput
              label={guide1_form_1}
              placeholder={guide1_pla_1}
              value={name}
              onChange={changeName}
              style={{ paddingVertical: 3 }}
            />
            {/* 商品价格 */}
            <FormInput
              label={guide1_form_2}
              placeholder={guide1_pla_2}
              value={amount}
              type="money"
              onChange={changeAmount}
              textAlign="right"
            />

            {/* 优惠价格 */}
            <FormInput
              label={guide1_form_3}
              placeholder={guide1_pla_3}
              value={discountAmount}
              type="money"
              onChange={changeDiscountAmount}
              textAlign="right"
            />

            {/* 商品规格 */}
            <FormInput
              label="商品规格"
              type="url"
              changePath={() => {
                navigation.navigate("GoodsSpecification", {
                  goodsId: id,
                });
              }}
              textAlign="right"
            />
            {specify()}

            {/* 每日供应数量 */}
            <FormInput
              label={guide1_form_4}
              placeholder={guide1_pla_4}
              value={inventory}
              type="amount"
              onChange={changeInventory}
            />

            {/* 供应时间 */}
            <FormInput
              label={guide1_form_5}
              type="openTime"
              week={week}
              startTime={startTime}
              endTime={endTime}
              onChange={(week, startTime, endTime) => {
                changeWeek(week);
                changeStartTime(startTime);
                changeEndTime(endTime);
              }}
            />

            <Layout>
              <Textarea
                containerStyle={styles.textareaContainer}
                style={styles.textarea}
                onChangeText={changeIntroduction}
                defaultValue={introduction}
                maxLength={50}
                placeholder={guide1_pla_5}
                placeholderTextColor="#B4B4B4"
                underlineColorAndroid="transparent"
              />
            </Layout>

            <FormInput
              type="img"
              value={img}
              textAlign="right"
              onChange={changeImg}
            />

            <Layout style={styles.layoutLeft} level="1">
              <Button
                status="primary"
                disabled={!canNext}
                onPress={() => {
                  loading();
                  httpPost(
                    "/goods/save",
                    {
                      id: id === "NEW" ? "" : id,
                      name,
                      amount,
                      discountAmount,
                      inventory,
                      week,
                      startTime,
                      endTime,
                      introduction,
                      img,
                      merchantId: mid,
                    },
                    { body: "json" },
                    true
                  )
                    .then(res => {
                      if (id === "NEW") {
                        const { params } = route;
                        const { classifyId } = params || {};
                        if (classifyId) {
                          addClassification(classifyId, res.id);
                        }
                      }

                      return saveClassByList(postByList, res.id);
                    })
                    .then(() => {
                      success(`${id !== "NEW" ? "修改" : "添加"}成功`);
                      if (routeName !== "AddGoods") {
                        changeGuideStep("2");
                      } else {
                        navigation.goBack();
                      }
                    });
                }}
              >
                {routeName !== "AddGoods" ? next : confirm}
              </Button>
              {routeName === "AddGoods" && id !== "NEW" && (
                <Button
                  appearance="ghost"
                  status="info"
                  style={{ marginTop: 10 }}
                  onPress={() => {
                    showDialog({
                      bodyText: removeTips,
                      cancelable: true,
                      confirmCallback: () => {
                        httpPost(`/goods/del/${id}`, {}, {}, true).then(() => {
                          success("删除成功");
                          navigation.goBack();
                        });
                      },
                    });
                  }}
                >
                  {delText}
                </Button>
              )}
              {routeName !== "AddGoods" && (
                <Button
                  style={{ marginTop: 10 }}
                  appearance="ghost"
                  status="primary"
                  onPress={() => {
                    showDialog({
                      bodyText: passTips,
                      cancelable: true,
                      confirmCallback: () => {
                        changeGuideStep(2);
                      },
                    });
                  }}
                >
                  {pass}
                </Button>
              )}
            </Layout>
          </Card>
          {routeName !== "AddGoods" && <ConnectButton />}
        </Layout>
      </ScrollPage>
    </>
  );
}