<!--
 * @Description:
 * @Author: Aimee·Zhang
 * @Date: 2022-01-11 11:27:17
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-11 16:52:38
-->

<template>
    <view class="add-foods">
        <!-- 搜索页面 -->
        <u-search
            :show-action="true"
            actionText="搜索"
            :animation="true"
            :clearabled="true"
            placeholder="请输入食品名称"
        />
        <!-- 食品列表 -->
        <goodsList
            :lists='lists'
            type="dian"
            @addGoods="addGoods"
        />
        <!--  添加食谱弹窗 -->
        <addFoods
            :addShow="addShow"
            :selectGoods="selectGoods"
            :decimals="true"
            @confirm="confirmHandle"
            @close="closeHandle"
            max="999"
        />

    </view>
</template>
<script>
import goodsList from "@/components/foods";
import addFoods from "@/components/addGoods";

export default {
    components: { goodsList, addFoods },
    data() {
        return {
            lists: [1, 2, 3, 4, 5, 6], // 食品列表
            addShow: false, // 添加食品显示
            selectGoods: [1], // 选择新增的食品
            digitKeyboardValue: 0, // 选择按钮返回的值
        };
    },
    methods: {
        // 监听点击键盘触发返回值
        confirmHandle(value) {
            console.log(typeof value);
            //点击键盘完成的回调函数
            this.digitKeyboardValue = value;
            this.addShow = false;
        },
        closeHandle() {
            //键盘关闭的回调函数
            this.addShow = false;
        },
        // 监听子组件的新增方法
        addGoods(e) {
            console.log("父组件监听到了子组件的新增方法", e);
            this.addShow = true;
        },
        // 监听子组件的新增方法
        tabGoodsInfo(e) {
            console.log("父组件监听到了子组件的商品详情页面", e);
        },
    },
};
</script>
<style lang="scss" scoped>
.add-foods {
    padding: $padding;
}
</style>