<template>
    <div class="news newsB">
        <van-sticky>
            <van-notice-bar
                text="RAEX宇宙，立即下载"
                @click="download"
                background="#3ab20010"
                color="#3ab200"
                mode="link"
                v-if="!inApp && isShare"
            >
                <template #left-icon>
                    <img class="app-icon" src="@assets/raex_icon.png" alt="" />
                </template>
            </van-notice-bar>
        </van-sticky>
        <div class="detail" v-html="info.detail"></div>
        <div class="news-btn" v-if="info.link">
            <van-button round block type="primary" @click="goNext(info)">{{ info.buttonName }}</van-button>
            <div class="share-content" @click="like">
                <img v-if="info.liked" src="../../assets/like.png" alt="" />
                <img v-else src="../../assets/icon-dianzan1.png" alt="" />
                <span>{{ info.likes }}</span>
            </div>
            <div class="share-content" @click="share">
                <img src="../../assets/icon-fenxiang.png" alt="" />
                <span>分享</span>
            </div>
        </div>

        <div class="news-btn btns-only" v-else>
            <div class="share-content" @click="like">
                <img v-if="info.liked" src="../../assets/like.png" alt="" />
                <img v-else src="../../assets/icon-dianzan1.png" alt="" />
                <span>{{ info.likes }}</span>
            </div>
            <div class="share-content" @click="share">
                <img src="../../assets/icon-fenxiang.png" alt="" />
                <span>分享</span>
            </div>
        </div>
    </div>
</template>

<script>
import banner from '../../mixins/banner';
import resolveUrl from 'resolve-url';
let inApp = /#cordova#/i.test(navigator.userAgent);
export default {
    data() {
        return {
            info: {},
            inApp,
            isShare: false
        };
    },
    mixins: [banner],
    mounted() {
        this.getDetail();
        if (this.$route.query.share === 'true' || this.$route.query.share === true) {
            this.isShare = true;
        }
    },
    computed: {
        shareText() {
            return `『绿洲新闻』${resolveUrl(this.$baseUrl, '9th/newsDetail?id=' + this.info.id + '&share=true')}「${
                this.info.title
            }」`;
        }
    },
    methods: {
        download() {
            window.location.href = 'https://www.raex.vip/static/download_raex.html';
        },
        getDetail(str = '') {
            if (str) {
                this.$toast.success(str);
            } else {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
            }
            this.$http
                .get('/news/get/' + this.$route.query.id)
                .then(res => {
                    if (!str) {
                        this.$toast.clear();
                    }
                    this.info = res;
                })
                .catch(e => {
                    this.$toast.clear();
                });
        },
        like() {
            this.checkLogin().then(() => {
                if (this.info.liked) {
                    this.$http.get(`newsLike/${this.info.id}/unlike`).then(res => {
                        this.$toast.success('取消成功');
                        this.info.liked = false;
                        this.info.likes--;
                    });
                } else {
                    this.$http.get(`newsLike/${this.info.id}/like`).then(res => {
                        this.$toast.success('点赞成功');
                        this.info.liked = true;
                        this.info.likes++;
                    });
                }
            });
        },
        share() {
            this.$copyText(this.shareText).then(
                e => {
                    this.$dialog.alert({
                        title: '链接已复制',
                        message: this.shareText,
                        confirmButtonText: '去微信粘贴给好友'
                    });
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        }
    }
};
</script>

<style lang="less" scoped>
.news {
    background-color: @bg;
    box-sizing: border-box;
    .detail {
        background-color: @bg;
        /deep/ p {
            background-color: @bg;
            margin: 0;
            img {
                display: block;
            }
        }
    }
    .bottom(16px);

    &.newsB {
        .bottom(56px);
    }
}

.news-btn {
    position: fixed;
    z-index: 20;
    background: @bg3;
    padding: 9px 16px 9px 16px;
    .flex();
    left: 0;
    right: 0;
    bottom: 0;
    .bottom(9px);

    /deep/.van-button {
        &.van-button--disabled {
            background: #303133;
            color: @text3;
            opacity: 1;
        }
    }

    .van-button + .share-content {
        margin-left: 20px;
    }
}
.share-content {
    .flex();
    justify-content: center;
    white-space: nowrap;
    min-width: 60px;
    img {
        width: 24px;
        height: 24px;
        display: block;
    }
    span {
        font-size: 14px;
        color: @text3;
        margin-left: 3px;
        line-height: 32px;
    }
}

.btns-only {
    .share-content {
        width: 50%;
    }
}

.app-icon {
    width: 30px;
    height: 30px;
}

/deep/.van-notice-bar__content {
    padding-left: 16px;
}
</style>
