<template>
    <app-layout minHeight="unset" btnType="back" title="服务列表" headerBackgroundColor="#FFFFFF" backgroundColor="#FFFFFF">
        <view class="cate">
            <app-cate
                :offsetHeight="0"
                :data="data"
                cateType="list"
                @clickItem="clickItem"
                @changeNumber="changeNumber"
                :activeId="currentId"
            />
        </view>
        <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
            <view class="cart" @click="utils.toPage('/pages/service/cart')">
                <view class="cart-icon">
                    <text class="iconfont icon-gouwuche"></text>
                </view>
                <view class="cart-number">
                    <text class="text">{{ cartCount }}</text>
                </view>
            </view>
            <view class="order-btn" @click="utils.toPage('/pages/service/cart')">
                <text class="text">去下单</text>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import AppCate from "@/components/cate/cate";
import { mapState } from "vuex";
export default {
    name: "service-list",
    data() {
        return {
            utils: this.$utils,
            pageConfig: {},
            data: [],

            currentId: 0,
        };
    },
    components: {
        AppLayout,
        AppCate,
    },
    computed: {
        ...mapState({
            cartCount: (state) => state.cart.count,
            isLogin: (state) => state.user.token.length > 0,
        }),
    },
    onLoad(e) {
        this.pageConfig = getApp().globalData.pageConfig;
        if (this.isLogin) {
            this.$store.dispatch("cart/updateCount");
            this.$store.dispatch("cart/briefCart");
        }

        if (!e.id) {
            this.$utils.toast("参数错误");
            return;
        }
        this.currentId = e.id;
        this.loadList(e.id);
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        /**
         * 加载列表
         */
        loadList(cateId) {
            this.$request({
                api: "service.list",
                query: "id=" + cateId,
            })
                .then((response) => {
                    response.data.forEach((item) => {
                        let goods = [];
                        item.goods.forEach((v) => {
                            goods.push({
                                id: v.id,
                                name: v.post_title,
                                times: v.post_hits,
                                cover: v.thumbnail,
                                price: v.money,
                            });
                        });
                        this.data.push({
                            id: item.id,
                            name: item.name,
                            cover: item.more,
                            child: goods,
                        });
                    });
                })
                .catch((e) => {});
        },
        /**
         * 详情
         */
        clickItem(parentId, id) {
            this.$utils.toPage("/pages/service/detail?id=" + id);
        },
        /**
         * 数量改变
         */
        changeNumber(e, id) {
            if (e.value > 0) {
                if (e.type == "add" && e.value == 1) {
                    this.$models.cart.toCart(id).then(() => {
                        this.$store.dispatch("cart/updateAll");
                    });
                } else {
                    this.$models.cart.change(id, e.type).then(() => {
                        this.$store.dispatch("cart/updateAll");
                    });
                }
            } else {
                this.$models.cart.delete(id).then(() => {
                    this.$store.dispatch("cart/updateAll");
                });
            }
        },
    },
};
</script>

<style lang="less" scoped>
.common-bottom-components {
    padding: 0 20rpx 0 50rpx;
    .cart {
        position: relative;
        width: 95rpx;
        height: 95rpx;
    }
    .cart-icon {
        position: absolute;
        top: -18rpx;
        left: 0;
        width: 95rpx;
        height: 95rpx;
        text-align: center;
        background-color: #ffffff;
        border: 1px solid #4b65ed;
        border-radius: 50%;
        .iconfont {
            color: #4b65ed;
            font-size: 50rpx;
            line-height: 95rpx;
        }
    }
    .cart-number {
        position: absolute;
        top: -24rpx;
        right: -16rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: #ec7655;
        border-radius: 50%;
        text-align: center;
        font-size: 0;
        .text {
            font-size: 24rpx;
            line-height: 40rpx;
            color: #ffffff;
        }
    }
    .order-btn {
        width: 300rpx;
        height: 75rpx;
        text-align: center;
        background: linear-gradient(-90deg, #8194f2, #4c60c1);
        border-radius: 38rpx;
        .text {
            font-size: 30rpx;
            color: #ffffff;
            line-height: 75rpx;
        }
    }
}
</style>