<template>
    <view id="moments">

        <view class="home-pic">
            <view class="home-pic-base">
                <view class="top-pic">
                    <image class="header" src="../../static/chat/index/test/header06.jpg" @tap="test"></image>
                </view>
                <view class="top-name">Liuxy</view>
            </view>
        </view>

        <view class="moments__post" v-for="(post,index) in posts" :key="index" :id="'post-'+index">
            <view class="post-left">
                <image class="post_header" :src="post.header_image"></image>
            </view>

            <view class="post_right">
                <text class="post-username">{{post.username}}</text>
                <view id="paragraph" class="paragraph">{{post.content.text}}</view>
                <!-- 相册 -->
                <view class="thumbnails">
                    <view :class="post.content.images.length === 1?'my-gallery':'thumbnail'"
                        v-for="(image, index_images) in post.content.images" :key="index_images">
                        <image class="gallery_img" lazy-load mode="aspectFill" :src="image" :data-src="image"
                            @tap="previewImage(post.content.images,index_images)"></image>
                    </view>
                </view>
                <!-- 资料条 -->
                <view class="toolbar">
                    <view class="timestamp">{{post.timestamp}}</view>
                    <view class="like" @tap="like(index)">
                        <image
                            :src="post.islike===0?'../../static/chat/index/islike.png':'../../static/chat/index/like.png'">
                        </image>
                    </view>
                    <view class="comment" @tap="comment(index)">
                        <image src="../../static/chat/index/comment.png"></image>
                    </view>
                </view>
                <!-- 赞／评论区 -->
                <view class="post-footer">
                    <view class="footer_content">
                        <image class="liked" src="../../static/chat/index/liked.png"></image>
                        <text class="nickname" v-for="(user,index_like) in post.like"
                            :key="index_like">{{user.username}}</text>
                    </view>
                    <view class="footer_content" v-for="(comment,comment_index) in post.comments.comment"
                        :key="comment_index" @tap="reply(index,comment_index)">
                        <text class="comment-nickname">{{comment.username}}: <text
                                class="comment-content">{{comment.content}}</text></text>
                    </view>
                </view>
            </view>
            <!-- 结束 post -->
        </view>

        <view class="foot" v-show="showInput">
            <chat-input @send-message="send_comment" @blur="blur" :focus="focus" :placeholder="input_placeholder">
            </chat-input>
            <!-- <chat-input @send-message="send_comment" @blur="blur" :placeholder="input_placeholder"></chat-input> -->
        </view>
        <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
    </view>

</template>

<script>
    import chatInput from '../../components/im-chat/chatinput.vue'; //input框
    import postData from '../../common/index/index.post.data.js'; //朋友圈数据

    export default {
        components: {
            chatInput
        },
        data() {
            return {
                posts: postData, //模拟数据
                user_id: 4,
                username: 'Liuxy',

                index: '',
                comment_index: '',

                input_placeholder: '评论', //占位内容
                focus: false, //是否自动聚焦输入框
                is_reply: false, //回复还是评论
                showInput: false, //评论输入框

                screenHeight: '', //屏幕高度(系统)
                platform: '',
                windowHeight: '', //可用窗口高度(不计入软键盘)

                loadMoreText: "加载中...",
                showLoadMore: false,
            }
        },
        mounted() {

            uni.getStorage({
                key: 'posts',
                success: function(res) {
                    console.log(res.data);
                    this.posts = res.data;
                }
            });

        },
        onLoad() {
            uni.getSystemInfo({ //获取设备信息
                success: (res) => {
                    this.screenHeight = res.screenHeight;
                    this.platform = res.platform;
                }
            });
            uni.startPullDownRefresh();
        },
        onShow() {
            uni.onWindowResize((res) => { //监听窗口尺寸变化,窗口尺寸不包括底部导航栏
                if (this.platform === 'ios') {
                    this.windowHeight = res.size.windowHeight;
                    this.adjust();
                } else {
                    if (this.screenHeight - res.size.windowHeight > 60 && this.windowHeight <= res.size
                        .windowHeight) {
                        this.windowHeight = res.size.windowHeight;
                        this.adjust();
                    }
                }
            });
        },
        onHide() {
            // uni.offWindowResize(); //取消监听窗口尺寸变化
        },
        onUnload() {
            this.max = 0,
                this.data = [],
                this.loadMoreText = "加载更多",
                this.showLoadMore = false;
        },
        onReachBottom() { //监听上拉触底事件
            console.log('onReachBottom');
            this.showLoadMore = true;
            setTimeout(() => {
                //获取数据
                if (this.posts.length < 20) { //测试数据
                    this.posts = this.posts.concat(this.posts);
                } else {
                    this.loadMoreText = "暂无更多";
                }
            }, 1000);
        },
        onPullDownRefresh() { //监听下拉刷新动作
            console.log('onPullDownRefresh');
            // 这里获取数据
            setTimeout(function() {
                //初始化数据
                uni.stopPullDownRefresh(); //停止下拉刷新
            }, 1000);
        },
        onNavigationBarButtonTap(e) { //监听标题栏点击事件
            if (e.index == 0) {
                uni.navigateTo({
                    url: '/pages/chat/publish'
                })
            }
        },
        computed: {

        },
        methods: {
            test() {
                this.navigateTo('../test/test');
            },
            navigateTo(url) {
                uni.navigateTo({
                    url: url
                });
            },
            like(index) {
                if (this.posts[index].islike === 0) {
                    this.posts[index].islike = 1;
                    this.posts[index].like.push({
                        "uid": this.user_id,
                        "username": "," + this.username
                    });
                } else {
                    this.posts[index].islike = 0;
                    this.posts[index].like.splice(this.posts[index].like.indexOf({
                        "uid": this.user_id,
                        "username": "," + this.username
                    }), 1);
                }
            },
            comment(index) {
                this.showInput = true; //调起input框
                this.focus = true;
                this.index = index;
            },
            adjust() { //当弹出软键盘发生评论动作时,调整页面位置pageScrollTo
                return;
                uni.createSelectorQuery().selectViewport().scrollOffset(res => {
                    var scrollTop = res.scrollTop;
                    let view = uni.createSelectorQuery().select("#post-" + this.index);
                    view.boundingClientRect(data => {
                        console.log("data:" + JSON.stringify(data));
                        console.log("手机屏幕高度:" + this.screenHeight);
                        console.log("竖直滚动位置" + scrollTop);
                        console.log("节点离页面顶部的距离为" + data.top);
                        console.log("节点高度为" + data.height);
                        console.log("窗口高度为" + this.windowHeight);

                        uni.pageScrollTo({
                            scrollTop: scrollTop - (this.windowHeight - (data.height + data
                                .top + 45)), //一顿乱算
                            // scrollTop: 50, 
                            duration: 300
                        });
                    }).exec();
                }).exec();
            },
            reply(index, comment_index) {
                this.is_reply = true; //回复中
                this.showInput = true; //调起input框
                let replyTo = this.posts[index].comments.comment[comment_index].username;
                this.input_placeholder = '回复' + replyTo;
                this.index = index; //post索引
                this.comment_index = comment_index; //评论索引
                this.focus = true;
            },
            blur: function() {
                this.init_input();
            },
            send_comment: function(message) {

                if (this.is_reply) {
                    var reply_username = this.posts[this.index].comments.comment[this.comment_index].username;
                    var comment_content = '回复' + reply_username + ':' + message.content;
                } else {
                    var comment_content = message.content;
                }
                this.posts[this.index].comments.total += 1;
                this.posts[this.index].comments.comment.push({
                    "uid": this.user_id,
                    "username": this.username,
                    "content": comment_content //直接获取input中的值
                });
                this.init_input();
            },
            init_input() {
                this.showInput = false;
                this.focus = false;
                this.input_placeholder = '评论';
                this.is_reply = false;
            },
            previewImage(imageList, image_index) {
                var current = imageList[image_index];
                uni.previewImage({
                    current: current,
                    urls: imageList
                });
            },
            goPublish() {
                uni.navigateTo({
                    url: './publish/publish',
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            }
        }
    }
</script>

<style scoped>
    @import url("../../common/index/index.css");
</style>
