<template>
    <view class="content">
        <view class="backCont">
            <image class="img" :src="topicData.cover" mode="aspectFill"></image>
            <view class="head">
                <view class="ios-top"></view>
                <view class="ellipsis title">
                    {{ topicData.name }}
                </view>
                <view class="tips" v-if="topicData.category">
                    # 话题 -- {{ topicData.category.name }} #
                </view>
                <view class="ellipsis text">
                    {{ topicData.description }}
                </view>
                <view class="tool">
                    <view class="tool-see">
                        <text>{{ topicData.clicks }} 人游览</text>
                        <text>{{ topicData.favorites }} 人点赞</text>
                    </view>
                    <view class="tool-btn" :class="{active : isFavorite}" @click="thumbClick(topicData.topic_id)">
                        <u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17"
                            style="margin-right: 5rpx;"></u-icon>
                        {{ isFavorite ? '已赞' : '点赞' }}
                    </view>
                </view>
            </view>
            <view class="brief">
                <view class="source">
                    <image class="source-logo" src="/static/find/logo.png" mode="aspectFill"></image>
                    <view class="source-title">
                        <view class="source-name">
                            {{ topicData.author }}
                        </view>
                        <view class="source-text">
                            ZH大健康官方账号
                        </view>
                    </view>
                </view>
                <view class="brief-text">
                    <rich-text :nodes="topicContent"></rich-text>
                </view>
                <view class="goods" v-if="goodsArr.length > 0">
                    <view class="title">
                        相关商品
                    </view>
                    <view class="item" v-for="(item, index) in goodsArr" :key="index">
                        <image class="item-cover"
                            src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png"
                            mode="aspectFill"></image>
                        <view class="item-title">
                            <view class="nowrap item-name">
                                {{ item.name }}
                            </view>
                            <view class="item-price">
                                ￥{{ item.price }}
                            </view>
                        </view>
                        <view class="item-btn"
                            @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
                            查看商品
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        topicDet,
        topicThumb
    } from '@/apis/interfaces/topic'
    import userAuth from '@/public/userAuth'
    export default {
        data() {
            return {
                topicData: '',
                goodsArr: [],
                topicContent: '',
                isFavorite: ''
            }
        },
        mounted() {
            this.getRank()
        },
        methods: {
            // 详情
            getRank() {
                topicDet(this.$Route.query.id).then(res => {
                    uni.setNavigationBarTitle({
                        title: res.name
                    })
                    this.topicData = res
                    this.goodsArr = res.goods
                    this.isFavorite = res.is_favorite
                    this.topicContent = res.content.replace(/\<img/gi,
                        '<img style="max-width:100%;height:auto;display:block;"')
                })
            },
            // 点赞
            thumbClick(id) {
                if (this.$store.state.token === '') {
                    const Auth = new userAuth()
                    Auth.Login()
                    return
                }
                topicThumb(id).then(res => {
                    this.isFavorite = !this.isFavorite

                    this.topicData.favorites = res
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    page {
        background: $window-color;
    }

    .backCont {
        position: relative;
        width: 100vw;
        padding-top: 90%;

        &::after {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            background-color: rgba($color: #000000, $alpha: .35);
        }

        .img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            filter: blur(10rpx);
            overflow: hidden;
        }

        .head {
            padding: $padding * 3 $padding + 30 0;
            color: white;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 9;

            .title {
                font-size: $title-size + 8;
                margin-bottom: $margin - 10;
                height: 100rpx;
                font-weight: 600;
            }

            .tips {
                margin-bottom: $margin + 20;
            }

            .text {
                margin: $margin 0 $margin + 10;
                line-height: 48rpx;
                height: 100rpx;
                font-size: $title-size-lg;
            }

            .tool {
                width: 100%;
                font-size: $title-size-m;
                display: flex;
                line-height: 48rpx;

                .tool-see {
                    flex: 1;

                    text {
                        padding-right: $padding;
                    }
                }

                .tool-btn {
                    border: 2rpx solid white;
                    border-radius: $radius * 2;
                    font-size: $title-size-sm;
                    padding: 0 $padding - 5;
                    line-height: 48rpx;
                    display: flex;

                    &.active {
                        background-color: white;
                        color: $text-color;
                    }
                }
            }
        }
    }

    .brief {
        position: absolute;
        top: 90%;
        width: 100%;
        z-index: 10;
        background-color: white;
        border-radius: $radius * 3 $radius * 3 0 0;
        padding: $padding;
        box-sizing: border-box;

        .brief-text {
            margin: $margin 0;
            line-height: 48rpx;
            font-size: $title-size-lg;
            color: $text-color;
            padding: 0 $padding - 20;
            box-sizing: border-box;
        }

        .source {
            position: relative;

            .source-logo {
                width: 70rpx;
                height: 70rpx;
                border-radius: 50%;
                margin-top: $margin - 24;
            }

            .source-title {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding-left: 90rpx;
                box-sizing: border-box;
                font-size: $title-size-lg;

                .source-name {
                    font-weight: 600;
                    margin-bottom: $margin - 25;
                }

                .source-text {
                    line-height: 48rpx;
                    font-size: $title-size-m;
                    color: $text-gray-m;
                }
            }
        }
    }

    .goods {
        margin-top: $margin;

        .title {
            font-weight: bold;
            font-size: $title-size;
        }

        .item {
            position: relative;
            margin-top: $margin - 10;
            background: #f5fdfa;
            border-radius: $radius;
            padding: $padding;
            box-sizing: border-box;

            .item-cover {
                width: 120rpx;
                height: 90rpx;
                border-radius: $radius-m;
            }

            .item-title {
                position: absolute;
                left: 0;
                top: 0;
                width: calc(100% - 180rpx);
                box-sizing: border-box;
                padding: $padding $padding 0 180rpx;
                font-size: $title-size-lg;
                margin-bottom: 10px;
                color: $text-color;

                .item-price {
                    color: $text-price;
                    margin-top: $margin - 20;
                }
            }

            .item-btn {
                position: absolute;
                right: $padding;
                top: $padding + 20;
                background-color: $main-color;
                color: white;
                line-height: 62rpx;
                font-size: $title-size-m;
                padding: 0 $padding - 10;
                border-radius: $radius-m;
            }
        }
    }
</style>
