Dingdong_app/screens/Goods/GoodsSpecificationScreen.js

import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import {
    Image,
    Platform,
    StyleSheet,
    TouchableOpacity,
    View,
    ImageBackground,
} from "react-native";
import { useModel } from "flooks";
import {
    Layout,
    Tab,
    TabView,
    Text,
    useTheme,
    Button,
    Card,
    Input,
    Icon,
} from "@ui-kitten/components";
import EmptyComponent from "../../components/EmptyComponent";
import FormInput from "../../components/FormInput";
import { useFocusEffect, useRoute } from "@react-navigation/native";
import ListComponent from "../../components/ListComponent";
import NavHeaderBar from "../../components/NavHeaderBar";
import GoodsCard from "../../components/GoodsCard";
import ActionButton from "react-native-action-button";

export default function GoodsSpecificationScreen({ navigation }) {
    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(false);
    const [isNew, changeIsNew] = React.useState(false);

    const {
        userTitle21,
        fullReduction2,
        fullReduction1,
        delText,
        editText,
        confirm,
        cancel,
        complete,
        successText,
        removeTips,
    } = useModel("wordsModel");
    const { addClassGoods } = useModel("goodsModel");
    useFocusEffect(
        React.useCallback(() => {
            changeBackground(theme["color-primary-500"]);
        }, [])
    );

    const route = useRoute();

    function getList() {
        let { params } = route;
        let { goodsId } = params || {};
        setGoodsId(goodsId);
        return httpGet(
            "/goodsSpecification/byGoodsId",
            {
                goodsId: goodsId || 0,
            },
            true
        ).then(res => {
            changeState(false);
            if (res.length === 0) {
                changeIsNew(true);
            } else {
                changeIsNew(false);
            }
            let content = res || [];
            if (isNew || addNew) {
                content.push({ name: "", amount: "" });
            }

            return Promise.resolve({
                content: content.map(item => {
                    let _info = { ...item, amount: item.amount.toString() };

                    if (!_info.id || editList.indexOf(_info.id) != -1) {
                        _info.edit = true;
                    } else {
                        _info.edit = false;
                    }
                    return _info;
                }),
                last: true,
            });
        });
    }

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

    const saveItem = (info, index) => (
        <Layout style={styles.item}>
            <Layout style={[styles.text, styles.flexRow]}>
                <Text category='c1'>添加{info.name}</Text>
                <Layout style={styles.money}>
                    <Text category='c1'>¥{info.amount}</Text>
                </Layout>
            </Layout>

            <Button
                size='small'
                appearance='outline'
                onPress={() => editInfo(info.id)}
            >
                {editText}
            </Button>
            <Button
                size='small'
                status='danger'
                style={styles.buttonlast}
                onPress={() => delInfo(info, index)}
            >
                {delText}
            </Button>
        </Layout>
    );

    const editItem = (info, index) => (
        <Layout style={styles.item}>
            <Layout style={[styles.text, styles.flexRow]}>
                <Text>规格</Text>
                <Input
                    size='small'
                    defaultValue={info.name}
                    style={styles.input}
                    key={index + "_0"}
                    keyboardType='numeric'
                    onChangeText={text => {
                        let _editInfo = { ...allEditInfo } || {};
                        if (!_editInfo[info.id || "new"]) {
                            _editInfo[info.id || "new"] = {};
                        }
                        _editInfo[info.id || "new"]["name"] = text;
                        setEdit(_editInfo);
                    }}
                />
                <Text>价钱</Text>
                <Input
                    size='small'
                    defaultValue={info.amount}
                    style={styles.input}
                    key={index + "_1"}
                    keyboardType='numeric'
                    onChangeText={text => {
                        let _editInfo = { ...allEditInfo } || {};
                        if (!_editInfo[info.id || "new"]) {
                            _editInfo[info.id || "new"] = {};
                        }
                        _editInfo[info.id || "new"]["amount"] = text;
                        setEdit(_editInfo);
                    }}
                />
            </Layout>

            <Button size='small' onPress={() => saveInfo(info)}>
                {confirm}
            </Button>
            <Button
                size='small'
                appearance='outline'
                style={styles.buttonlast}
                onPress={() => cancelInfo(info)}
            >
                {cancel}
            </Button>
        </Layout>
    );

    function setName(index, text) {}

    function setAmount(index, text) {}

    const editInfo = id => {
        let _editList = [...editList];
        _editList.push(id);
        setEditList(_editList);
        changeState(true);
    };
    const delInfo = (info, index) => {
        showDialog({
            bodyText: removeTips,
            status: "danger",
            cancelable: true,
            confirmCallback: () => {
                httpPost("/goodsSpecification/del/" + info.id)
                    .then(res => {
                        success(successText);
                        changeState(true);
                    })
                    .catch(e => {
                        warnning(e.error);
                    });
            },
        });
    };
    //取消
    const cancelInfo = info => {
        let _editInfo = { ...allEditInfo };
        _editInfo[info.id || "new"] = {};
        setEdit(_editInfo);

        if (info.id) {
            let _editList = [...editList];
            _editList = _editList.filter(item => {
                return item != res.id;
            });
            setEditList(_editList);
        } else if (!isNew) {
            changeNew(false);
        }
        changeState(true);
    };
    //保存
    const saveInfo = info => {
        let _editInfo = { ...allEditInfo };
        let name = "";
        let amount = "";
        if (_editInfo[info.id || "new"]) {
            name = _editInfo[info.id || "new"]["name"];
            amount = _editInfo[info.id || "new"]["amount"];
        }
        let data = {
            ...info,
            name: name,
            amount: amount,
            goodsId: goodsId,
        };
        if (!info.id && !isNew) {
            changeNew(false);
        }

        addClassGoods(data).then(res => {
            _editInfo["new"] = {};
            _editInfo[res.id] = {};
            setEdit(_editInfo);
            let _editList = [...editList];
            _editList = _editList.filter(item => {
                return item != res.id;
            });
            setEditList(_editList);
            changeState(true);
        });
    };

    //
    const addFullReduction = () => {
        changeNew(true);
        changeState(true);
    };

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

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

const PulsIcon = props => (
    <Icon
        {...props}
        style={[props.style, { width: 33, height: 33 }]}
        name='plus-circle'
    />
);
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,
    },
    text: {
        flex: 1,
    },
    flexRow: {
        flexDirection: "row",
        alignItems: "center",
    },
    buttonlast: {
        marginLeft: 10,
    },
    button: {
        alignSelf: "flex-start",
    },
    money: {
        marginLeft: 10,
    },
});