<template>
    <app-layout minHeight="unset" btnType="unset" title="分类">
        <view class="search-component">
            <widget-search v-model="keywords" @input="inputKeywords" />
        </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"
            :style="{ height: movableAreaStyle.height, top: movableAreaStyle.top, bottom: movableAreaStyle.bottom }"
        >
            <movable-view
                class="cart-icon-view"
                direction="all"
                :inertia="true"
                :friction="5"
                :animation="false"
                :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">{{ briefCart.count }}</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 { mapGetters, mapState } from "vuex";
export default {
    name: "service-cate",
    data() {
        return {
            utils: this.$utils,
            movableAreaStyle: {
                height: 0,
                bottom: 0,
                top: 0,
            },
            position: { x: 300, y: 1000 },
            currentId: 0,
            newId: 0,
            data: [],
            keywordsTimer: null,
            keywords: "",
        };
    },
    components: {
        AppLayout,
        AppCate,
        WidgetSearch,
    },
    computed: {
        ...mapState({
            currentCateId: (state) => state.system.currentCateId,
        }),
        ...mapGetters({
            isLogin: "user/isLogin",
            briefCart: "cart/briefCart",
        }),
    },
    async onLoad() {
        const { windowWidth, windowHeight, safeAreaInsets } = getApp().globalData.pageConfig;
        let safeX = windowWidth,
            safeY = windowHeight - safeAreaInsets.top;
        // --------------设置可移动范围--------------
        this.movableAreaStyle.top = "auto";
        this.movableAreaStyle.bottom = 0;
        // #ifdef H5
        safeY -= this.$utils.rpx2px(100);
        this.movableAreaStyle.top = 0;
        this.movableAreaStyle.bottom = "auto";
        // #endif
        this.movableAreaStyle.height = safeY + "px";
        // --------------设置可移动范围--------------
        this.position = {
            x: safeX - this.$utils.rpx2px(94) - this.$utils.rpx2px(20),
            y: safeY - this.$utils.rpx2px(94) - this.$utils.rpx2px(40),
        };
        // 加载分类
        this.data = [
            {
                id: 0,
                name: "热门推荐",
                cover: "",
                child: await this.hotCate(),
            },
        ];
        this.loadCate();
    },
    onShow() {
        if (this.isLogin) {
            this.$store.dispatch("cart/update");
        }
        this.newId = this.currentId = this.currentCateId;
    },
    onReady() {},
    onHide() {
        this.currentId = 0;
        this.$store.commit("system/currentCateId", this.newId);
    },
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 推荐
         */
        async hotCate() {
            let list = [];
            await this.$request({
                api: "service.hotCate",
                data: {
                    keys: this.keywords,
                },
            }).then((response) => {
                response.data.forEach((item) => {
                    list.push({
                        id: item.id,
                        name: item.name,
                        cover: item.more,
                    });
                });
            });

            return list;
        },
        /**
         * 分类
         */
        loadCate() {
            let that = this;
            this.$models.service
                .getCate({
                    keys: this.keywords,
                    type: 1,
                })
                .then((list) => {
                    that.data = this.data.concat(list);
                });
        },
        onScroll(id) {
            this.newId = id;
        },
        clickItem(parentId, id) {
            this.newId = parentId;
            this.$utils.toPage("/pages/service/list?id=" + id);
        },
        /**
         * 搜索
         */
        inputKeywords() {
            clearTimeout(this.keywordsTimer);
            this.keywordsTimer = setTimeout(async () => {
                this.data = [];
                this.data.push({
                    id: 0,
                    name: "热门推荐",
                    cover: "",
                    child: await this.hotCate(),
                });
                this.loadCate();
            }, 1000);
        },
    },
};
</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: 20;
    position: fixed;
    left: 0;
    right: 0;
    width: 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>