<template>
    <view
        class="modal"
        :animation="animationData1"
        @touchmove.stop.prevent
    >

        <u-popup
            :show="addShow"
            :round="10"
            mode="bottom"
        >
            <view class="addGoods">
                <view class="add-btn">
                    <span @click="close">取消</span>
                    <view>{{title}}</view>
                    <span @click="confirm">确认</span>
                </view>
                <!-- 商品详情 -->
                <goodsList
                    :lists="selectGoods"
                    type="dian-right"
                    @tabGoodsInfo="tabGoodsInfo(selectGoods)"
                    class="goodsList"
                />
                <view
                    class="delThis"
                    @click="delThis"
                    v-if="deleteThis!==''"
                >
                    <u-icon
                        name="trash"
                        color="#999"
                        size="20"
                        :label="deleteThis"
                        labelPos="right"
                        labelSize="13"
                        labelColor="#999"
                    />
                </view>
                <!-- 输入 -->
                <view class="add-input">
                    <view class="left"><span>{{total}}千卡</span>{{Number(inputValue.join("")) || '0.0'}}克</view>
                    <view class="total">{{inputValue.join("") || '0.0'}}<span>克</span></view>
                    <u-icon
                        name="hourglass-half-fill"
                        color="#999"
                        size="28"
                        label="估值"
                        labelPos="bottom"
                        labelSize="13"
                        labelColor="#999"
                    />
                </view>
                <!-- 键盘 -->
                <view
                    class=" content-wrap"
                    :animation="animationData2"
                >
                    <view class="key-box">
                        <view
                            :class="{
            'handel-btn': ['.', '删除', ''].includes(item),
            'active-btn': activeKey === item,
            'active-handel-btn':
              activeKey === item && ['.', '删除'].includes(item),
          }"
                            v-for="(item, index) in keyboardList"
                            :key="index"
                            @click="setValue(item)"
                        >{{ item }}</view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
import goodsList from "@/components/foods";
export default {
    components: {
        goodsList,
    },
    data() {
        return {
            animationData1: {},
            animationData2: {},
            activeKey: "",
            inputValue: ["1", "0", "0", ".", "0"],
            result: "100.0",
            calory: 1, // 千卡值
            title: "", // 弹窗 title
            deleteThis: "", // 删除这条数据，为空不有删除功能
        };
    },
    props: {
        addShow: {
            type: Boolean,
            default: false,
        },
        selectGoods: {
            type: Array,
            default: [],
        },
        visible: {
            type: Boolean,
            default: false,
        },
        //是否为带小数的数字键盘
        decimals: {
            type: Boolean,
            default: true,
        },
        //小数点前整数的位数
        maxLength: {
            type: [Number, String],
            default: 9,
        },
        //小数点后的位数
        pointLength: {
            type: [Number, String],
            default: 1,
        },
        //最大的值
        max: {
            type: [Number, String],
            default: 999999999,
        },
        //最小的值
        min: {
            type: [Number, String],
            default: 0,
        },
    },
    created() {
        // 获取每一百克的看千卡值
        this.calory = this.selectGoods[0].calory;
        if (this.selectGoods[0].weight) {
            let weight = this.selectGoods[0].weight + "";
            this.inputValue = weight.split("");
            this.title = "修改食物信息";
            this.deleteThis = "删除这条数据";
            return;
        }
        this.title = "新增食物信息";
        this.inputValue = ["1", "0", "0", ".", "0"];
    },
    computed: {
        keyboardList() {
            return this.decimals
                ? [
                      "1",
                      "2",
                      "3",
                      "4",
                      "5",
                      "6",
                      "7",
                      "8",
                      "9",
                      ".",
                      "0",
                      "删除",
                  ]
                : [
                      "1",
                      "2",
                      "3",
                      "4",
                      "5",
                      "6",
                      "7",
                      "8",
                      "9",
                      "",
                      "0",
                      "删除",
                  ];
        },
        // 根据输入的值计算 总能量
        total() {
            return (
                (Number(this.inputValue.join("")) * Number(this.calory)) /
                100
            ).toFixed(0);
        },
    },
    watch: {
        visible(val) {
            this.inputValue = [];
            if (val) this.enterAnimate();
            else this.leaveAnimate();
        },
        inputValue(value) {
            let result = Number(this.inputValue.join(""));
            if (result < this.min) {
                uni.showToast({
                    title: `最小值为${this.min}`,
                    duration: 1500,
                    icon: "none",
                });
                return;
            } else if (result > this.max) {
                uni.showToast({
                    title: `最大值为${this.max}`,
                    duration: 1500,
                    icon: "none",
                });
                this.inputValue = [9, 9, 9];
                return;
            }
        },
    },
    methods: {
        setValue(data) {
            this.activeKey = data;
            // let timer = setTimeout(() => {

            //     clearTimeout(timer);
            // }, 100);
            this.activeKey = "-";

            if (
                !data ||
                (data !== "删除" &&
                    this.inputValue.includes(".") &&
                    this.inputValue.join("").split(".")[1].length ===
                        this.pointLength)
            )
                return false;

            if (
                this.inputValue.length === 1 &&
                this.inputValue[0] === "0" &&
                !["删除", "."].includes(data)
            ) {
                return (this.inputValue = [data]);
            }

            if (data !== "删除") {
                if (this.inputValue.includes(".")) {
                    if (
                        this.inputValue.join("").split(".")[0].length ===
                        this.maxLength
                    ) {
                        return false;
                    }
                } else if (this.inputValue.length === this.maxLength) {
                    return false;
                }
            }

            if (data === "删除") {
                return this.inputValue.length && this.inputValue.pop();
            }
            if (data === ".") {
                if (!this.inputValue.length || this.inputValue.includes("."))
                    return false;
            }
            this.inputValue.push(data);
        },
        close() {
            this.$emit("update:visible", false);
            this.$emit("close");
        },
        confirm() {
            let result = Number(this.inputValue.join(""));
            this.$emit("confirm", result);
            this.close();
        },
        enterAnimate() {
            this.animation1 = uni.createAnimation();
            this.animation2 = uni.createAnimation();
            this.animation1.backgroundColor("rgba(0,0,0,0.5)").step({
                duration: 500,
                timingFunction: "ease",
            });
            this.animation2.translateY(0).step({
                timingFunction: "ease-out",
                duration: 500,
            });
            this.animationData1 = this.animation1.export();
            this.animationData2 = this.animation2.export();
        },
        leaveAnimate() {
            this.animation1 = uni.createAnimation();
            this.animation2 = uni.createAnimation();
            this.animation1.backgroundColor("rgba(0,0,0,0)").step({
                duration: 500,
                timingFunction: "ease",
            });
            this.animation2.translateY(500).step({
                timingFunction: "ease-out",
                duration: 500,
            });
            this.animationData1 = this.animation1.export();
            this.animationData2 = this.animation2.export();
        },
        // 删除这条数据
        delThis(item) {
            this.$emit("delThis");
        },
        // 跳转到食品详情
        tabGoodsInfo(e) {
            this.$emit("tabGoodsInfo", { title: e[0].name, id: e[0].food_id });
        },
    },
};
</script>

<style lang="scss" scoped>
.modal {
    // position: fixed;
    // bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;

    .content-wrap {
        // position: fixed;
        // bottom: 0;
        // left: 0;
        width: 100%;
        background: #fff;
        box-sizing: border-box;
        // transform: translateY(100%);

        .content-header {
            width: 100%;
            height: 80upx;
            background: rgba(255, 255, 255, 1);
            float: right;

            .input-contant {
                text-align: center;
                line-height: 80upx;
                font-size: 40upx;
            }

            .cancel-btn {
                padding-left: 30upx;
                color: #147ff2;
                line-height: 80upx;
                position: absolute;
                top: 0;
                left: 0;
            }

            .confirm-btn {
                padding-right: 30upx;
                color: #147ff2;
                line-height: 80upx;
                position: absolute;
                top: 0;
                right: 0;
            }
        }

        .key-box {
            margin-top: 60upx;
            display: flex;
            flex-flow: wrap;
            width: 100%;

            view {
                width: 251upx;
                height: 100upx;
                border: 1upx solid rgb(235, 237, 240);
                box-sizing: border-box;
                text-align: center;
                line-height: 100upx;
                font-size: 40upx;
                font-weight: bold;
                margin: 0 -1upx -1upx 0;

                &:hover {
                    z-index: 1;
                    border: 1upx solid rgb(235, 237, 240);
                }
            }

            .handel-btn {
                background: rgb(235, 237, 240);
                font-size: 30upx;
            }
            .active-btn {
                background: rgb(235, 237, 240);
            }
            .active-handel-btn {
                background: rgb(252, 252, 252);
            }
        }
    }
}
.addGoods {
    // min-height: 40vh;
    position: relative;
    .goodsList {
        padding: $padding;
    }
    .delThis {
        padding: $padding;
    }
    .add-btn {
        padding: $padding;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        color: $main-color;
        font-size: $title-size;
        span {
            padding: 10rpx 0;
        }
        view {
            font-weight: bold;
            color: $text-color;
        }
    }
    .add-input {
        padding: $padding * 2 $padding * 2 0 $padding * 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        color: $text-gray-m;
        font-size: $title-size-m;
        .left {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            span {
                padding-bottom: 10rpx;
            }
        }
        .total {
            color: $main-color;
            font-size: $title-size * 2;
            font-weight: bold;
            border-bottom: solid 4rpx $main-color;
            position: relative;
            min-width: 100rpx;
            text-align: center;
            min-height: 100rpx;
            span {
                position: absolute;
                top: 0;
                right: -$padding - 10;
                font-size: $title-size-m;
                font-weight: normal;
            }
        }
    }
}
</style>
