<template>
    <app-layout minHeight="unset" btnType="unset" title="分类">
        <view class="search-component">
            <widget-search />
        </view>
        <view class="cate">
            <app-cate
                :offsetHeight="95"
                :data="data"
                cateType="cate"
                :activeId="currentId"
                @clickItem="clickItem"
                @onScroll="onScroll"
            />
        </view>
        <movable-area class="cart-icon-box">
            <movable-view
                class="cart-icon-view"
                direction="all"
                :x="position.x"
                :y="position.y"
                @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>
            </movable-view>
        </movable-area>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import AppCate from "@/components/cate/cate";
import WidgetSearch from "@/components/widgets/search";
import { mapState } from "vuex";
export default {
    name: "service-cate",
    data() {
        return {
            utils: this.$utils,
            position: { x: 300, y: 1000 },
            currentId: 0,
            newId: 0,
            data: [],
        };
    },
    components: {
        AppLayout,
        AppCate,
        WidgetSearch,
    },
    computed: {
        ...mapState({
            indexCateId: (state) => state.system.indexCateId,
            cartCount: (state) => state.cart.count,
            isLogin: (state) => state.user.token.length > 0,
        }),
    },
    async onLoad() {
        let pageConfig = getApp().globalData.pageConfig;
        if (this.isLogin) {
            this.$store.dispatch("cart/updateCount");
        }

        let x = pageConfig.windowWidth - this.$utils.rpx2px(94);
        let y = pageConfig.windowHeight - this.$utils.rpx2px(94);
        // H5平台减去tabBar高度
        // #ifdef H5
        y = y - this.$utils.rpx2px(100);
        // #endif
        this.position = {
            x: x - this.$utils.rpx2px(20),
            y: y - this.$utils.rpx2px(40),
        };
        // 加载分类
        this.data.push({
            id: 0,
            name: "热门推荐",
            cover: "",
            child: await this.hotCate(),
        });
        this.loadCate();
    },
    onShow() {
        this.newId = this.currentId = this.indexCateId;
    },
    onReady() {},
    onHide() {
        this.currentId = 0;
        this.$store.commit("system/indexCateId", this.newId);
    },
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        /**
         * 推荐
         */
        async hotCate() {
            let list = [];
            await this.$request({
                api: "service.hotCate",
            }).then((response) => {
                response.data.forEach((item) => {
                    list.push({
                        id: item.id,
                        name: item.name,
                        cover: item.more,
                    });
                });
            });

            return list;
        },
        /**
         * 分类
         */
        loadCate() {
            this.$request({
                api: "service.cate",
            })
                .then((response) => {
                    response.data.forEach((item) => {
                        let child = [];
                        item.child.forEach((v) => {
                            child.push({
                                id: v.id,
                                name: v.name,
                                cover: v.more,
                            });
                        });
                        this.data.push({
                            id: item.id,
                            name: item.name,
                            cover: item.more,
                            child: child,
                        });
                    });
                })
                .catch((e) => {});
        },
        onScroll(id) {
            this.newId = id;
        },
        clickItem(parentId, id) {
            this.newId = parentId;
            this.$utils.toPage("/pages/service/list?id=" + id);
        },
    },
};
</script>

<style lang="less" scoped>
.search-component {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 30rpx;
}
.cart-icon-box {
    z-index: 15;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    .cart-icon-view {
        position: relative;
        pointer-events: auto;
        width: 94rpx;
        height: 94rpx;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2rpx solid #4b65ed;
        background-color: #ffffff;
        text-align: center;
    }
    .cart-icon {
        .iconfont {
            color: #4b65ed;
            font-size: 60rpx;
            line-height: 94rpx;
        }
    }
    .cart-number {
        position: absolute;
        top: -12rpx;
        right: -14rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: #ec7655;
        border-radius: 50%;
        font-size: 0;
        .text {
            font-size: 24rpx;
            line-height: 40rpx;
            color: #ffffff;
        }
    }
}
</style>