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

<template>
    <view class="add-foods">
        <!-- 搜索页面 -->
        <u-search
            :show-action="true"
            actionText="搜索"
            :animation="true"
            :clearabled="true"
            placeholder="请输入运动名称"
            @custom="searchCustom"
            @clear="clearSearch"
            v-model="name"
        />
        <!-- 运动列表 -->
        <sports
            type="add"
            :lists="lists"
            @addSport="addSport"
        />
        <!-- 添加弹窗 -->
        <addPopup
            :selectSports="selectSports"
            :addSportsShow="addSportsShow"
            @comfirmSport="comfirmSport"
            @cancleSport="cancleSport"
        />
    </view>
</template>
<script>
import sports from "@/components/sports";
import addPopup from "@/components/sports/addPopup";
import { healthSports, addHealthSports } from "@/apis/interfaces/sport.js";
import moment, { duration } from "moment";

export default {
    components: { sports, addPopup },
    data() {
        return {
            addSportsShow: false, // 添加运动弹窗显示
            selectSports: {}, // 选择新增的运动
            lists: [], // 运动列表
            page: 1,
            has_more: true,
            name: "", // 搜索运动名称
            today: moment(new Date()).format("YYYY-MM-DD"),
        };
    },
    onLoad() {
        this.getExercises();
    },
    // 触底加载更多
    onReachBottom() {
        if (!this.has_more) {
            uni.showToast({
                title: "没有更多啦~",
                icon: "none",
            });
        } else {
            this.page = this.page + 1;
            this.getExercises();
        }
    },
    methods: {
        // 获取运动列表
        getExercises() {
            let data = {
                page: this.page,
                name: this.name,
            };
            healthSports(data).then((res) => {
                this.lists = this.lists.concat(res.data);
                this.has_more = res.page.has_more;
            });
        },
        // 显示弹窗内容
        addSport(item) {
            console.log(item);
            this.selectSports = item;
            this.selectSports.duration = 60;
            this.addSportsShow = true;
        },
        // 弹窗确认按钮新增
        comfirmSport(show, duration) {
            let params = {
                unit: "1", // 时间单位：分钟 1 小时 2
                duration: duration, // 时常
                sport_id: this.selectSports.sport_id, // 运动id
                date: this.today, // 日期
            };
            addHealthSports(params).then((res) => {
                this.addSportsShow = false;
                this.selectSports = {};
                this.$Router.back();
            });
            console.log("弹窗确认按钮新增");
        },
        // 弹窗取消按钮
        cancleSport(show) {
            this.addSportsShow = show;
            this.duration = 60;
            console.log("弹窗取消按钮");
        },
        // 添加运动弹窗显示
        //#region  搜索相关方法 start
        // 点击搜索左侧按钮
        searchCustom(e) {
            console.log(e);
            this.name = e;
            this.reset();
        },
        // 清空数组重新请求数据
        reset() {
            this.page = 1;
            this.has_more = true;
            this.lists = [];
            this.getExercises();
        },
        // 点击搜索后面按钮触发事件事件
        clearSearch() {
            this.name = "";
            this.reset();
        },
        //#endregion  搜索相关方法  end
    },
};
</script>
<style lang="scss" scoped>
.add-foods {
    padding: $padding;
    .lists {
        padding: $padding * 0.6 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        .lists-right {
            flex: 1;
            font-size: $title-size-m - 6;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            color: $text-gray-m;
            border-bottom: solid 1rpx #f7f7f7;
            margin-left: $margin * 0.8;
            padding: $padding 0;
        }
        .lists-title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            box-sizing: border-box;
            font-size: $title-size-m;
            color: $text-color;
            .des {
                margin-top: 10rpx;
            }
            span {
                color: $text-price;
                font-size: $title-size-m - 6;
                font-weight: normal;
                padding-right: $padding * 0.3;
            }
            .des {
                color: $text-gray-m;
                font-size: $title-size-m - 6;
                font-weight: normal;
            }
        }
    }
}
</style>
