<template>
    <app-layout minHeight="unset" btnType="unset" title="分类" backgroundColor="#F6F6F6" headerBackgroundColor="#F6F6F6">
        <view class="search-component">
            <widget-search />
        </view>
        <view class="cate">
            <app-cate :offsetHeight="95" :data="data" cateType="cate" @clickItem="clickItem" />
        </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">99</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 {
            position: { x: 300, y: 1000 },
            data: [
                {
                    id: 1,
                    name: "热门推荐",
                    icon: "",
                    child: [
                        {
                            id: 2,
                            name: "空调安装",
                            icon: require("@/static/temp/cate/1.png"),
                        },
                        {
                            id: 3,
                            name: "空调拆卸",
                            icon: require("@/static/temp/cate/2.png"),
                        },
                        {
                            id: 4,
                            name: "热水器安装",
                            icon: require("@/static/temp/cate/3.png"),
                        },
                        {
                            id: 5,
                            name: "油烟机安装",
                            icon: require("@/static/temp/cate/4.png"),
                        },
                    ],
                },
                {
                    id: 5,
                    name: "电器安装",
                    icon: "",
                    child: [
                        {
                            id: 6,
                            name: "空调安装",
                            icon: require("@/static/temp/cate/2.png"),
                        },
                        {
                            id: 7,
                            name: "空调拆卸",
                            icon: require("@/static/temp/cate/3.png"),
                        },
                        {
                            id: 8,
                            name: "热水器安装",
                            icon: require("@/static/temp/cate/4.png"),
                        },
                    ],
                },
            ],
        };
    },
    components: {
        AppLayout,
        AppCate,
        WidgetSearch,
    },
    computed: {
        ...mapState({
            config: (state) => state.system.config,
        }),
    },
    onLoad() {
        let x = this.config.windowWidth - this.$utils.rpx2px(94);
        let y = this.config.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),
        };
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        clickItem(id) {
            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>