<template>
    <view>
        <!--时间-->
        <view v-if="msg.time" class="c-gap-bottom-xmiddle c-font-normal c-tac c-color-gray">{{ msg.time }}</view>
        <!-- 对话开始/结束 -->
        <view v-if="msg.type === 'divider'" class="c-im-msg-status c-gap-bottom-large">
            <view class="line"/>
            <view class="txt c-color-gray c-font-13">{{ msg.content[0].text }}</view>
        </view>
        <!-- 评价卡 -->
        <im-evaluation
            v-if="msg.type === 'evaluation'"
            class="c-gap-bottom-large"
            :msg="msg"
            :servicer="servicer"
            @sendEvaluation="sendEvaluation"
        />
        <!-- 系统消息 -->
        <view v-else-if="msg.type === 'system'" class="c-gap-bottom-large c-font-13 c-system c-color-gray">
            <view class="c-system-box">{{ msg.content[0].text }}</view>
        </view>
        <!--消息-->
        <im-content
            v-else
            :show-read-status="msg.from === 0"
            :show-send-status="msg.from === 0"
            :read-status="msg.status"
            :send-state="msg.sendState"
            :tips="msg.tips"
            :avatar="msg.avatar"
            :avatar-link="msg.msUrl"
            :name="msg.from === 1 ? msg.name : undefined"
            :align="msg.from !== 0 ? 'left' : 'right'"
            :arrow-bg-color="msg.arrowBgColor"
            :bg-color="msg.bgColor || (isImg ? '#f4f4f4' : msg.from !== 0 ? replyStl.bgColor : msg.type === 'goodsList' || msg.type === 'orderList' ? '#fff' : askStl.bgColor)"
            :text-color="msg.from !== 0 ? '#333' : '#1F1F1F'"
            :msg-main-sty="msgMainSty"
            :triangle="showTriangle"
            :is-flex="!fullWidth"
            :ask-reset="!!msg.resetUrl"
            :side-icon="msg.sideIcon"
            @askReset="$emit('askReset', msg)"
            @tap="$emit('msgTap', msg)"
        >
            <view class="c-im-msg-text">
                <!-- eslint-disable vue/valid-v-for-->
                <block v-for="contentItem in msg.content">
                    <!-- type=loading -->
                    <view v-if="contentItem.type === 'loading'">
                        <image
                            src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=647574333,2757197276&fm=179&app=35&f=GIF?w=72&h=12"
                            class="c-inline-block"
                            style="width: 30px; height: 5px"
                        />
                    </view>
                    <!-- type=text:行内文字内容 -->
                    <im-text
                        v-if="contentItem.type === 'text'
                            || contentItem.type === 'common'
                            || contentItem.type === 'offline'"
                        :item="contentItem"
                        class="c-inline"
                    />
                    <!-- 快捷问答 -->
                    <im-welcome
                        v-if="contentItem.type === 'welcome'"
                        :info="contentItem"
                        @questionReply="questionReply"
                    />
                    <!-- type=img:单张图片 -->
                    <im-image
                        v-if="contentItem.type === 'img'"
                        :item="contentItem"
                        @imageViewerOpen="$emit('imageViewerOpen', $event)"
                    />
                    <!-- type=audio:音频 -->
                    <im-audio v-if="contentItem.type === 'audio'" :item="contentItem"/>
                    <!-- 订单卡 -->
                    <im-order-card v-if="contentItem.type === 'orderList'" :info="contentItem"/>
                    <!-- 商品卡 -->
                    <im-good-card v-if="contentItem.type === 'goodsList'" :info="contentItem"/>
                </block>
                <!-- eslint-enable vue/valid-v-for-->
            </view>
        </im-content>
    </view>
</template>

<script>
/**
 * @file 商城im消息盒子
 * @author kangpuqing01
 * @tags [component]
 */
import ImText from '@components/im/im-text';
import ImImage from '@components/im/im-image';
import ImAudio from '@components/im/im-audio';
import ImContent from '@components/brand/msg-im-cont';
import ImGoodCard from './im-good-card.vue';
import ImOrderCard from './im-order-card.vue';
import ImEvaluation from './im-evaluation.vue';
import ImWelcome from './im-welcome.vue';
import {throttle} from '@utils/core';

export default {
    config: {
        component: true
    },
    components: {
        ImText,
        ImImage,
        ImAudio,
        ImContent,
        ImGoodCard,
        ImOrderCard,
        ImEvaluation,
        ImWelcome
    },
    props: {
        /**
         * 消息对象
         */
        msg: {
            type: Object,
            default() {
                return {};
            }
        },

        /**
         * replyStl 待补充
         */
        replyStl: {
            type: Object,
            default() {
                return {
                    bgColor: '#FFF'
                };
            }
        },

        /**
         * askStl 待补充
         */
        askStl: {
            type: Object,
            default() {
                return {
                    bgColor: '#FFDCD8'
                };
            }
        },
        servicer: {
            type: String
        }
    },
    data() {
        return {
            fullWidth: false,
            isImg: false,
            isAudio: false,
            isPlay: false
        };
    },
    watch: {
        msg(v) {
            this.formatMsg(v);
        }
    },
    created() {
        this.formatMsg(this.msg);
    },
    computed: {
        showTriangle() {
            const curContent = this.msg && this.msg.content && this.msg.content[0];
            const hideMap = ['img', 'orderList', 'goodsList'];
            const hide = hideMap.some(item => {
                return (curContent && item === curContent.type);
            });

            if (hide) {
                return false;
            }
            return true;
        },
        msgMainSty() {
            let style = {};
            if (this.isImg) {
                style = {
                    padding: 0,
                    width: '155px',
                    border: '1px solid #ebebeb',
                };
            }
            if ((this.msg.type === 'goodsList') || (this.msg.noPadding === '1')) {
                style = {padding: 0};
            }
            return style;
        }
    },
    methods: {
        formatMsg(msg) {
            // 满屏宽度消息类型
            const fullWidthTypes = ['textlist', 'upload', 'imageUpload'];

            this.isImg = msg.content.length === 1 && msg.content[0].type === 'img';
            this.isAudio = msg.content.length === 1 && msg.content[0].type === 'audio';

            let len = msg.content.length;
            while (len--) {
                let contentItem = msg.content[len];
                // innerLinks、radioBtn、selectPop 撑满
                // 修改：btnstyle=== 'oval'系问诊流程优化试验修改
                /* eslint-disable */
                if (contentItem.type && fullWidthTypes.indexOf(contentItem.type) > -1) {
                    this.fullWidth = true;
                }
                /* eslint-enable */
            }
        },
        questionReply(msg) {
            /**
             * 回复消息
             */
            this.$emit('questionReply', msg);
        },
        onPopup: throttle(function (item, isOpen) {
            // this.$emit('onPopup', item, isOpen);
        }, 2 * 1000),
        sendEvaluation(data) {
            this.$emit('sendEvaluation', data);
        }
    }
};
</script>

<style lang="less" scoped>
.c-im-msg-sys-bg {
    background-color: rgba(0, 0, 0, 0.03);
    padding: 0.08rem 0.1rem;
    border-radius: 5px;
    text-align: left;
}
.c-im-msg-dot {
    background-color: #00c8c8;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin: 2px 5px 5px 0;
}

.c-im-msg-text {
    word-wrap: break-word;
    max-width: 100%;
}

.c-im-msg-status {
    position: relative;
    text-align: center;
    .line {
        position: absolute;
        top: 11px;
        left: 0;
        right: 0;
        border-top: 1px solid #ddd;
        width: 60%;
        margin: auto;
    }
    .txt {
        position: relative;
        text-align: center;
        background-color: #f4f4f4;
        margin: auto;
        padding: 0 0.08rem;
        display: inline-block;
    }
}
.directed-doctor-list {
    border-radius: 0 0 10px 10px;

    .check-more {
        height: 44px;
        font-size: 14px;
        color: #333333;
        line-height: 44px;
        background: #fff;
        border-radius: 0 0 10px 10px;
        .check-more-icon-wrap {
            width: 16px;
            height: 16px;
            background: #f5f5f5;
            border-radius: 50%;
            line-height: 16px;
            .ms-icon-right {
                text-align: center;
            }
            .sw-6__icon {
                display: block;
            }
        }
    }
}
.c-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-card-wrap {
    position: relative;
}
.item-type-card-wz {
    padding: 0.15rem 0.13rem;
    background: #fff;
}
/deep/ .c-line-superfine-before {
    background: #fff;
}
.has-border-top {
    border-radius: 10px 10px 0 0;
}
.c-system {
    display: flex;
    justify-content: center;
    &-box {
        max-width: 87%;
        padding: 0.08rem 0.12rem;
        background-color: #e9e9e9;
        text-align: center;
        border-radius: 8px;
    }
}
</style>
