<template>
    <view>
        <!--时间-->
        <view v-if="msg.time" class="c-gap-bottom-large c-font-normal c-tac c-color-gray">{{ msg.time }}</view>
        <!--系统提示-->
        <view
            v-if="msg.custom === 'topTip'"
            class="top-tip c-gap-bottom-large c-font-normal c-tac"
            :style="{
                'text-align': msg.hasBg && msg.align ? msg.align : '',
            }"
        >
            <view class="c-inline-block" :class="[msg.hasBg === 1 && 'c-im-msg-sys-bg', msg.isCenter === 1 && 'c-tac']">
                <!-- eslint-disable vue/valid-v-for-->
                <template v-for="contentItem in msg.content">
                    <!-- 在线提示 -->
                    <text v-if="contentItem.type === 'dot'" class="c-im-msg-dot"/>
                    <!-- 跳转 -->
                    <c-navigate
                        v-else-if="contentItem.type === 'innerLink'"
                        :url="contentItem.msUrl || contentItem.sfUrl"
                        class="c-color-green c-inline"
                        class-name="c-inline"
                    >
                        {{ contentItem.text }}
                    </c-navigate>
                    <!-- 弹层 -->
                    <view
                        v-else-if="contentItem.type === 'openModal'"
                        class="c-color-green c-inline"
                        @tap.stop="onOpenDisclaim"
                    >
                        {{ contentItem.text }}
                    </view>
                    <!--倒计时-->
                    <view v-else-if="contentItem.type === 'countdown'" class="c-color-gray">
                        <im-countdown
                            :item="contentItem"
                            :is-login="isLogin"
                            @questionReply="questionReply"
                        />
                    </view>
                    <!-- 评论弹层 -->
                    <view
                        v-else-if="contentItem.type === 'comment'"
                        class="c-color-green c-inline"
                        @tap="onPopupComment(contentItem)"
                    >
                        {{ contentItem.text }}
                    </view>
                    <!--隐私声明-->
                    <im-private v-else-if="contentItem.type === 'private'" :item="contentItem"/>
                    <im-case
                        v-else-if="contentItem.type === 'case'"
                        :item="contentItem"
                        @open="onPopup"
                    />
                    <!--弹窗-->
                    <view
                        v-else-if="contentItem.type === 'popup'"
                        class="c-inline"
                        :class="contentItem.color ? contentItem.color : 'c-color-green'"
                        @tap="onPopup(contentItem)"
                    >
                        {{ contentItem.text }}
                    </view>
                    <im-change-phone-new
                        v-else-if="contentItem.type === 'newChangePhone'"
                        :key="contentItem.type"
                        ref="upphoneref"
                        :item="contentItem"
                        @popup="onPopup"
                    />
                    <view
                        v-else-if="contentItem.text"
                        class="c-color-gray"
                        :class="contentItem.type === 'textline' ? '' : 'c-inline'"
                    >{{ contentItem.text }}</view>
                    <image
                        v-else-if="contentItem.type === 'img'"
                        :src="contentItem.iconurl"
                        class="c-inline-block"
                        mode="widthFix"
                        :style="{
                            'display': contentItem.display,
                            'margin': contentItem.margin ? contentItem.margin : '-4px 5px 0 0',
                            width: contentItem.iconwidth,
                        }"
                    />

                    <!-- 多图上传 -->
                    <im-image-collect
                        v-else-if="contentItem.type === 'uploadImg'"
                        :content="contentItem.list"
                        :limit="contentItem.list[1].limit"
                        :upload-img-url="contentItem.list[1].uploadCallback"
                        :submit-img-url="contentItem.list[1].submitCallback"
                    />
                    <!-- 更换手机号 -->
                    <im-change-phone
                        v-else-if="contentItem.type === 'changePhone'"
                        ref="phoneref"
                        :item="contentItem"
                        :msg-id="msg.messageID"
                        @popup="onPopup"
                    />

                    <view v-else class="c-color-gray c-inline">
                        {{ contentItem }}
                    </view>
                </template>
                <!-- eslint-enable vue/valid-v-for-->
            </view>
        </view>
        <!-- 对话开始/结束 -->
        <view v-else-if="msg.type === 'divider'" class="c-im-msg-status c-gap-bottom-large">
            <view class="line"/>
            <view class="txt c-color-gray c-font-normal">{{ msg.content[0].text }}</view>
        </view>
        <!-- 医生卡 -->
        <view v-else-if="msg.type === 'card'" class="c-gap-bottom-large">
            <im-card-doctor :item="msg.content[0]" :url="msg.msUrl || msg.sfUrl"/>
        </view>
        <!-- 定向：选择服务卡 -->
        <view v-else-if="msg.type === 'panel'" class="c-gap-bottom-large">
            <im-card-service
                :item="msg.content[0]"
                :is-last="isLast"
                :timestamp="msg.timestamp"
            />
        </view>
        <!-- 非定向：选择服务卡 -->
        <view v-else-if="msg.type === 'service-card'" class="c-gap-bottom-large">
            <im-card-nodrc
                :item="msg.content[0]"
                :is-last="isLast"
                :timestamp="msg.timestamp"
                :qid="qid"
                @questionReply="questionReply"
                @popup="onPopup"
            />
        </view>
        <!-- 定向：服务选择、服务保障 -->
        <view v-else-if="msg.type === 'card-servicelist-expert'">
            <im-card-service-list-expert
                :item="msg.content[0]"
                :expert-name="expertName"
                @reloadPage="reloadPage"
                @popup="onPopup"
                @scrollToBottom="scrollToBottom"
            />
        </view>
        <!-- 引导用户关注公众号 -->
        <view v-else-if="msg.type === 'guide-card'">
            <im-card-wx
                :item="msg.content[0]"
                :is-last="isLast"
                :timestamp="msg.timestamp"
            />
        </view>
        <!-- 定向：医生卡 -->
        <view v-else-if="msg.type === 'directed-recommend-card'" class="directed-doctor-list">
            <view class="c-im-msg-status c-gap-bottom-large">
                <view class="line"/>
                <view class="txt c-color-gray c-font-13">{{ msg.text }}</view>
            </view>
            <view
                v-for="(expert, expertIndex) in msg.content"
                :key="expertIndex"
                class="item-card-wrap"
            >
                <view class="item-type-card-wz" :class="{'has-border-top': expertIndex === 0}">
                    <card-wz-doctor
                        :expert="expert"
                        @popup="onInfoPopup"
                    />
                </view>
                <view class="c-line-superfine-before"/>
            </view>
            <view class="check-more c-flex" @tap="onGo(msg.button.callbackUrl)">
                <view>{{ msg.button.text }}</view>
                <view class="c-gap-left-small check-more-icon-wrap">
                    <c-icon
                        name="right"
                        font-size="12px"
                        :style="{
                            color: '#1F1F1F',
                            height: '16px',
                            width: '16px',
                            display: 'block',
                            textAlign: 'center',
                        }"
                    />
                </view>
            </view>
        </view>
        <!-- authorize(好大夫非定向手机号授权) -->
        <im-authorize
            v-else-if="msg.type === 'authorize'"
            :item="msg.content[0]"
            :is-last="isLast"
            @questionReply="questionReply"
        />
        <!-- 三甲医生卡 -->
        <view v-else-if="msg.type === 'pay-card'" class="c-gap-bottom-large">
            <im-card-pay
                :item="msg.content[0]"
                :qid="qid"
                :status="status"
                :is-last="isLast"
                :timestamp="msg.timestamp"
                @questionReply="questionReply"
            />
        </view>
        <!-- 三甲医生卡vs免费 -->
        <view v-else-if="msg.type === 'compare-card'" class="c-gap-bottom-large">
            <im-card-compare
                :item="msg.content[0]"
                :is-last="isLast"
                :timestamp="msg.timestamp"
                @questionReply="questionReply"
            />
        </view>
        <!-- 复诊卡品牌链接卡 -->
        <view v-else-if="msg.type === 'return-visit-card'" class="c-gap-bottom-large">
            <im-card-return-visit
                :item="msg.content"
                :is-last="isLast"
                :qid="qid"
                :ms-url="msg.msUrl"
                :timestamp="msg.timestamp"
            />
        </view>
        <!-- 药品店铺卡 -->
        <view v-else-if="msg.type === 'drugstore'">
            <!-- 卡片下线 -->
            <!-- <im-card-drugstore :item="msg.content" @questionReply="questionReply"/> -->
        </view>
        <!-- 药品咨询卡 -->
        <view
            v-else-if="msg.type === 'druglist'"
            class="c-gap-bottom-large"
            @tap.stop="$emit('msgTap', msg)"
        >
            <im-card-druglist
                :item="msg.content"
                :is-last="isLast"
                @questionReply="questionReply"
            />
        </view>
        <!-- 药品推荐药单卡 -->
        <view v-else-if="msg.type === 'drugSugCard'" class="c-gap-bottom-large">
            <im-card-drugsug-simple
                v-if="isImPopup"
                :item="msg.content"
                :qid="qid"
                @questionReply="questionReply"
                @applyDrugs="applyDrugs"
            />
            <im-card-drugsug
                v-else
                :item="msg.content"
                :qid="qid"
                @questionReply="questionReply"
                @popup="onInfoPopup"
            />
        </view>

        <!-- 问诊后接挂号 -->
        <view v-else-if="msg.type === 'guahao-card'" class="c-gap-bottom-large">
            <im-card-gh :item="msg.content"/>
        </view>
        <!-- im banner 海报 -->
        <view v-else-if="msg.type === 'im-poster-banner'" class="c-gap-bottom-large">
            <im-banner :item="msg.content[0]" @popup="onPopup"/>
            <im-coupon-tip v-if="couponTip && couponTip.type" :info="couponTip"/>
        </view>
        <!-- 权益保障-回复是否及时提问卡片 -->
        <view v-else-if="msg.type === 'guarantee-card'" class="c-gap-bottom-large">
            <im-guarantee-card :item="msg.content[0]" @popup="onPopup"/>
        </view>
        <!-- 科普内容推荐卡片 -->
        <view v-else-if="msg.type === 'expert-faq'" class="c-gap-bottom-large">
            <im-popular-science :item="msg.content[0]" @popup="onPopup"/>
        </view>
        <view v-else-if="msg.type === 'login-btn'">
            <im-login-btn
                :item="msg.content[0]"
                @questionReply="questionReply"
            />
        </view>
        <!-- 自测单/多选组件 -->
        <view v-else-if="msg.type === 'multiChoiceBtn' || msg.type === 'multiSelectionBtn'" class="select-box-wrap">
            <im-input-select-new
                :msg="msg"
                @questionReply="questionReply"
                @onZcSend="onZcSend"
            />
        </view>
        <view v-else-if="msg.type === 'im-appeal-banner'" class="c-gap-bottom-large">
            <im-enter-banner
                :msg="msg"
            />
            <im-coupon-tip v-if="couponTip && couponTip.type" :info="couponTip"/>
        </view>
        <!--消息-->
        <im-content
            v-else
            ref="imContent"
            :popup-info="msg.popupInfo || {}"
            :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 || (isImg ? '#f4f4f4' : msg.from !== 0 ? replyStl.bgColor : askStl.bgColor)"
            :text-color="'#1F1F1F'"
            :block-style="msg.content
                && msg.content.length === 1
                && ((msg.content[0].type === 'text' && !msg.resetUrl) || msg.content[0].type === 'audio')
                ? 'inline-block' : 'block'"
            :read-state-icon="(msg.timestamp * 1000) > 1636776000000 ? msg.readState : 0"
            :show-read-state-txt="showReadStateTxt"
            :modify="modify"
            :msg-main-sty="
                isImg
                    ? {
                        padding: 0,
                        width: '150px',
                        border: '1px solid #ebebeb',
                    }
                    : isPanel || isTextList || msg.noPadding === '1' || isCardNoPadding
                        ? {
                            padding: 0,
                        }
                        : {}
            "
            :triangle="!isImg && !isPanel"
            :is-flex="!fullWidth"
            :ask-reset="!!msg.resetUrl"
            :side-icon="msg.sideIcon"
            :send-state="msg.sendState"
            :msg="msg"
            @askReset="$emit('askReset', msg)"
            @tap="$emit('msgTap', msg)"
            @popup="$emit('onPopup', msg)"
            @nextAudio="nextAudio"
        >
            <view class="c-im-msg-text">
                <!-- eslint-disable vue/valid-v-for-->
                <block v-for="(contentItem, key) 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'"
                        :item="contentItem"
                        class="c-inline"
                    />
                    <!-- type=textline:块级文字内容 -->
                    <im-text-line
                        v-if="contentItem.type === 'textline' && !contentItem.isLoginMsg"
                        :item="contentItem"
                        @questionReply="questionReply"
                        @popup="onPopup"
                    />
                    <template-mars target="h5">
                        <im-text-line
                            v-if="contentItem.type === 'textline' && contentItem.isLoginMsg"
                            :item="contentItem"
                            @questionReply="questionReply"
                            @popup="onPopup"
                        />
                    </template-mars>
                    <block v-if="contentItem.type === 'textlist'">
                        <!-- 处方药购买的im弹框的用药人信息 -->
                        <im-text-list-drugsug
                            v-if="isImPopup"
                            :item="contentItem"
                            class="c-inline"
                        />
                        <im-text-list
                            v-else
                            :item="contentItem"
                            class="c-inline"
                        />
                    </block>
                    <im-question-list
                        v-if="contentItem.type === 'questionList'"
                        :item="contentItem"
                    />
                    <im-satisfaction
                        v-if="contentItem.type === 'satisfaction'"
                        :item="contentItem"
                        @onDialog="onDialog"
                    />
                    <!-- type=patient:问诊购药编辑、确认患者信息 -->
                    <im-patient-confirm
                        v-if="contentItem.type === 'patient'"
                        :item="contentItem"
                        :qid="qid"
                        @questionReply="questionReply"
                    />
                    <!-- type=selectBtn:付费选择 -->
                    <im-selbtn
                        v-if="contentItem.type === 'selectBtn'"
                        :item="contentItem"
                        :disclaim="disclaim"
                        :is-last="isLast"
                        @questionReply="questionReply"
                    />
                    <!-- 诊中挂号 -->
                    <im-wz-to-gh
                        v-if="contentItem.type === 'wz2gh'"
                        :item="contentItem"
                    />
                    <!-- type=private:隐私声明 -->
                    <im-private v-if="contentItem.type === 'private'" :item="contentItem"/>
                    <!-- type=phone:手机号验证码登录 -->
                    <template-mars target="h5">
                        <im-login
                            v-if="contentItem.type === 'keyboard'"
                            :item="contentItem"
                            :is-login="isLogin"
                            :is-last="isLast"
                            @questionReply="questionReply"
                            @heightChange="$emit('heightChange', $event)"
                        />
                        <!--问诊全流程优化小流量需求-->
                        <im-login-origin
                            v-if="contentItem.type === 'imform'"
                            :item="contentItem"
                            :is-login="isLogin"
                            :is-last="isLast"
                            @questionReply="questionReply"
                            @heightChange="$emit('heightChange', $event)"
                        />
                    </template-mars>
                    <im-infocollect
                        v-if="contentItem.type === 'phonecollect'"
                        :item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                    />
                    <!-- type=countDown:倒计时 -->
                    <im-countdown
                        v-if="contentItem.type === 'countdown'"
                        :item="contentItem"
                        :is-login="isLogin"
                        @questionReply="questionReply"
                    />
                    <!-- type=img:单张图片 -->
                    <im-image
                        v-if="contentItem.type === 'img'"
                        :item="contentItem"
                        @imageViewerOpen="$emit('imageViewerOpen', $event)"
                    />
                    <!-- type=upload:上传图片 -->
                    <im-upload
                        v-if="contentItem.type === 'upload'"
                        :item="contentItem"
                        @beforeUpload="$emit('beforeUpload', $event)"
                        @previewImg="previewImg"
                        @uploadSuccess="uploadSuccess"
                        @uploadError="uploadError"
                        @uploadAll="onUploadAll"
                    />
                    <!-- type=audio:音频 -->
                    <im-audio
                        v-if="contentItem.type === 'audio'"
                        :item="contentItem"
                        @audioplay="onaudioplay"
                        @showToolTip="showToolTip"
                        @nextAudio="nextAudio"
                    />
                    <!-- type=tel -->
                    <im-tel v-if="contentItem.type === 'tel'" :item="contentItem"/>
                    <!-- radioBtn, 非最后一项或者已选择后不可点 -->
                    <im-radio-btn
                        v-if="contentItem.type === 'radioBtn'"
                        :item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                        @showBottomBtn="showBottomBtn"
                        @uploadSuccess="uploadSuccess"
                        @uploadAll="onUploadAll"
                        @previewImg="previewImg"
                        @uploadError="uploadError"
                    />
                    <!-- 内部链接，短链 -->
                    <view v-if="contentItem.type === 'innerLink'" class="c-inline">
                        <c-navigate
                            v-if="contentItem.msUrl || contentItem.sfUrl"
                            :url="contentItem.msUrl || contentItem.sfUrl"
                            :extra="contentItem.clkmark"
                            class-name="c-inline"
                        >
                            <view class="c-color-green c-inline">
                                {{ contentItem.linkText }}
                            </view>
                        </c-navigate>
                        <template-mars target="h5">
                            <a
                                v-if="contentItem.tcUrl"
                                :href="contentItem.tcUrl"
                                class="c-color-green c-inline"
                            >
                                {{ contentItem.linkText }}
                            </a>
                        </template-mars>
                    </view>
                    <im-case
                        v-if="contentItem.type === 'case'"
                        :item="contentItem"
                        @open="onPopup"
                    />
                    <!-- 内部链接，底部按钮样式 -->
                    <im-innerlinks
                        v-if="contentItem.type === 'innerLinks'"
                        :content-item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                        @warningPop="onPopup"
                    />
                    <!-- 内部链接，底部按钮样式 -->
                    <im-innerbtns
                        v-if="contentItem.type === 'innerBtns'"
                        :content-item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                    />
                    <!-- 肺炎平台ajax post给百度知道-->
                    <im-ajax
                        v-if="contentItem.type === 'ajax'"
                        :content-item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                    />
                    <!-- 三张图片上传 imageUpload -->
                    <im-image-upload
                        v-if="contentItem.type === 'imageUpload'"
                        :content-item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                    />
                    <!-- 底部弹出, 非最后一项或者已点击后不可点 -->
                    <im-selectpop
                        v-if="contentItem.type === 'selectPop'"
                        :item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                    />
                    <im-selectpop-ai
                        v-if="contentItem.type === 'selectPopAi'"
                        :item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                    />
                    <im-picker-inner
                        v-if="contentItem.type === 'selectBottom'"
                        :item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                    />
                    <!-- operate(选择问诊人) -->
                    <im-operate
                        v-if="contentItem.type === 'operatePop'"
                        :key="key"
                        :content-item="contentItem"
                        @questionReply="questionReply"
                    />
                    <!-- navi -->
                    <im-navi
                        v-if="contentItem.type === 'navi'"
                        :key="key"
                        :item="contentItem"
                        @questionReply="questionReply"
                    />
                    <im-panel-info
                        v-if="contentItem.type === 'panelInfo'"
                        :key="key"
                        :item="contentItem"
                        @questionReply="questionReply"
                    />
                    <im-goodslist
                        v-if="contentItem.type === 'goodsList'"
                        :key="key"
                        :item="contentItem"
                        @questionReply="questionReply"
                    />
                    <im-goods
                        v-if="contentItem.type === 'goods'"
                        :key="key"
                        :item="contentItem"
                        @questionReply="questionReply"
                    />
                    <!-- 多图上传 -->
                    <im-img-collect
                        v-if="contentItem.type === 'img-collect'"
                        :key="key"
                        :item="contentItem"
                        :is-last="isLast"
                        @questionReply="questionReply"
                    />
                    <!-- 评估结果 -->
                    <im-eva
                        v-if="contentItem.type === 'eva'"
                        :key="key"
                        :item="contentItem"
                    />
                    <!-- 文章 -->
                    <im-article
                        v-if="contentItem.type === 'article'"
                        :key="key"
                        :qid="qid"
                        :item="contentItem"
                    />
                    <!-- 问诊表 -->
                    <im-qa
                        v-if="contentItem.type === 'qa'"
                        :key="key"
                        :item="contentItem"
                    />
                    <!-- 消息评价 -->
                    <im-msg-comment
                        v-if="contentItem.type === 'msgComment'"
                        :key="key"
                        :item="contentItem"
                        :message-i-d="msg.messageID"
                        @open="onPopup"
                    />
                    <!--  换科室 -->
                    <im-sel-department
                        v-if="contentItem.type === 'selDepartment'"
                        :key="key"
                        :item="contentItem"
                        @questionReply="questionReply"
                    />
                    <im-patient-info-collect
                        v-if="contentItem.type === 'patientInfoCollect'"
                        :item="contentItem"
                        :qid="qid"
                        @popup="onInfoPopup"
                    />
                    <!-- 问诊病历卡-->
                    <im-medical-record
                        v-else-if="contentItem.type === 'medical_record-card'"
                        :item="contentItem"
                        :edited="msg.edited"
                        :imgs="msg.imgs"
                        :index="index"
                        @questionReply="questionReply"
                        @popup="onInfoPopup"
                        @onMedicalCardEdited="onMedicalCardEdited"
                    />
                    <im-referral
                        v-if="contentItem.type === 'referral'"
                        :item="contentItem"
                    />
                    <!-- 体检报告解读卡 -->
                    <im-health-examination-record
                        v-if="contentItem.type === 'medical_examination_report'"
                        :item="contentItem"
                    />
                    <!-- 健康建议（推荐商品） -->
                    <im-health-advice
                        v-if="contentItem.type === 'healthAdvice'"
                        :item="contentItem"
                        :qid="qid"
                    />
                    <!-- 电话咨询、咨询小结等卡片-->
                    <im-common-card
                        v-if="contentItem.type === 'common-card'"
                        :item="contentItem"
                        :img-upload-list="imgUploadList"
                        @questionReply="questionReply"
                        @showBottomBtn="showBottomBtn"
                        @onDialog="onDialog"
                    />
                    <im-consult-edit
                        v-if="contentItem.type === 'consultEdit'"
                        :msg-info="contentItem"
                        @popup="onGroupPopup(contentItem)"
                    />
                    <im-text-public
                        v-if="contentItem.type === 'privacyNotice'"
                        :item="contentItem"
                    />
                </block>
                <!-- eslint-enable vue/valid-v-for-->
            </view>
        </im-content>
    </view>
</template>

<script>
/**
 * @file components/im/im-msg
 * @author haoyan
 * @categories 问诊组件
 * @tags [component]
 */
import CNavigate from '../common/navigate';
import ImText from './im-text';
import ImTextLine from './im-text-line';
import ImTextList from './im-text-list';
import ImQuestionList from './im-question-list';
import ImSatisfaction from './im-satisfaction';
import ImOperate from './im-operate';
import ImInnerlinks from './im-innerlinks';
import ImInnerbtns from './im-innerbtns';
import ImAjax from './im-ajax';
import ImImageUpload from './im-image-upload';
import ImPrivate from './im-private';
import ImLogin from './im-login';
import ImLoginOrigin from './im-login-origin';
import ImInfocollect from './im-infocollect';
import ImSelbtn from './im-selbtn';
import ImCountdown from './im-countdown';
import ImImage from './im-image';
import ImAudio from './im-audio';
import ImCardDoctor from './im-card-doctor';
import ImCardGh from './im-card-gh';
import ImCardService from './im-card-service';
import ImCardNodrc from './im-card-nodrc';
import ImCardPay from './im-card-pay';
import ImCardCompare from './im-card-compare';
import ImCardDruglist from './im-card-druglist';
import ImCardDrugsug from './im-card-drugsug';
import ImCardDrugsugSimple from './im-card-drugsug-simple';
import ImTextListDrugsug from './im-text-list-drugsug';
import ImPanelInfo from './im-panel-info';
import ImPatientConfirm from './im-patient-confirm';
import ImGoodslist from './im-goodslist';
import ImGoods from './im-goods';
import ImTel from './im-tel';
import ImSelectpop from './im-selectpop';
import ImSelectpopAi from './im-selectpop-ai';
import ImPickerInner from './im-picker-inner';
import ImUpload from './im-upload';
import ImAuthorize from './im-authorize';
import ImNavi from './im-navi';
import ImBanner from './im-banner';
import ImCase from './im-case';
import ImImgCollect from './im-img-collect';
import ImRadioBtn from './im-radio-btn';
import ImEva from './im-eva';
import ImArticle from './im-article';
import ImQa from './im-qa';
import ImContent from '../brand/msg-im-cont';
import ImMsgComment from './im-msg-comment';
import ImImageCollect from './im-image-collect';
import ImChangePhone from './im-change-phone';
import ImChangePhoneNew from './im-change-phone-new';
import ImWzToGh from './ImWzToGh';
import ImSelDepartment from './ImSelDepartment';
import ImGuaranteeCard from './ImGuaranteeCard';
import ImPatientInfoCollect from './ImPatientInfoCollect';
import ImMedicalRecord from './im-medical-record';
import ImReferral from './im-referral';
import imPopularScience from './im-popular-science';
import ImHealthExaminationRecord from './im-health-examination-record';
import imLoginBtn from './im-login-btn';
import ImHealthAdvice from './im-health-advice';
import ImCommonCard from './im-common-card';
import ImCouponTip from './im-coupon-tip';
import ImInputSelectNew from './im-input-select-new';
import {send} from '../../utils/log';
import {throttle} from '../../utils/core';
import CardWzDoctor from '../search/card-wz-doctor';
import {navigate} from '../../utils/navigate';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import imConsultEdit from './im-consult-edit';
import ImCardWx from './imCardWx';
import ImCardReturnVisit from './im-card-return-visit';
import ImCardServiceListExpert from './im-card-service-list-expert';
import ImTextPublic from './im-text-public';
import ImEnterBanner from './im-enter-banner/index';

export default {
    config: {
        component: true,
    },
    components: {
        CNavigate,
        ImText,
        ImTextLine,
        ImTextList,
        ImOperate,
        ImInnerlinks,
        ImInnerbtns,
        ImAjax,
        ImImageUpload,
        ImPrivate,
        ImSelbtn,
        ImLogin,
        ImLoginOrigin,
        ImInfocollect,
        ImCountdown,
        ImImage,
        ImAudio,
        ImCardDoctor,
        ImCardGh,
        ImCardService,
        ImCardNodrc,
        ImCardPay,
        ImCardCompare,
        ImCardDruglist,
        ImCardDrugsug,
        ImCardDrugsugSimple,
        ImTextListDrugsug,
        ImPanelInfo,
        ImPatientConfirm,
        ImReferral,
        ImTel,
        ImSelectpop,
        ImSelectpopAi,
        ImPickerInner,
        ImUpload,
        ImAuthorize,
        ImNavi,
        ImContent,
        ImBanner,
        ImCase,
        ImRadioBtn,
        ImImgCollect,
        ImGoodslist,
        ImGoods,
        ImEva,
        ImArticle,
        ImQa,
        ImMsgComment,
        ImImageCollect,
        ImChangePhone,
        ImWzToGh,
        ImSelDepartment,
        ImGuaranteeCard,
        ImPatientInfoCollect,
        ImChangePhoneNew,
        ImMedicalRecord,
        CardWzDoctor,
        ImQuestionList,
        imPopularScience,
        ImSatisfaction,
        imLoginBtn,
        ImHealthAdvice,
        ImCommonCard,
        ImCouponTip,
        imConsultEdit,
        ImHealthExaminationRecord,
        CIcon,
        ImCardWx,
        ImCardReturnVisit,
        ImTextPublic,
        ImInputSelectNew,
        ImCardServiceListExpert,
        ImEnterBanner,
    },
    props: {

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

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

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

        /**
         * 图片数据
         */
        imgUploadList: {
            type: Array,
            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: '#B2EEEE',
                };
            },
        },

        /**
         * 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: '',
        },

        /**
         * 是否是弹窗IM
         */
        isImPopup: {
            type: Boolean,
            default: false,
        },

        /**
         * 医生姓名
         */
        expertName: {
            type: String,
            default: ''
        },

        /**
         * 是否隐藏修改信息功能
         */
        modify: {
            type: Object,
            default() {
                return {
                    text: '修改信息',
                };
            },
        },

        /**
         * 优惠券提示，优惠券小黄条
         */
        couponTip: {
            type: Object,
            default() {
                return {};
            }
        },
    },
    data() {
        return {
            direction: {},
            fullWidth: false,
            isImg: false,
            isAudio: false,
            isPanel: false,
            isCardNoPadding: false,
            isTextList: false,
            audioWidth: '40px',
            isShowScan: false,
            radioSelected: null,
            isShowEexplain: false,
            isPlay: false,
            innerAudioContext: {
                paused: true,
            },
            showReadStateTxt: false,
        };
    },
    watch: {
        msg(v) {
            // 发现在消息列表前面插入记录时会更新后面的msg组件导致后面状态混乱，加msgInit来禁止此类行为
            !this.msgInit && this.formatMsg(v);
        },
    },
    created() {
        this.formatMsg(this.msg);
    },
    methods: {
        onGo(url) {
            url && navigate({url});
        },
        formatMsg(msg) {
            if (!(msg && msg.content)) {
                return;
            }

            this.isImg = msg.content.length === 1 && msg.content[0].type === 'img';
            this.isAudio = msg.content.length === 1 && msg.content[0].type === 'audio';
            this.isPanel = msg.content.length === 1 && msg.content[0].type === 'panelInfo';
            this.isCardNoPadding = msg.content.length > 0
                && (msg.content[0].type === 'medical_record-card'
                    || msg.content[0].type === 'medical_examination_report'
                    || msg.content[0].type === 'questionList');
            this.isTextList = msg.content.length === 1
                && (msg.content[0].type === 'textlist' || msg.content[0].type === 'patientInfoCollect');
            let len = msg.content.length;
            while (len--) {
                let contentItem = msg.content[len];
                // innerLinks、radioBtn、selectPop 撑满
                // 修改：btnstyle=== 'oval'系问诊流程优化试验修改
                // 修改：增加btnstyle === 'none' 问诊信息收集优化试验 时，文本消息不充满
                /* eslint-disable */
                if (
                    contentItem.type &&
                    [
                        'innerLinks',
                        'textlist',
                        'upload',
                        'radioBtn',
                        'selectPop',
                        'imageUpload',
                        'panelInfo',
                        'eva',
                        'article',
                        'wz2gh',
                        'medical_examination_report',
                        'patientInfoCollect'
                    ].indexOf(contentItem.type) > -1 &&
                    !(contentItem.btnstyle && (contentItem.btnstyle === 'oval' || contentItem.btnstyle === 'none') && contentItem.type !== 'innerLinks')
                ) {
                    this.fullWidth = true;
                }
                /* eslint-enable */
            }
            if (msg.type && (msg.type === 'drugSugCard' || msg.type === 'druglist'
                || msg.type === 'guahao-card' || msg.type === 'drugstore')
                && 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);
        },
        /**
         * @description: 处方卡返回的drugs
         */
        applyDrugs(drugs) {
            this.$emit('applyDrugs', drugs);
        },
        uploadSuccess(data, msg) {
            this.$emit('uploadSuccess', data, msg);
        },
        previewImg(data, msg) {
            this.$emit('previewImg', data, msg);
        },
        uploadError(data, msg) {
            this.$emit('uploadError', data, msg);
        },
        radioBtnTap(contentItem, btn, disable) {
            if (disable) {
                return;
            }
            this.radioSelected = btn.value;
            this.questionReply({
                callbackUrl: contentItem.callbackUrl,
                value: btn.value,
                name: btn.name,
            });
            send({
                type: 'b',
                action: 'radioBtn',
            });
        },
        onOpenDisclaim() {
            /**
            * 打开免责声明弹层
            */
            this.$emit('onOpenDisclaim');
        },
        onPopup: throttle(function (item, isOpen) {
            /**
            * 打开底部弹层,支付节流
            */
            if (item.type === 'newchangephone') {
                item.popup.messageID = this.msg.messageID;
            }
            this.$emit('onPopup', item, isOpen);
        }, 2 * 1000),
        /**
         * 打开底部弹层
         */
        onInfoPopup(item, isOpen) {
            this.$emit('onPopup', item, isOpen);
        },
        // 打开弹窗组组件
        onGroupPopup(item) {
            this.$emit('onGroupPopup', item);
        },
        // 背景板点击增加点击埋点
        onPopupComment: throttle(function (item, isOpen) {
            /**
            * 打开底部弹层,支付节流
            */
            this.$emit('onPopup', item, isOpen);
            send({
                type: 'b',
                action: 'chat_comment_msg_click',
                extra: {
                    qid: this.qid,
                },
            });
        }, 2 * 1000),
        updatePhone(phone) {
            this.$refs.upphoneref[0].setPhone(phone);
        },
        updatePhoneNumber(phone) {
            this.$refs.phoneref[0].setPhone(phone);
        },
        /**
         * 病历卡保存成功
         *
         * @param {Object} obj 保存成功提交的病情信息
         */
        onMedicalCardEdited(obj) {
            this.$emit('onMedicalCardEdited', obj);
        },
        /**
         * 页面跳走前展示底部按钮
         *
         * @param {Object} obj 展示底部跳转订单详情
         */
        showBottomBtn(obj) {
            this.$emit('showBottomBtn', obj);
        },
        /**
         * 触发弹窗的回调
         */
        onDialog(info) {
            this.$emit('onDialog', info);
        },
        /**
         * 刷新页面
         */
        reloadPage() {
            this.$emit('reloadPage');
        },
        playAudio() {
            this.$refs.audio && this.$refs.audio[0].onTap();
        },
        nextAudio() {
            this.msg.readState = 0;
            this.msg.readStateIcon = 0;
            this.showReadStateTxt = false;
            this.$emit('nextAudio');
        },
        updateShowReadStateTxt(bool) {
            this.showReadStateTxt = bool;
        },
        onaudioplay() {
            this.nextAudio();
        },
        showToolTip() {
            this.$refs.imContent.showToolTip();
        },
        onZcSend(msg) {
            this.$emit('onZcSend', msg);
        },
        onUploadAll(data, tool) {
            this.$emit('uploadAll', data, tool);
        },
        scrollToBottom() {
            this.$emit('scrollToBottom');
        }
    }
};
</script>

<style lang="less" scoped>
.c-im-msg-sys-bg {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.08rem 0.12rem;
    line-height: 0.2rem;
    border-radius: 9px;
    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: #333;
        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;
}

.top-tip {
    // width: 78%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.select-box-wrap {
    padding: 0 50px;
}
</style>
