<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">
            <view v-show="tabIndex == 0" 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">{{ detail.title }}</text>
                        </view>
                        <view class="text-box">
                            <text class="text">已服务{{ detail.times }}次</text>
                        </view>
                        <button class="share-icon" open-type="share">
                            <text class="iconfont icon-fenxiang"></text>
                        </button>
                    </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 class="common-bottom-components" :style="{ paddingBottom: 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>
            <view v-show="tabIndex == 1" class="tab-item tab1">
                <view class="reviews">
                    <app-appraise-section
                        :total="appraise.total"
                        :tags="appraise.tags"
                        :cate="appraise.cate"
                        @changeCate="changeAppraiseCate"
                    />
                    <view class="loadmore-box">
                        <app-load-more :hasMore="currentAppraiseCate.more" @loadmore="loadAppraiseData" />
                    </view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import AppAppraiseSection from "@/components/appraise/section";
import AppLoadMore from "@/components/widgets/loadmore";
export default {
    name: "service-detail",
    data() {
        return {
            pageConfig: {},
            tabIndex: 0, // 1评价
            currentBanner: 1,
            pageTitle: "",
            canUseCart: true,
            id: 0,
            detail: {
                title: "",
                times: 0,
                images: [],
                content: "",
                price: 0,
            },
            currentAppraiseCate: {},
            appraise: {
                total: 0,
                tags: [],
                cate: [],
            },
        };
    },
    components: {
        AppLayout,
        AppAppraiseSection,
        AppLoadMore,
    },
    async 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.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'),
                price: response.goods.money,
            };
            this.pageTitle = this.detail.title;
        });
        // 评价
        await this.$models.appraise.count.service(this.id).then((data) => {
            data.tags.forEach((item) => {
                this.appraise.tags.push({
                    count: item.count,
                    name: item.name,
                });
            });
            data.cate.forEach((item) => {
                this.appraise.cate.push({
                    name: item.name,
                    count: item.count,
                    status: item.status,
                    page: 1,
                    more: true,
                    list: [],
                });
            });
            this.appraise.total = this.appraise.cate[0].count;
            this.changeAppraiseCate(this.appraise.cate[0], 0);
        });
    },
    onShow() {},
    onReady() {},
    onReachBottom() {
        if (this.tabIndex == 0) return;
        this.loadAppraiseData();
    },
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 分享
         */
        share() {
            uni.showToast({
                title: "分享",
                icon: "none",
            });
        },
        /**
         * 加入购物车
         */
        async addToCart() {
            if (this.canUseCart) {
                this.canUseCart = false;
                await this.$models.cart
                    .toCart(this.id)
                    .then(async (msg) => {
                        await this.$store.dispatch("cart/update", true);
                        this.$utils.toast(msg);
                    })
                    .catch((e) => {});
                this.canUseCart = true;
            }
        },
        /**
         * 创建订单
         */
        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;
        },
        /**
         * 滑动banner
         */
        changeBanner(e) {
            this.currentBanner = e.detail.current + 1;
        },
        /**
         * 切换评价分类
         */
        changeAppraiseCate(currentAppraiseCate, index) {
            currentAppraiseCate.more = true;
            currentAppraiseCate.page = 1;
            this.currentAppraiseCate = currentAppraiseCate;
            this.loadAppraiseData();
        },
        /**
         * 加载评价数据
         */
        loadAppraiseData() {
            if (!this.currentAppraiseCate.more) return;
            this.$models.appraise.list
                .service({
                    id: this.id,
                    status: this.currentAppraiseCate.status,
                    page: this.currentAppraiseCate.page,
                })
                .then((list) => {
                    if (list.length > 0) {
                        if (this.currentAppraiseCate.page == 1) {
                            this.currentAppraiseCate.list = list;
                        } else {
                            this.currentAppraiseCate.list = this.currentAppraiseCate.list.concat(list);
                        }
                        this.currentAppraiseCate.page++;
                    } else {
                        this.currentAppraiseCate.more = false;
                    }
                });
        },
    },
};
</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;
        background-color: unset;
        .iconfont {
            color: #999999;
            font-size: 35rpx;
        }
    }
    .share-icon::after {
        border: 0;
    }
}
.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;
        }
    }
}
.reviews {
    width: 100%;
    height: auto;
    .loadmore-box {
        padding: 40rpx 0;
    }
}
</style>