<template>
    <view class="content">
        <view class="backCont">
            <image class="img" :src="topicData.cover" mode="aspectFill"></image>
            <view class="head">
                <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'
    export default {
        data() {
            return {
                topicData   : '',
                goodsArr    : [],
                topicContent: '',
                isFavorite  : ''
            }
        },
        mounted() {
            this.getRank()
        },
        methods: {
            // 详情
            getRank(){
            	topicDet(this.$Route.query.id).then(res => {
                    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) {
                topicThumb(id).then(res => {
                    this.isFavorite = !this.isFavorite
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    page {
        background: $window-color;
    }
    
    .backCont {
        position: relative;
        width: 100vw;
        padding-top: 75%;
        &::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 * 2 $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>
