<template>
    <view class="record">
        <view class="chatContent">
            <scroll-view
                id="body"
                class="chatList"
                :scroll-y="true"
                :scroll-with-animation="scrollWithAnimation"
                :scroll-top="scrollTop"
                :scroll-into-view="scrollToMessage"
                @scrolltoupper="onScrollToUpper"
            >
                <view id="viewHight" class="viewHight">
                    <view
                        :class="
                            item.msgType == '1' && item.direction == 'right'
                                ? 'mw-content mw-content-right mw-message'
                                : item.msgType == '1' && item.direction == 'left'
                                ? 'mw-content mw-message'
                                : 'mw-message mw-content-content'
                        "
                        :data-index="index"
                        @tap.stop.prevent="shwoImage"
                        v-for="(item, index) in messageList"
                        :key="index"
                    >
                        <view class="col-1" :style="'display: ' + (item.msgType === '1' ? 'block' : 'none')">
                            <image :src="patientData.patImage" v-if="item.direction === 'left'"></image>
                            <image :src="userData.image" v-else></image>
                        </view>

                        <view class="text" :style="'display: ' + (item.msgType === '1' ? 'block' : 'none')">
                            <view
                                :class="
                                    item.direction === 'left' && item.picture
                                        ? 'message-content message-received background-color-fff'
                                        : item.direction === 'right' && item.picture
                                        ? 'message-content message-send background-color-fff'
                                        : item.direction === 'left'
                                        ? 'message-content message-received'
                                        : 'message-content message-send'
                                "
                            >
                                <text v-if="item.consultText ? true : false">{{ item.consultText }}</text>
                                <image :data-picture="item.msgID" :src="item.picture" alt="" v-if="item.picture ? true : false" @tap="priviewImage"></image>
                            </view>
                        </view>

                        <view class="col-12" :style="'display: ' + (item.msgType === '2' || item.msgType === '3' ? 'block' : 'none')">
                            <view v-if="item.msgType === '2' ? true : false">
                                {{ item.direction === 'left' ? '对方撤回了一条消息' : '你撤回了一条消息' }}
                                <text class="re-edit" :style="'display: ' + (item.direction === 'right' && item.isModity ? 'inline-block' : 'none')">重新编辑</text>
                            </view>
                            <text class="timespan" :style="'display: ' + (item.msgType === '3' ? 'block' : 'none')">{{ item.sendTime }}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="row bottomtip">
            <view class="col-4 blank"></view>
            <view class="col-4 tip">
                接诊结束
                <text class="detail-btn" @tap="viewDetail">详情</text>
            </view>
            <view class="col-4 blank"></view>
        </view>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
// pages/myConsultRoom/page/treatmentrecord/treatmentrecord.js
import { $http } from '../../../../config/https.js';
export default {
    data() {
        return {
            messageList: [],

            patientData: {
                patImage: ''
            },

            userData: {
                image: ''
            },

            pictureData: [],
            moreMsgFlag: '',
            refreshing: false,
            scrollWithAnimation: '',
            scrollTop: 0,
            scrollToMessage: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData(
            {
                patientData: Cache.get('patientData'),
                userData: Cache.get('userData')
            },
            () => {
                this.getConsultRecord();
            }
        );
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        /**
         * 发送文本消息
         */
        getConsultRecord: function () {
            try {
                let { messageList, moreMsgFlag, noMoreFlag } = this;
                const patientData = Cache.get('patientData');
                const userData = Cache.get('userData');
                let toUser = 'patient' + patientData.patID;
                let frUser = 'user' + userData.userID;
                let lastMsgID = '';
                if (messageList.length > 0) {
                    lastMsgID = messageList[0].ID;
                }
                let params = {
                    params: [
                        {
                            admID: patientData.admID,
                            patID: patientData.patID,
                            frUser: frUser,
                            toUser: toUser,
                            lastMsgID: lastMsgID
                        }
                    ]
                };
                $http.post('urlDeault', this, {
                    code: '02090005',
                    data: params,
                    success: function (res) {
                        let errorCode = res.errorCode;
                        if (errorCode == '0') {
                            let messageList = res.result.msgData;
                            let pictureData = [];
                            for (var i = 0; i < messageList.length; i++) {
                                if (messageList[i].picture != '' && messageList[i].picture != undefined && messageList[i].msgType == '1') {
                                    let pictureObj = {};
                                    pictureObj.index = i;
                                    pictureObj.src = messageList[i].picture;
                                    pictureData.push(pictureObj);
                                }
                            }
                            this.setData({
                                messageList: messageList,
                                pictureData: pictureData
                            });
                        }
                    }
                });
            } catch (error) {
                console.log('CatchClause', error);
                console.log('CatchClause', error);
                this.setData({
                    messageList: [],
                    moreMsgFlag: 'N',
                    refreshing: false
                });
            }
        },

        shwoImage: function (e) {
            var index = e.currentTarget.dataset.index;
            let { pictureData, messageArr } = this;
            if (this.messageList[index].picture != '' && this.messageList[index].picture != undefined) {
                var currentIndex = '';
                for (var i = 0; i < pictureData.length; i++) {
                    if (pictureData[i].index == index) {
                        currentIndex = i;
                    }
                }
                Cache.set('tempPicture', pictureData);
                uni.navigateTo({
                    url: '../showPicture/showPicture?&currentIndex=' + currentIndex
                });
            }
        },

        onScrollToUpper() {
            console.log('占位：函数 onScrollToUpper 未声明');
        },

        // 查看详情：只读查看 病历/诊断/医嘱 录入内容（不可保存编辑）
        viewDetail() {
            uni.navigateTo({
                url: '../../../entryWrite/page/Entry/Entry?select=0&readonly=1'
            });
        },

        priviewImage() {
            console.log('占位：函数 priviewImage 未声明');
        }
    }
};
</script>
<style>
/* @import '../treatment/treatment.css'; */

.record {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
}

.bottomtip {
    border-top: 2px solid #888;
    height: 100rpx;
    width: 100%;
}

.blank {
    height: 50rpx;
    line-height: 100rpx;
    border-bottom: 1px solid #888;
}

.tip {
    height: 100%;
    min-width: 200rpx;
    text-align: center;
    color: #888;
    line-height: 100rpx;
    margin-top: 40rpx;
}

.chatContent {
    height: calc(100% - 100rpx);
    width: 100%;
    overflow-y: auto;
}

.chatList {
    width: 100%;
    height: 100%;
}

.viewHight {
    width: 100%;
    box-sizing: border-box;
    padding: 12rpx 0;
}

/* ============== 消息气泡 ============== */
.mw-content {
    margin: 16rpx 12rpx;
    display: flex;
    align-items: flex-start;
    font-size: 30rpx;
    box-sizing: border-box;
}

.mw-message {
    width: calc(100% - 24rpx);
}

.mw-content .col-1 {
    height: 80rpx;
    width: 80rpx;
    flex-shrink: 0;
    background-color: #5cadff;
    border-radius: 50%;
    text-align: center;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
}

.mw-content .col-1 image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: block;
}

.mw-content .text {
    max-width: 70vw;
}

.mw-content-right {
    flex-direction: row-reverse;
}

.mw-content-content {
    text-align: center;
    margin: 12rpx 0;
    font-size: 22rpx;
    color: #8a93a0;
}

.mw-content-content .re-edit {
    color: #1e90ff;
    margin-left: 12rpx;
    font-weight: normal;
}

.message-content {
    display: inline-block;
    outline: none;
    font-size: 30rpx;
    position: relative;
    word-wrap: break-word;
    word-break: break-all;
    padding: 16rpx 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    max-width: 70vw;
    line-height: 1.5;
    box-sizing: border-box;
}

.message-content image {
    min-width: 240rpx;
    max-width: 320rpx;
    max-height: 600rpx;
    display: block;
}

.message-received {
    background-color: #ffffff;
    margin-left: 16rpx;
    border-radius: 4rpx 16rpx 16rpx 16rpx;
    text-align: left;
}

.message-send {
    background-color: #1e90ff;
    margin-right: 16rpx;
    border-radius: 16rpx 4rpx 16rpx 16rpx;
    color: #ffffff;
}

.message-send.background-color-fff,
.message-received.background-color-fff {
    background-color: #ffffff;
    color: inherit;
}

.timespan {
    display: inline-block;
    padding: 4rpx 16rpx;
    border-radius: 16rpx;
    margin-top: 8rpx;
    color: #8a93a0;
    background-color: #eef0f3;
    font-size: 22rpx;
}

/* ============== 底部提示栏 ============== */
.row.bottomtip {
    display: flex;
    align-items: center;
}

.bottomtip .col-4 {
    flex: 1;
}

.detail-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 1px solid #888;
}

.detail-btn {
    padding: 0 28rpx;
    height: 60rpx;
    box-sizing: border-box;
    line-height: 60rpx;
    background: #1e90ff;
    color: #fff;
    font-size: 26rpx;
    border-radius: 30rpx;
}
</style>
