<template>
    <view class="container">
        <view class="banner">
            <image class="banner-img" :src="detail.thumb"></image>
            <view class="banner-title">{{detail.title}}</view>
        </view>
        <view class="article-meta">
            <text class="article-author">
                <uni-icons type="contact"></uni-icons>{{detail.author_name}}
            </text>
            <text class="article-text">更新于</text>
            <text class="article-time">{{detail.updateTime}}</text>
        </view>
        <view v-if="detail.des" class="des">
            <text>内容摘要：</text>
            {{detail.des}}
        </view>
        <view class="article-content">
            <rich-text :nodes="htmlNodes" @itemclick="nodeClick"></rich-text>
        </view>
        <view class="article-meta">
            <text class="article-footer">
                <uni-icons type="eye">浏览</uni-icons>
                {{detail.viewed}}
            </text>

            <text :class="'article-footer '+ activeReading" @click="actionReading">
                <uni-icons type="hand-up" :style="styleReading">赞</uni-icons>
                {{detail.reading}}
            </text>
            <text :class="'article-footer '+ activeLike" @click="actionLike">
                <uni-icons type="heart" :style="styleLike">喜欢</uni-icons>
                {{detail.liked}}
            </text>
        </view>

        <uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
            :vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
    </view>
</template>

<script>
    import config from "@/config/ctms.config.js";
    import ctms from '@/apis/ctms/index.js';
    import htmlParser from '@/common/html-parser.js'
    const DETAIL_PAGE_PATH = config.pageDir + 'news/detail/detail';
    export default {
        data() {
            return {
                userinfo: {},
                id: 0,
                detail: {
                    id: 1,
                    viewed: 0,
                    liked: 0,
                    reading: 0
                },
                htmlNodes: [],
                imgs: [], //可用于预览的图片
                activeStyle: 'color:#fd8208;',
                activeReading: '', //active
                styleReading: '',
                activeLike: '', //active
                styleLike: '',
                h5_url: '',

                //悬浮按钮
                fabs: {
                    horizontal: 'left',
                    vertical: 'bottom',
                    direction: 'horizontal', //horizontal水平展开；vertical垂直展开
                    pattern: {
                        color: '#7A7E83',
                        backgroundColor: '#fff',
                        selectedColor: '#007AFF',
                        buttonColor: '#fff',
                        iconColor: '#aaa'
                    },
                    content: [{
                            iconPath: '/static/fab/home.png',
                            selectedIconPath: '/static/fab/homeactive.png',
                            text: '首页',
                            active: false,
                            diyfn: 'home'
                        },
                        {
                            iconPath: '/static/fab/guanzhu.png',
                            selectedIconPath: '/static/fab/guanzhuactive.png',
                            text: '关注',
                            active: false,
                            diyfn: 'news'
                        },
                        {
                            iconPath: '/static/fab/me.png',
                            selectedIconPath: '/static/fab/meactive.png',
                            text: '用户',
                            active: false,
                            diyfn: 'user'
                        },

                        {
                            iconPath: '/static/fab/news.png',
                            selectedIconPath: '/static/fab/newsactive.png',
                            text: '公告',
                            active: false,
                            diyfn: 'notice'
                        }
                    ]
                }
            }
        },
        methods: {
            getNewsDetail: function() {
                var _that = this;
                ctms.news.checkDetail(this.id).then((res) => {
                    if (res) {
                        _that.detail = res.data;
                        _that.htmlNodes = htmlParser(_that.detail.content);
                        uni.showToast({
                            title: "查询完成!",
                            icon: "success"
                        });
                        uni.stopPullDownRefresh();
                    }
                });
            },
            checkRecords: function() {
                // 检查文章在读等本地记录
                if (ctms.news.mark(this.id, 'reading', 'get')) {
                    this.activeReading = "active";
                    this.styleReading = this.activeStyle;
                }
                if (ctms.news.mark(this.id, 'liked', 'get')) {
                    this.activeLike = 'active';
                    this.styleLike = this.activeStyle;
                }
            },
            actionReading(e) {
                var op = this.activeReading ? 'del' : 'set';
                this.activeReading = !this.activeReading ? 'active' : false;
                this.styleReading = !this.styleReading ? this.activeStyle : false;
                ctms.news.mark(this.id, 'reading', op);
            },
            actionLike(e) {
                var op = this.activeLike ? 'del' : 'set';
                this.activeLike = !this.activeLike ? 'active' : '';
                this.styleLike = !this.styleLike ? this.activeStyle : '';
                ctms.news.mark(this.id, 'liked', op);
            },
            nodeClick(e) {
                var _that = this;
                // console.log(e.detail);
                var url = e.detail.node.attrs.src;
                _that.imgs.push(url)
                uni.previewImage({
                    urls: _that.imgs,
                    indicator: "default",
                    current: url,
                    longPressActions: {
                        itemList: ['保存图片'],
                        success: function(data) {
                            // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                            uni.showToast({
                                title: '平台禁止保存图片到本地！',
                                icon: 'none'
                            })
                        },
                        fail: function(err) {
                            // console.log(err.errMsg);
                        }
                    }
                });
            },
            callTo(tel) {
                uni.makePhoneCall({
                    phoneNumber: tel
                })
            },

            //浮窗按钮相关操作
            fabClick(e) {
                // utils.debug('点击了悬浮按钮')
            },
            fabTrigger(e) {
                var eindex = e.index;
                this.fabs.content[e.index].active = !e.item.active;

                if (!e.item.diyfn) {
                    //未设置这个difyfn字段的，无操作
                    return false;
                }
                var diyfn = e.item.diyfn,
                    dir = config.pageDir,
                    page;
                switch (diyfn) {
                    case 'home':
                        page = 'tabbar/index/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                    case 'news':
                        page = 'news/list/list';
                        break;
                    case 'user':
                        page = 'me/index';
                        break;
                    case 'notice':
                        page = 'tabbar/notice/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                }
                return uni.navigateTo({
                    url: dir + page
                })
            }
        },
        onLoad(o) {
            this.id = o.id;
            var res = ctms.news.detail(this.id);
            if (res) {
                this.detail = res;
            } else {
                this.getNewsDetail();
            }
            uni.setNavigationBarTitle({
                title: this.detail.title
            })
            ctms.news.viewed(this.id);
        },
        onReady() {
            var nodes = this.htmlNodes = htmlParser(this.detail.content);
            // for (var i in nodes) {
            //     var ps = nodes[i].children;
            //     for (var j in ps) {
            //         var p = ps[j];
            //         if (p.name === 'img') {
            //             console.log(p.attrs.src)
            // p.attrs.mode = 'aspectFit';
            //         };
            //     }
            // }
            // console.log(nodes)
        },
        onShow: function() {
            this.checkRecords();
        },
        onPullDownRefresh() {
            this.getNewsDetail();
            uni.stopPullDownRefresh();
        },
        onShareAppMessage() {
            return {
                title: this.detail.title,
                path: DETAIL_PAGE_PATH + '?id=' + this.id
            }
        },
        //标题栏按钮响应,仅在APP-PLUS下支持
        onNavigationBarButtonTap(e) {
            //#ifdef APP-PLUS
            uni.shareWithSystem({
                summary: this.detail.des + "登陆APP查看更多信息",
                href: this.h5_url + "?id=" + this.id,
                success() {
                    // 分享完成，请注意此时不一定是成功分享
                },
                fail() {
                    // 分享失败
                }
            })
            //#endif
            //#ifdef H5
            var summary = this.detail.des + "登陆APP查看更多信息";
            uni.setClipboardData({
                data: summary
            })
            //#endif
        }
    }
</script>

<style>
    @import url("detail.css");

    .des {
        text-align: left;
        text-indent: 2rem;
        padding: 2rem 1rem;
        color: #999;
    }

    .banner {
        height: 360rpx;
        overflow: hidden;
        position: relative;
        background-color: #ccc;
    }

    .banner-img {
        width: 100%;
    }

    .banner-title {
        max-height: 84rpx;
        overflow: hidden;
        position: absolute;
        left: 30rpx;
        bottom: 30rpx;
        width: 90%;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 42rpx;
        color: white;
        z-index: 11;
    }

    .article-meta {
        padding: 20rpx 40rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        color: gray;
    }

    .article-text {
        font-size: 26rpx;
        line-height: 50rpx;
        margin: 0 20rpx;
    }

    .article-author,
    .article-time {
        font-size: 30rpx;
    }

    .article-content {
        padding: 0 30rpx;
        overflow: hidden;
        font-size: 30rpx;
        margin-bottom: 30rpx;
    }

    .article-footer {
        font-size: 28rpx;
        line-height: 50rpx;
        margin: 0 10rpx;
    }

    .article-footer.active,
    .article-footer.active>span {
        color: #fd8208;
    }

    /* 修复详情内图片显示问题 */
    img {
        max-width: 100%;
    }
</style>