<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" />
        </view>
        <view class="bottom-components" :style="{ bottom: config.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">99</text>
                </view>
            </view>
            <view class="order-btn" @click="createOrder">
                <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 {
            data: [
                {
                    id: 1,
                    name: "热门推荐",
                    icon: "",
                    child: [
                        {
                            id: 2,
                            name: "空调安装空调安装空调安装空调安装空调安装空调安装",
                            icon: require("@/static/temp/cate/1.png"),
                            buyNumber: 1,
                        },
                        {
                            id: 3,
                            name: "空调拆卸",
                            icon: require("@/static/temp/cate/2.png"),
                            buyNumber: 1,
                        },
                        {
                            id: 4,
                            name: "热水器安装",
                            icon: require("@/static/temp/cate/3.png"),
                            buyNumber: 1,
                        },
                        {
                            id: 5,
                            name: "油烟机安装",
                            icon: require("@/static/temp/cate/4.png"),
                            buyNumber: 0,
                        },
                    ],
                },
                {
                    id: 5,
                    name: "电器安装",
                    icon: "",
                    child: [
                        {
                            id: 6,
                            name: "空调安装",
                            icon: require("@/static/temp/cate/2.png"),
                            buyNumber: 0,
                        },
                        {
                            id: 7,
                            name: "空调拆卸",
                            icon: require("@/static/temp/cate/3.png"),
                            buyNumber: 0,
                        },
                        {
                            id: 8,
                            name: "热水器安装",
                            icon: require("@/static/temp/cate/4.png"),
                            buyNumber: 0,
                        },
                    ],
                },
            ],
            bottom: 0,
        };
    },
    components: {
        AppLayout,
        AppCate,
    },
    computed: {
        ...mapState({
            config: (state) => state.system.config,
        }),
    },
    onLoad() {},
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        createOrder() {
            this.$utils.toPage("/pages/order/create");
        },
        clickItem(id) {
            this.$utils.toPage("/pages/service/detail?id=" + id);
        },
    },
};
</script>

<style lang="less" scoped>
.bottom-components {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 750px;
    width: 100%;
    height: @tabBarHeight;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx 0 50rpx;
    margin: 0 auto;
    .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>