<template>
    <app-layout :title="pageTitle">
        <view class="service-detail-select-group">
            <view class="select-item" :class="[tabIndex == 0 ? 'active' : '']" @click="tabIndex = 0">
                <text class="text">详情</text>
            </view>
            <view class="select-item" :class="[tabIndex == 1 ? 'active' : '']" @click="tabIndex = 1">
                <text class="text">评价</text>
            </view>
        </view>
        <view class="service-detail-group">
            <swiper
                class="service-detail-tab-list"
                :current="tabIndex"
                :duration="300"
                @change="changeTab"
                :style="{ height: tabHeight + 'px' }"
            >
                <swiper-item>
                    <view class="tab-item tab0">
                        <view class="service-section banner-box">
                            <swiper class="service-banner-swiper" circular autoplay @change="changeBanner">
                                <swiper-item v-for="(item, index) in detail.images" :key="index">
                                    <image class="img" :src="item" mode="aspectFill" />
                                </swiper-item>
                            </swiper>
                            <view class="swiper-number">
                                <text class="text">
                                    {{ currentBanner + "/" + detail.images.length }}
                                </text>
                            </view>
                        </view>
                        <view class="service-section desc-box">
                            <view class="desc">
                                <view class="title">
                                    <text class="text">空调安装</text>
                                </view>
                                <view class="text-box">
                                    <text class="text">已服务{{ detail.times }}次</text>
                                </view>
                                <view class="share-icon" @click="share">
                                    <text class="iconfont icon-fenxiang"></text>
                                </view>
                            </view>
                        </view>
                        <view class="service-section detail-box">
                            <div class="detail">
                                <view class="title">
                                    <text class="text">商品详情</text>
                                </view>
                                <view class="rich-box">
                                    <rich-text :nodes="detail.content"></rich-text>
                                </view>
                            </div>
                        </view>
                    </view>
                </swiper-item>
                <swiper-item>
                    <view class="tab-item tab1">
                        <view class="reviews"> </view>
                    </view>
                </swiper-item>
            </swiper>
            <view
                class="common-bottom-components"
                v-if="tabIndex == 0"
                :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }"
            >
                <view class="price">
                    <text class="text">¥{{ detail.price }}</text>
                </view>
                <view class="btn-group">
                    <view class="cart" @click="addToCart">
                        <text class="text">加入购物车</text>
                    </view>
                    <view class="order" @click="createOrder">
                        <text class="text">立即下单</text>
                    </view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
export default {
    name: "service-detail",
    data() {
        return {
            pageConfig: {},
            tabIndex: 0, // 1评价
            tabHeight: 0,
            currentBanner: 1,
            pageTitle: "服务详情",
            id: 0,
            detail: {
                title: "",
                times: 0,
                images: [],
                content: "",
                price: 0,
            },
        };
    },
    components: {
        AppLayout,
    },
    onLoad(e) {
        this.pageConfig = getApp().globalData.pageConfig;

        if (e.id) {
            this.id = e.id;
        } else {
            this.$utils.toast("参数错误");
            return;
        }

        this.$models.service.getServiceDetail(this.id).then((response) => {
            this.detail = {
                title: response.goods.post_title,
                times: response.goods.post_hits,
                images: response.goods.image,
                content: response.goods.post_content,
                price: response.goods.money,
            };
            this.$nextTick(() => {
                this.setTabHeight();
            });
        });
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        share() {
            uni.showToast({
                title: "分享",
                icon: "none",
            });
        },
        /**
         * 加入购物车
         */
        addToCart() {
            this.$models.cart.toCart(this.id).then(() => {
                this.$store.dispatch("cart/updateAll");
            });
        },
        /**
         * 创建订单
         */
        createOrder() {
            let orderdata = [
                {
                    id: this.id,
                    count: 1,
                },
            ];
            this.$utils.toPage("/pages/order/create?orderData=" + encodeURIComponent(JSON.stringify(orderdata)));
        },
        changeTab(e) {
            this.tabIndex = e.detail.current;
            this.$nextTick(() => {
                this.setTabHeight();
            });
        },
        setTabHeight() {
            let element = ".tab" + this.tabIndex;
            let query = uni.createSelectorQuery().in(this);
            query.select(element).boundingClientRect();
            query.exec((res) => {
                if (res && res[0]) {
                    this.tabHeight = res[0].height;
                }
            });
        },
        changeBanner(e) {
            this.currentBanner = e.detail.current + 1;
        },
    },
};
</script>

<style lang="less" scoped>
.service-detail-select-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    margin-bottom: 20rpx;
    .select-item {
        width: 210rpx;
        height: 115rpx;
        box-sizing: border-box;
        text-align: center;
        .text {
            font-size: 30rpx;
            color: #999999;
            line-height: 115rpx;
        }
    }
    .select-item.active {
        border-bottom: 7rpx solid #8b9aeb;
        .text {
            font-weight: bold;
            color: #8b9aeb;
        }
    }
}
.service-detail-group {
    width: 100%;
    height: auto;
    .service-detail-tab-list {
        width: 100%;
        .tab-item {
            min-height: 300rpx;
        }
    }
}
.service-section {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    background-color: #ffffff;
}
.service-section.banner-box {
    .service-banner-swiper {
        width: 100%;
        height: 400rpx;
        .img {
            width: 100%;
            height: 100%;
        }
    }
    .swiper-number {
        position: absolute;
        bottom: 20rpx;
        right: 35rpx;
        .text {
            font-size: 26rpx;
            color: #8b9aeb;
            letter-spacing: 4rpx;
        }
    }
}
.service-section.desc-box,
.service-section.detail-box {
    margin-top: 20rpx;
    .title {
        display: block;
        margin-bottom: 30rpx;
        line-height: 30rpx;
        .text {
            font-size: 30rpx;
            font-weight: bold;
        }
    }
}
.service-section.desc-box {
    .desc {
        position: relative;
        width: 670rpx;
        padding: 45rpx 0;
    }
    .text-box {
        line-height: 28rpx;
        .text {
            font-size: 28rpx;
            color: #999999;
        }
    }
    .share-icon {
        position: absolute;
        right: 0;
        bottom: 45rpx;
        .iconfont {
            color: #999999;
            font-size: 35rpx;
        }
    }
}
.service-section.detail-box {
    padding-bottom: 120rpx;
    .detail {
        position: relative;
        width: 670rpx;
        padding: 45rpx 0;
    }
}
.common-bottom-components {
    .price {
        .text {
            font-size: 42rpx;
            font-weight: bold;
            color: #ec7655;
        }
    }
    .btn-group {
        width: 360rpx;
        display: flex;
        justify-items: center;
        justify-content: space-between;
    }
    .cart,
    .order {
        font-size: 26rpx;
        line-height: 26rpx;
        border: 1px solid #999999;
        border-radius: 35rpx;
        padding: 15rpx 25rpx;
    }
    .cart {
        .text {
            color: #666666;
        }
    }
    .order {
        background: #8b9aeb;
        .text {
            color: #ffffff;
        }
    }
}
</style>