<template>
    <app-layout headerBackgroundColor="#4B65ED" textColor="light" btnType="city" title="熊熊安装队">
        <view class="search-component">
            <widget-search />
        </view>
        <view class="banner">
            <app-banner :list="bannerList" />
        </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="common-service-nav-group">
            <text class="section-title">建材安装服务</text>
            <view class="group g1">
                <view
                    class="service-item"
                    v-for="(item, index) in installServiceList"
                    :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="common-service-nav-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="common-service-nav-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 {
            utils: this.$utils,
            bannerList: [],
            notifyList: [],
            installServiceList: [],
            aftermarketServiceList: [],
            bussinessServiceList: [
                {
                    id: 14,
                    icon: require("@/static/temp/index/b1.png"),
                    title: "工程安装",
                    page: "/pages/service/other/project",
                },
                {
                    id: 15,
                    icon: require("@/static/temp/index/b2.png"),
                    title: "企业合作安装",
                    page: "/pages/service/other/business",
                },
            ],
        };
    },
    components: {
        AppLayout,
        AppBanner,
        WidgetSearch,
    },
    onLoad() {
        // 轮播
        this.$request({
            api: "index.banner",
        }).then((response) => {
            response.data.forEach((item) => {
                this.bannerList.push({
                    image: item.image,
                });
            });
        });
        // 公告
        this.$request({
            api: "index.notify",
        }).then((response) => {
            this.notifyList = [
                {
                    title: response.data.message,
                },
            ];
        });
        // 服务
        this.$request({
            api: "service.cate",
        }).then((response) => {
            response.data.forEach((item) => {
                this.installServiceList.push({
                    id: item.id,
                    title: item.name,
                    icon: item.more,
                    page: "",
                });
            });
        });
        this.$request({
            api: "service.aftermarket",
        }).then((response) => {
            response.data.forEach((item) => {
                this.aftermarketServiceList.push({
                    id: item.id,
                    title: item.name,
                    icon: item.more,
                    page: "",
                });
            });
        });
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {},
};
</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;
        }
    }
}
</style>