<template>
    <app-layout headerBackgroundColor="#4B65ED" textColor="light" btnType="city" title="熊熊安装队">
        <view class="search-component">
            <widget-search />
        </view>
        <view class="banner">
            <app-banner :list="bannerList" @onClickItem="clickBanner" />
        </view>
        <view class="notify">
            <view class="icon">
                <text class="iconfont icon-gonggao"></text>
            </view>
            <view class="slide-box">
                <swiper
                    class="notify-swiper"
                    circular
                    :indicator-dots="false"
                    :autoplay="true"
                    :vertical="true"
                    interval="3000"
                    duration="1000"
                >
                    <swiper-item v-for="(item, index) in notifyList" :key="index">
                        <view class="swiper-item notify-item">
                            <text class="limit-line clamp-1">
                                {{ item.title }}
                            </text>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="service-group">
            <text class="section-title">建材安装服务</text>
            <view class="group g1">
                <view class="service-item" v-for="(item, index) in installServiceList" :key="index">
                    <image class="service-icon" :src="item.icon" mode="scaleToFill" />
                    <text class="service-name limit-line clamp-1">
                        {{ item.title }}
                    </text>
                </view>
            </view>
        </view>
        <view class="service-group">
            <text class="section-title">维修售后服务</text>
            <view class="group g2">
                <view
                    class="service-item"
                    v-for="(item, index) in aftermarketServiceList"
                    :key="index"
                    @click="$utils.toPage(item.page)"
                >
                    <image class="service-icon" :src="item.icon" mode="scaleToFill" />
                    <text class="service-name limit-line clamp-1">
                        {{ item.title }}
                    </text>
                </view>
            </view>
        </view>
        <view class="service-group">
            <text class="section-title">工程企业服务</text>
            <view class="group g3">
                <view
                    class="service-item"
                    v-for="(item, index) in bussinessServiceList"
                    :key="index"
                    @click="$utils.toPage(item.page)"
                >
                    <image class="service-icon" :src="item.icon" mode="scaleToFill" />
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import AppBanner from "@/components/banner/banner";
import WidgetSearch from "@/components/widgets/search";
export default {
    name: "index",
    data() {
        return {
            bannerList: [
                {
                    id: 1,
                    image: require("@/static/temp/banner.png"),
                    title: "",
                    page: "",
                },
            ],
            notifyList: [
                {
                    id: 1,
                    title: "恭喜成都市王先生订购xxxxxx服务一套",
                },
                {
                    id: 2,
                    title: "恭喜成都市王先生订购xxxxxx服务一套",
                },
                {
                    id: 3,
                    title: "恭喜成都市王先生订购xxxxxx服务一套",
                },
                {
                    id: 4,
                    title: "恭喜成都市王先生订购xxxxxx服务一套",
                },
                {
                    id: 5,
                    title: "恭喜成都市王先生订购xxxxxx服务一套",
                },
            ],
            installServiceList: [
                {
                    id: 1,
                    icon: require("@/static/temp/index/1.png"),
                    title: "电器安装",
                    page: "",
                },
                {
                    id: 2,
                    icon: require("@/static/temp/index/2.png"),
                    title: "卫浴吊顶安装",
                    page: "",
                },
                {
                    id: 3,
                    icon: require("@/static/temp/index/3.png"),
                    title: "水电安装",
                    page: "",
                },
                {
                    id: 4,
                    icon: require("@/static/temp/index/4.png"),
                    title: "烟道钻孔",
                    page: "",
                },
                {
                    id: 5,
                    icon: require("@/static/temp/index/5.png"),
                    title: "家具安装",
                    page: "",
                },
                {
                    id: 6,
                    icon: require("@/static/temp/index/6.png"),
                    title: "门窗五金安装",
                    page: "",
                },
                {
                    id: 7,
                    icon: require("@/static/temp/index/7.png"),
                    title: "地面墙体安装",
                    page: "",
                },
                {
                    id: 8,
                    icon: require("@/static/temp/index/8.png"),
                    title: "其他安装",
                    page: "",
                },
            ],
            aftermarketServiceList: [
                {
                    id: 9,
                    icon: require("@/static/temp/index/a1.png"),
                    title: "电器维护",
                    page: "",
                },
                {
                    id: 10,
                    icon: require("@/static/temp/index/a2.png"),
                    title: "家电清洗",
                    page: "",
                },
                {
                    id: 11,
                    icon: require("@/static/temp/index/a3.png"),
                    title: "保洁家政",
                    page: "/pages/demand/demand",
                },
                {
                    id: 12,
                    icon: require("@/static/temp/index/a4.png"),
                    title: "管道疏通",
                    page: "",
                },
                {
                    id: 13,
                    icon: require("@/static/temp/index/a5.png"),
                    title: "货物配送",
                    page: "",
                },
            ],
            bussinessServiceList: [
                {
                    id: 14,
                    icon: require("@/static/temp/index/b1.png"),
                    title: "工程安装",
                    page: "/pages/single/project",
                },
                {
                    id: 15,
                    icon: require("@/static/temp/index/b2.png"),
                    title: "企业合作安装",
                    page: "/pages/single/business",
                },
            ],
        };
    },
    components: {
        AppLayout,
        AppBanner,
        WidgetSearch,
    },
    onLoad() {},
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        clickBanner(item) {
            console.log(item);
        },
    },
};
</script>

<style lang="less" scoped>
.search-component {
    width: 100%;
    height: 100rpx;
    background-color: #4b65ed;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner {
    width: 100%;
    height: 283rpx;
    margin: 0 auto;
    background-color: #4b65ed;
}
.notify {
    width: 670rpx;
    height: auto;
    display: flex;
    margin: 27rpx auto 0 auto;
    line-height: 63rpx;
    .icon {
        width: 80rpx;
        text-align: center;
        font-size: 40rpx;
        color: #f9b060;
    }
    .slide-box {
        width: 590rpx;
        .notify-swiper {
            display: block;
            width: 100%;
            height: 100%;
        }
        .notify-item {
            font-size: 24rpx;
            color: #6a6a6a;
        }
    }
}
.service-group {
    font-size: 0;
    width: 670rpx;
    margin: 40rpx auto 0 auto;
    padding-bottom: 45rpx;
    border-bottom: 4rpx solid #f8f8f8;
    .section-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
        display: flex;
        align-items: center;
    }
    .section-title::before {
        content: "";
        display: inline-block;
        width: 6rpx;
        height: 30rpx;
        background: #f9b162;
        margin-right: 12rpx;
    }
}
.group {
    width: 100%;
    .service-item {
        display: inline-block;
        text-align: center;
        .service-name {
            font-size: 24rpx;
            color: #333333;
            margin-top: 15rpx;
        }
    }
}
.group.g1 {
    .service-item {
        width: 145rpx;
        margin-top: 40rpx;
        margin-right: 30rpx;
        .service-icon {
            width: 100rpx;
            height: 100rpx;
        }
    }
    .service-item:nth-child(4n) {
        margin-right: 0;
    }
}
.group.g2 {
    .service-item {
        width: 100rpx;
        margin-top: 40rpx;
        margin-right: 42.5rpx;
        .service-icon {
            width: 100rpx;
            height: 100rpx;
        }
    }
    .service-item:nth-child(5n) {
        margin-right: 0;
    }
}
.group.g3 {
    .service-item {
        width: 320rpx;
        height: auto;
        margin-top: 40rpx;
        margin-right: 30rpx;
        .service-icon {
            width: 320rpx;
            height: 170rpx;
        }
    }
    .service-item:nth-child(2n) {
        margin-right: 0;
    }
}
</style>