<template>
    <view>
        <!--时间-->
        <view v-if="msg.time" class="c-gap-bottom-large c-font-13 c-tac c-color-gray">{{ msg.time }}</view>
        <view
            v-for="(contentItem, contentIndex) in msg.content"
            :key="contentIndex"
        >
            <view v-if="contentItem.type === 'tips'" class="c-tac c-color-gray c-font-normal c-msg-tips">
                <view
                    v-for="(tip, i) in contentItem.text"
                    :key="'tip' + i"
                >{{ tip }}</view>
            </view>
            <!-- radioBtn, 非最后一项或者已选择后不可点 -->
            <vacc-im-radio
                v-else-if="contentItem.type === 'radioBtn'"
                :key="contentIndex"
                :item="contentItem"
                :is-last="isLast"
                @questionReply="questionReply"
                @showBottomBtn="showBottomBtn"
            />
            <!--消息-->
            <im-content
                v-else
                :tips="msg.tips"
                :avatar="msg.avatar"
                :avatar-link="msg.msUrl"
                :align="msg.from !== 0 ? 'left' : 'right'"
                :arrow-bg-color="msg.arrowBgColor"
                :bg-color="msg.bgColor || (msg.from !== 0 ? replyStl.bgColor : askStl.bgColor)"
                :text-color="msg.from !== 0 ? '#333' : '#FFF'"
                :msg-main-sty="{
                    fontSize: '17px',
                    lineHeight: '25px',
                    padding: contentItem.type === 'card' ? '0' : '.1rem .12rem',
                }"
                :triangle="true"
                :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">
                    <!-- type=loading -->
                    <view v-if="contentItem.type === 'loading'" :key="contentIndex">
                        <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:行内文字内容 -->
                    <vacc-im-text
                        v-if="contentItem.type === 'text'"
                        :key="contentIndex"
                        :item="contentItem"
                        class="c-inline"
                    />
                    <!-- 底部弹出, 非最后一项或者已点击后不可点 -->
                    <vacc-im-selectpop
                        v-if="contentItem.type === 'selectPop'"
                        :key="contentIndex"
                        :baby-info="babyInfo"
                        :item="contentItem"
                        :is-last="true"
                        @questionReply="questionReply"
                    />
                    <!-- 消息卡片 -->
                    <vacc-im-card
                        v-if="contentItem.type === 'card'"
                        :key="contentIndex"
                        :baby-info="babyInfo"
                        :item="contentItem"
                        @toJump="toJump"
                    />
                    <!-- 语音消息 -->
                    <vacc-im-audio
                        v-if="contentItem.type === 'audio'"
                        :key="contentIndex"
                        :item="contentItem"
                        @toJump="toJump"
                    />
                    <!-- eslint-enable vue/valid-v-for-->
                </view>
            </im-content>
        </view>
    </view>
</template>

<script>
/**
 * @file components/vaccine/VaccImMsg
 * @author zhangqian51
 * @categories 问诊组件
 * @tags [component]
 */
import VaccImText from './VaccImText';
import VaccImRadio from './VaccImRadio';
import VaccImSelectpop from './VaccImSelectpop';
import VaccImCard from './VaccImCard';
import VaccImAudio from './VaccImAudio';
import ImContent from '../brand/msg-im-cont';

import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    components: {
        VaccImText,
        ImContent,
        VaccImRadio,
        VaccImSelectpop,
        VaccImCard,
        VaccImAudio
    },
    props: {

        /**
         * 消息对象
         */
        msg: {
            type: Object,
            default() {
                return {};
            }
        },

        /**
         * 消息索引
         */
        index: {
            type: Number,
            default: 0
        },

        /**
         * qid
         */
        qid: {
            type: [Number, String],
            default: ''
        },

        /**
         * status
         */
        status: {
            type: String,
            default: ''
        },

        /**
         * msgInit 待补充
         */
        msgInit: {
            type: Boolean,
            default: false
        },

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

        /**
         * askStl 待补充
         */
        askStl: {
            type: Object,
            default() {
                return {
                    bgColor: '#00C8C8'
                };
            }
        },

        /**
         * mid 待补充
         */
        mid: {
            type: Number,
            default: 0
        },

        /**
         * num 待补充
         */
        num: {
            type: Number,
            default: 0
        },

        /**
         * disclaim 待补充
         */
        disclaim: {
            type: Object,
            default() {
                return {};
            }
        },

        /**
         * 登陆状态
         */
        isLogin: {
            type: Boolean
        },

        /**
         * 是否为最后一条消息
         */
        isLast: {
            type: Boolean
        },

        /**
         * imgSendFail 待补充
         */
        imgSendFail: {
            type: Boolean
        },

        /**
         * expertHead 待补充
         */
        expertHead: {
            type: Object,
            default() {
                return {};
            }
        },

        /**
         * audioId 待补充
         */
        audioId: {
            type: String,
            default: ''
        },

        /**
         * babyInfo 宝宝信息
         */
        babyInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            direction: {},
            fullWidth: false,
            isCard: false,
            audioWidth: '40px',
            isShowScan: false,
            radioSelected: null,
            isShowEexplain: false,
            isPlay: false,
            innerAudioContext: {
                paused: true
            }
        };
    },
    watch: {
        msg(v) {
            // 发现在消息列表前面插入记录时会更新后面的msg组件导致后面状态混乱，加msgInit来禁止此类行为
            !this.msgInit && this.formatMsg(v);
        }
    },
    created() {
        this.formatMsg(this.msg);
    },
    methods: {
        toJump(url) {
            url && navigate({url});
        },    
        formatMsg(msg) {
            this.isCard = msg.content.length === 1 && msg.content[0].type === 'card';
            let len = msg.content.length;
            while (len--) {
                let contentItem = msg.content[len];
                // innerLinks、radioBtn、selectPop 撑满
                // 修改：btnstyle=== 'oval'系问诊流程优化试验修改
                /* eslint-disable */
                if (
                    contentItem.type &&
                    [
                        'radioBtn',
                        'selectPop',
                        'card'
                    ].indexOf(contentItem.type) > -1 &&
                    !(contentItem.btnstyle && contentItem.btnstyle === 'oval' && contentItem.type !== 'innerLinks')
                ) {
                    this.fullWidth = true;
                }
                /* eslint-enable */
            }
            if (msg.type && msg.content && Array.isArray(msg.content) && msg.content[0]) {
                // 兼容长imdrugsugcard、druglist、guahao-card、drugstore的content
                this.msg.content = msg.content[0];
            }
        },
        questionReply(msg) {
            /**
            * 回复消息
            */
            this.$emit('questionReply', msg);
        },
        radioBtnTap(contentItem, btn, disable) {
            if (disable) {
                return;
            }
            this.radioSelected = btn.value;
            this.questionReply({
                callbackUrl: contentItem.callbackUrl,
                value: btn.value,
                name: btn.name
            });
        },
        /**
         * 页面跳走前展示底部按钮
         *
         * @param {Object} obj 展示底部跳转订单详情
         */
        showBottomBtn(obj) {
            this.$emit('showBottomBtn', obj);
        }
    }
};
</script>

<style lang="less" scoped>
.c-msg-tips {
    width: 288px;
    background: #E8E8E8;
    border-radius: 9px;
    padding: 10px 0;
    line-height: 20px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
}

.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: .15rem .13rem;
    background: #fff;
}
/deep/ .c-line-superfine-before {
   background: #fff;
}
.has-border-top {
    border-radius: 10px 10px 0 0;
}
</style>
