<template>
    <div>
        当前浏览
        <div class="base">
            <div>
                <img :src="goodsDetail.thumbnail" class="image" />
            </div>
            <div style="margin-left: 13px">
                <a @click="linkToGoods(goodsDetail.goodsId,goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
                <div>
                    <span style="color: red;">￥{{ goodsDetail.price }}</span>
                </div>
                <el-button class="click-button" type="danger" v-if="!sendFlag" size="mini" @click="submitSendMessage()"
                    plain>发送</el-button>
            </div>
        </div>
        <hr class="separate" />
    </div>
</template>

<script>
import { Tag, button } from 'element-ui'
import { mapState, mapGetters } from "vuex";
import SocketInstance from "@/im-server/socket-instance";
export default {
    data() {
        return {
            sendFlag: false,
        }
    },
    computed: {
        ...mapGetters(["talkItems"]),
        ...mapState({
            id: (state) => state.user.id,
            index_name: (state) => state.dialogue.index_name,
            toUser: (state) => state.user.toUser,
        }),
    },
    mounted(){
    
    },
    components: {
        "el-tag": Tag,
        "el-button": button,
        Storage
    },
    methods: {
        toGoods() {
            alert("toGoods")
        },
        toMessage() {
            alert(JSON.stringify(this.toUser))
            alert("toMessage")
        },
        // 回车键发送消息回调事件
        submitSendMessage() {
            console.log("发送");
            const context = this.goodsDetail
            const record = {
                operation_type: "MESSAGE",
                to: this.toUser.userId,
                from: this.id,
                message_type: "GOODS",
                context: context,
                talk_id: this.toUser.id,
            };
            SocketInstance.emit("event_talk", record);

            this.$store.commit("UPDATE_TALK_ITEM", {
                index_name: this.index_name,
                draft_text: "",
            });

            /**
             * 插入数据
             */
            const insterChat = {
                createTime: this.formateDateAndTimeToString(new Date()),
                fromUser: this.id,
                toUser: record.to,
                isRead: false,
                messageType: "GOODS",
                text: context,
                float: "right",
            };

            console.log("insterChat", insterChat);
            // console.log("插入对话记录",'')
            // 插入对话记录
            this.$store.commit("PUSH_DIALOGUE", insterChat);
            // 获取聊天面板元素节点
            let el = document.getElementById("lumenChatPanel");
            // 判断的滚动条是否在底部
            let isBottom =
                Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;

            if (isBottom || record.to == this.id) {
                this.$nextTick(() => {
                    el.scrollTop = el.scrollHeight;
                });
            } else {
                this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
                    content: content,
                    nickname: record.name,
                });
            }
        },

        formateDateAndTimeToString(date) {
            var hours = date.getHours();
            var mins = date.getMinutes();
            var secs = date.getSeconds();
            var msecs = date.getMilliseconds();
            if (hours < 10) hours = "0" + hours;
            if (mins < 10) mins = "0" + mins;
            if (secs < 10) secs = "0" + secs;
            if (msecs < 10) secs = "0" + msecs;
            return (
                this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
            );
        },

        formatDateToString(date) {
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            if (month < 10) month = "0" + month;
            if (day < 10) day = "0" + day;
            return year + "-" + month + "-" + day;
        },
    },
    props: {
        goodsDetail: {
            type: Object,
            default: null,
        },
    },
}

</script>

<style scoped lang="less">
.store-button {
    background-color: white;
    border-color: #F56C6C;
}

.base {
    margin-top: 5px;
    height: 120px;
    display: flex;

    div {
        overflow: hidden;
        text-overflow:ellipsis;
        margin-top: 8px;
        white-space: nowrap;
        margin-top: 8px;
    }

    .image {
        height: 100px;
        margin-top: 3px;
        width: 100px
    }

}
.click-button{
    margin-top: 8px;
    background-color: white;
    border-color: #F56C6C;
}
.separate {
    margin-top: 8px;
}
</style>