<template>
    <!-- eslint-disable -->
    <view>
        <c-popup
            :show="show"
            :show-close="popupParams.showClose"
            :show-close-handler="popupParams.showCloseHandler"
            :close-icon="popupParams.closeIcon"
            :show-title-line="popupParams.showTitleLine"
            :row-tile="popupParams.rowTile"
            :title="popupParams.title || ''"
            :background="popupParams.background || '#FFFFFF'"
            max-height="80%"
            :scroll-view="scrollView"
            :btns="popupParams.btns"
            @close="onClose"
            @masktap="onClose"
            @btntap="btnTap"
        >
            <!-- 权益保障弹窗 -->
            <view
                v-if="popupInfo.type && popupInfo.type === 'guarantee'"
                class="gurantee-card"
            >
                <c-icon
                    class="gurantee-card-close"
                    name="close-circle"
                    font-size="17px"
                    @tap.stop="onClose"
                />
                <image
                    src="https://med-fe.cdn.bcebos.com/wz%2Fqybz%2Fpopupbg.png"
                    class="gurantee-card-popupbg"
                    mode="widthFix"
                />
                <image
                    v-if="popupInfo.brandIcon"
                    :src="popupInfo.brandIcon"
                    class="gurantee-card-brandicon c-gap-top-large"
                    mode="widthFix"
                />
                <image
                    v-if="popupInfo.headPoster"
                    :src="popupInfo.headPoster"
                    class="gurantee-card-headicon c-gap-top-small"
                    mode="widthFix"
                />
                <view
                    v-if="popupInfo.authList && popupInfo.authList.length > 0"
                    class="gurantee-card-svcwrap"
                >
                    <view
                        v-for="(item,index) in popupInfo.authList"
                        :key="index"
                        class="gurantee-card-svcitem"
                    >
                        <view class="gurantee-card-iconwrap">
                            <image
                                v-if="item.icon"
                                :src="item.icon"
                                class="gurantee-card-svcicon"
                                mode="widthFix"
                            />
                        </view>
                        <view class="gurantee-card-infowrap">
                            <view class="gurantee-card-title">{{ item.title }}</view>
                            <view>{{ item.subtitle }}</view>
                        </view>
                    </view>
                </view>
                <view
                    v-if="popupInfo.bottomTip"
                    class="gurantee-card-bottomtip"
                >
                    <image
                        v-if="popupInfo.bottomTip.icon"
                        :src="popupInfo.bottomTip.icon"
                        class="gurantee-card-tipicon"
                        mode="widthFix"
                    />
                    <view v-if="popupInfo.bottomTip.text">{{ popupInfo.bottomTip.text }}</view>
                </view>
            </view>
            <!-- 常见问题（就诊信息卡片） -->
            <view v-if="popupInfo.type && popupInfo.type === 'question'">
                <view v-if="popupInfo.paras && popupInfo.paras.length > 0" class="pop-question">
                    <view
                        v-for="(para,i) in popupInfo.paras"
                        :key="i"
                        class="pop-question-para"
                    >
                        <view class="c-color-green">{{ para.title }}</view>
                        <view v-if="para.list && para.list.length > 0">
                            <view
                                v-for="(text,j) in para.list"
                                :key="j"
                                class="pop-question-text"
                            >
                                <text class="c-gap-right-small">•</text>
                                <text>{{ text }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 历史就诊人弹层 -->
            <view v-if="popupInfo.type && popupInfo.type === 'patientList'">
                <view v-if="popupInfo.list && popupInfo.list.length > 0">
                    <view
                        v-for="(info,index) in popupInfo.list"
                        :key="index"
                        class="pop-patient-list"
                        @tap="onTap(info)"
                    >
                        <text
                            v-if="info.name"
                            class="c-gap-right"
                        >{{ info.name }}</text>
                        <text v-if="info.genderAge">{{ info.genderAge }}</text>
                        <view class="c-line-superfine-after"/>
                    </view>
                </view>
                <view v-if="popupInfo.addPatient" class="pop-patient-ph"/>
                <view v-if="popupInfo.addPatient" class="pop-patient-addwrap">
                    <view
                        class="pop-patient-add"
                        @tap="onTap(popupInfo.addPatient)"
                    >
                        <c-icon
                            name="plus"
                            class="c-gap-right c-color-green"
                            font-size="18px"
                        />
                        <text v-if="popupInfo.addPatient.text">{{ popupInfo.addPatient.text }}</text>
                    </view>
                </view>
            </view>
            <view
                v-if="popupInfo.type && popupInfo.type === 'patientForm'"
                id="popup-slide-patient-form"
                class="popup-slide-patient-form"
            >
                <patient-info
                    :info-item="popupInfo"
                    :show-input="show"
                    :qid="qid"
                    @update="onUpdate"
                    @updatePhys="onUpdatePhys"
                />
            </view>
            <view v-if="popupInfo.type && popupInfo.type === 'recommend'" class="c-gap-inner-bottom">
                <!-- 诊中科普推荐 -->
                <view class="recommend-head c-gap-top-large">
                    <view
                        class="c-v-bottom"
                    >
                        <text
                            class="c-font-medium c-color-333 c-font-19"
                        >{{ yidian.title }}</text>
                        <image
                            class="c-gap-left-small"
                            src="https://med-fe.cdn.bcebos.com/wz/kepu/ydicon.png"
                            mode="widthFix"
                            style="width: 72px; height: 16px; margin-bottom: 1px;"
                        />
                    </view>
                    <view
                        class="c-color-333 c-gap-top-small c-font-15 c-font-regular"
                    >
                        <view v-if="recommendType === 'drug'">{{ yidian.subTitle }}</view>
                        <view>{{ yidian.alias }}</view>
                    </view>
                    <view
                        class="c-color-gray c-gap-top-small c-line-clamp2"
                    >
                        {{ doctorInfo }}
                    </view>
                </view>
                <template v-for="(item, i) in abstract">
                    <view
                        :key="i"
                        class="c-gap-top-large c-color-333 c-inline-block"
                    >
                        <view
                            class="c-v-center c-font-17 c-font-regular"
                        >
                            <image
                                class="c-gap-right-small"
                                :src="item.icon"
                                mode="widthFix"
                                style="width: 18px; height: 18px;"
                            />
                            <text class="c-font-medium c-font-17">{{ item.title }}</text>
                        </view>
                        <view v-if="item.ctnObj.length > 0" class="c-gap-top-small">
                            <view
                                v-for="(ctn, idx) in item.ctnObj"
                                :key="idx"
                            >
                                <view
                                    v-if="ctn.showFlag"
                                    style="position: relative; line-height: 24px;"
                                    class="c-gap-top-small"
                                >
                                    <text
                                        class="c-gap-right-small"
                                    >•</text>
                                    <text v-if="ctn.showFlag">{{ ctn.shortStr }}</text>
                                    <text v-if="ctn.showFlag">...</text>
                                    <text
                                        v-if="ctn.showFlag"
                                        class="more-info-btn c-color-999"
                                        @tap="openDetail(i, idx)"
                                    > 展开</text>
                                    <text v-if="!ctn.showFlag">{{ ctn.fullStr }}</text>
                                </view>
                                <view
                                    v-else
                                    style="position: relative; line-height: 24px;"
                                    class="c-gap-top-small"
                                >
                                    <text class="c-gap-right-small">•</text>
                                    <text>{{ ctn.fullStr }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </template>
                <view v-if="toJumpShop && recommendType === 'drug' && moreList.length === 0" class="c-tac c-to-shop">
                    <view
                        class="c-v-center"
                        @tap="jump(toJumpShop.swanUrl, {from_btn: 'shop'})"
                    >
                        <text>去百度健康商城</text>
                        <image
                            class="c-gap-left-small"
                            mode="widthFix"
                            style="width: 16px; height: 16px;"
                            src="https://med-fe.cdn.bcebos.com/wz/kepu/shop.png"
                        />
                    </view>
                </view>
                <template v-if="moreList.length > 0 && recommendType !== 'none'">
                    <view
                        class="c-gap-top-large"
                        style="margin-left: -17px; margin-right: -17px; height: 8px; background: #f5f5f5;"
                    />
                    <view
                        class="c-gap-top-large c-flexbox c-v-center"
                    >
                        <text class="c-font-medium c-font-19 c-color-333">{{ recommendText }}</text>
                    </view>
                    <scroll-view
                        class="c-gap-top-large c-font-normal"
                        scroll-x
                        style="white-space: nowrap;"
                    >
                        <template v-if="recommendType === 'drug'">
                            <view
                                v-for="(item, idx) in moreList"
                                :key="idx"
                                class="c-inline-block drug-item-wrap c-gap-right-middle c-span10"
                            >
                                <view
                                    class="drug-item-ctn-wrap c-v-top"
                                    @tap="jump(item.swanUrl, {from_btn: 'drug'})"
                                >
                                    <view>
                                        <image
                                            :src="item.img"
                                            class="drug-item-img"
                                        />
                                    </view>
                                    <view class="drug-item-ctn c-gap-inner-left">
                                        <view
                                            class="c-line-clamp2"
                                            style="margin-bottom: 0;"
                                        >{{ item.title }}</view>
                                        <view>
                                            <view
                                                v-for="(it, index) in item.badges"
                                                :key="index"
                                                class="c-label-wrap c-color-main c-gap-right-small"
                                                :style="{borderColor: it.color}"
                                            >
                                                <text
                                                    v-if="index < 2"
                                                    :style="{
                                                        color: it.color,
                                                    }"
                                                >{{ it.label }}</text>
                                            </view>
                                        </view>
                                        <view class="c-flexbox c-v-center">
                                            <view
                                                class="drug-price"
                                                style="width: calc(100% - 60px);"
                                            >
                                                <view class="c-line-clamp1">
                                                    <text class="drug-now-price">{{ item.priceNow }}</text>
                                                    <text
                                                        class="drug-before-price c-gap-left-small"
                                                    >
                                                        {{ item.priceBefore }}
                                                    </text>
                                                </view>
                                                <view class="c-line-clamp1 c-color-999">
                                                    {{ item.storeName }}
                                                </view>
                                            </view>
                                            <view>
                                                <c-button
                                                    auto
                                                    type="primary"
                                                    :height="28"
                                                    :font-size="12"
                                                    border-radius="14px"
                                                    class="c-font-medium"
                                                >{{ item.button }}</c-button>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </template>
                        <view
                            v-for="(item, idx) in moreList"
                            v-else-if="recommendType === 'expert'"
                            :key="idx"
                            class="c-inline-block item-wrap c-gap-right-middle c-span10"
                            @tap="jump(item.msUrl, {from_btn: 'doctor'})"
                        >
                            <view
                                class="item-ctn-wrap c-gap-inner-top c-gap-inner-bottom c-v-center c-flexbox"
                            >
                                <view
                                    class="c-v-center item-ctn"
                                >
                                    <view>
                                        <image
                                            :src="item.expertPic"
                                            mode="widthFix"
                                            class="item-img"
                                        />
                                    </view>
                                    <view
                                        class="c-gap-inner-left"
                                        style="width: calc(100% - 50px);"
                                    >
                                        <view class="c-row expert-title">
                                            <text>{{ item.expertName }}</text>
                                            <text
                                                class="c-gap-left-small c-color-999 c-line-clamp1"
                                            >{{ item.expertLevel }} {{ item.expertDepartment }}</text>
                                        </view>
                                        <view class="c-v-center c-row">
                                            <text class="c-color-999 c-width-clamp">{{ item.expertHospital }}</text>
                                            <c-label text="三甲"/>
                                        </view>
                                    </view>
                                </view>
                                <view>
                                    <c-button
                                        auto
                                        type="primary"
                                        :height="28"
                                        :font-size="12"
                                        border-radius="14px"
                                        class="c-font-medium"
                                    >去咨询</c-button>
                                </view>
                            </view>
                            <rich-text
                                class="c-line-clamp2"
                                :nodes="item.goodAt"
                            />
                        </view>
                        <view class="c-gap-right-large c-inline-block">
                            <view
                                class="c-v-center"
                                @tap="jump(more.swanUrl, {from_btn: 'more'})"
                            >
                                <text class="c-more c-font-medium c-font-normal">查看更多</text>
                                <image
                                    mode="widthFix"
                                    src="https://med-fe.cdn.bcebos.com/wz/kepu/more.png"
                                    style="width: 16px; height: 16px;"
                                />
                            </view>
                        </view>
                    </scroll-view>
                    <view
                        class="c-color-999 c-font-normal c-v-center c-gap-top-small"
                    >
                        <image
                            mode="widthFix"
                            src="https://med-fe.cdn.bcebos.com/logo/health-logo-small.png"
                            class="c-kepu-logo"
                        />
                        <text v-if="recommendType === 'drug'">百度健康 药物使用需谨慎，请谨遵医嘱</text>
                        <text v-if="recommendType === 'expert'">百度健康 放心服务</text>
                    </view>
                </template>
                <view class="swan-security-padding-bottom"/>
            </view>
            <view v-if="popupInfo.type && popupInfo.type === 'expertRec'">
                <view class="doc c-gap-inner-top-large c-gap-inner-bottom">
                    <view class="c-flex c-gap-inner-right">
                        <c-avatar
                            :src="expertRecItem.expertPic || 'https://m.baidu.com/static/search/image_default.png'"
                            mode="widthFix"
                            :size="60"
                        />
                        <view class="c-gap-left doctor-info">
                            <view class="c-v-center">
                                <text
                                    :class="(expertRecItem.expertName.length > 3
                                        && expertRecItem.hospitalFiling) ? 'c-font-medium' : 'c-font-big'"
                                >
                                    {{ expertRecItem.expertName }}
                                </text>
                                <c-label
                                    v-if="expertRecItem.hospitalFiling"
                                    :text="expertRecItem.hospitalFiling"
                                    color="box_green"
                                    class="c-gap-left-small"
                                />
                            </view>
                            <view class="c-font-normal">
                                <text>{{ expertRecItem.expertDepartment }}</text>
                                <text class="c-gap-left-small">{{ expertRecItem.expertLevel }}</text>
                            </view>
                            <view class="c-font-normal">
                                <text>{{ expertRecItem.expertHospital }}</text>
                                <c-label
                                    v-if="expertRecItem.hospitalLevel"
                                    :text="expertRecItem.hospitalLevel"
                                    color="green"
                                    class="c-gap-left-small"
                                    solid
                                />
                            </view>
                        </view>
                    </view>
                    <view class="c-line-superfine-before c-gap-top-large"/>
                    <view class="c-row c-tac">
                        <view
                            v-for="(item, idx) in expertRecItem.serviceData"
                            :key="idx"
                            class="c-span4 c-service-tag"
                            :class="{'has-right-after': idx < expertRecItem.serviceData.length - 1}"
                        >
                            <text class="c-blocka c-color-f1 c-font-medium">{{ item.value }}</text>
                            <text class="c-blocka c-color-858 c-font-frey">{{ item.label }}</text>
                        </view>
                    </view>
                    <view class="c-line-superfine-before"/>
                    <view v-if="expertRecItem.goodAt" class="goodat">
                        <text class="c-font-medium c-font-medium c-blocka">
                            医生擅长
                        </text>
                        <rich-text
                            v-if="expertRecItem.goodAt"
                            class="c-color-doc c-font-normal good-at"
                            :nodes="expertRecItem.goodAt"
                        />
                    </view>
                    <view v-if="expertRecItem.practiceExperience" class="practiceExperience">
                        <text class="c-font-medium c-blocka">
                            医生简介
                        </text>
                        <text class="c-blocka c-color-doc">
                            {{ expertRecItem.practiceExperience }}
                        </text>
                    </view>
                </view>
            </view>
            <view
                v-if="popupInfo.type && popupInfo.type === 'expert-faq'"
                :style="{height: 'calc(70vh - 50px)'}"
                class="popular-science"
            >
                <view
                    class="expert-info"
                    :class="oneline ? 'padding-small' : 'padding-big'"
                >
                    <!-- 头像 -->
                    <view
                        class="avatar"
                        @tap.stop="onGo(popupInfo.url, 'head', popupInfo)"
                    >
                        <c-image
                            has-compress
                            :src="popupInfo.expertPic"
                            :width="oneline ? '.2rem' : '.40rem'"
                            :height="oneline ? '.2rem' : '.40rem'"
                            is-round
                            hack-white-stroke
                            :extra="{column: 2}"
                        />
                    </view>
                    <!-- 信息 -->
                    <view class="line">
                        <!--姓名职称-->
                        <view>
                            <view>
                                <text
                                    :class="oneline ? 'expert-name-small' : 'expert-name'"
                                    class="inline-text"
                                >
                                    {{ popupInfo.expertName }}
                                </text>
                                <text class="c-gap-left-small">{{ popupInfo.expertLevel }}</text>
                                <c-label
                                    v-if="oneline && popupInfo.hospitalLevel"
                                    :text="popupInfo.hospitalLevel"
                                    color="green"
                                    class="c-gap-left-small"
                                    solid
                                />
                            </view>
                            <view
                                v-if="popupInfo.expertDepartment || popupInfo.expertHospital"
                                class="expert-other line"
                            >
                                <text
                                    v-if="popupInfo.expertDepartment"
                                    class="inline-text"
                                >
                                    {{ popupInfo.expertDepartment }}
                                </text>
                                <text
                                    v-if="popupInfo.expertHospital"
                                    :class="{'c-gap-left-small': popupInfo.expertDepartment}"
                                    class="inline-text"
                                >
                                    {{ popupInfo.expertHospital }}
                                </text>
                                <c-label
                                    v-if="popupInfo.hospitalLevel"
                                    :text="popupInfo.hospitalLevel"
                                    color="green"
                                    class="c-gap-left-small"
                                    solid
                                />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="pop-science-detail">
                    <view
                        v-for="(art, i) in popupInfo.article"
                        :key="i"
                        class="article-content"
                    >
                        <text>{{ art.text }}</text>
                    </view>
                </view>
            </view>
            <!-- 团队问诊中医生助手信息 -->
            <view
                v-if="popupInfo.type && popupInfo.type === 'assistant'"
                class="assistant"
            >
                <view class="info-wrap">
                    <view class="item-avatar">
                        <c-avatar
                            :src="popupInfo.pic"
                            :size="60"
                        />
                    </view>
                    <view class="info-detail">
                        <view>
                            <view class="name c-font-17 c-color-prime">
                                {{ popupInfo.name }}
                                <text class="job-title c-font-normal">{{ popupInfo.position }}</text>
                            </view>
                            <view class="intro c-font-normal">{{ popupInfo.intro }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 就诊卡信息填写 -->
            <view v-if="popupInfo.type && popupInfo.type === 'medicalRecord'">
                <im-popup-edit-medical-record
                    :info="popupInfo"
                    @close="popClose"
                />
            </view>
            <!-- 卡片详情 -->
            <view
                v-if="popupInfo.type && popupInfo.type === 'cardDetail'"
                slot="topSlot"
                class="detail-title c-color-333 c-font-large c-gap-inner-top-large c-gap-inner-bottom-large"
            >
                <text>{{ popupInfo.title }}</text>
            </view>
            <view v-if="popupInfo.type && popupInfo.type === 'cardDetail'">
                <view class="c-line-superfine-before"/>
                <view class="c-padding-h">
                    <view class="detail-item">
                        <text class="doctor-title c-font-large c-color-333">{{ popupInfo.doctorTitle }}</text>
                        <text class="detail-price c-font-large c-color-mall">
                            <text class="price-symbol">￥</text>{{ popupInfo.oldPrice }}
                        </text>
                        <text class="service-mode c-font-normal c-color-gray">{{ popupInfo.serviceMode }}</text>
                    </view>
                    <view class="c-font-normal c-color-333"> {{ popupInfo.serviceTime }}</view>
                    <view class="feature-wrap">
                        <view
                            v-for="(feature, index) in popupInfo.features"
                            :key="index"
                            class="feature-item"
                        >
                            <view class="selected-icon"/>
                            <view class="feature-item-info">{{ feature }}</view>
                        </view>
                    </view>
                    <view class="explain-title c-color-333">{{ popupInfo.explainTitle }}</view>
                    <view class="explain-content">
                        <view
                            v-for="(explain, index) in popupInfo.explains"
                            :key="index"
                            class="explain-item"
                        >{{ explain }}</view>
                    </view>
                </view>
                <view class="c-line-superfine-before"/>
                <view class="bottom-wrap c-padding-h">
                    <view class="price-wrap">
                        <view class="total-price">
                            合计：<text class="c-color-mall">￥<text
                                class="final-price"
                            >{{ popupInfo.finalPrice }}</text></text>
                        </view>
                        <view v-if="popupInfo.discount" class="discount">优惠已减：{{ popupInfo.discount }}</view>
                    </view>
                    <view class="bottom-btn">
                        <c-button
                            :height="38"
                            :width="104"
                            :font-size="16"
                            font-weight="bold"
                            type="primary"
                            background="linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%)"
                            border-radius="22px"
                            @tap.stop="onTapItem(popupInfo)"
                        >
                            {{ popupInfo.btn }}
                        </c-button>
                    </view>
                </view>
            </view>
            <!-- 服务保障详细说明 -->
            <view
                v-if="popupInfo.type && popupInfo.type === 'serviceIndicators'"
            >
                <im-popup-service-indicators
                    :info="popupInfo"
                    @close="onClose"
                />
            </view>
        </c-popup>
    </view>
</template>

<script>
/* eslint-disable */
/**
 * @file 底部向上滑动组件
 * @author huanghongwei
 * @categories 业务组件，后续有类似需求，另起一个popupInfo.type即可
 * @tags [component]
 */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import PatientInfo from '../wz/patientInfo';
import CButton from '@baidu/med-ui/components/Button/Button';
import CLabel from '@baidu/med-ui/components/Label/Label';
import ImPopupEditMedicalRecord from './im-popup-edit-medical-record';
import ImPopupServiceIndicators from './im-popup-service-indicators';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import CImage from '../common/image';
import * as log from '../../utils/log';
import {request} from '../../utils/request';
import {pay} from '../../utils/pay';
import {sendDataErrorLog} from '../../utils/monitor';
import {throttle} from '../../utils/core';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 组件的数据
         */
        popupInfo: {
            type: Object,
            default() {
                return {};
            }
        },
        /**
        * c-popup参数
        */
        popupParams: {
            type: Object,
            default() {
                return {
                    showClose: false,
                    showCloseHandler: false,
                    showTitleLine: false,
                    closeIcon: 'close-circle',
                    rowTile: true
                };
            }
        },
        /**
         * 控制展现与否
         */
        popupShow: {
            type: Boolean,
            default: false
        },
        qid: {
            type: [Number, String],
            default: ''
        }
    },
    computed: {
        oneline() {
            // 医生信息是否一行展示
            return !this.popupInfo.expertHospital && !this.popupInfo.expertDepartment;
        }
    },
    watch: {
        popupShow(val) {
            this.show = val;
            if (this.popupInfo && this.popupInfo.type
                && this.popupInfo.type === 'patientForm' && val) {
                // 就诊人信息收集，高度异常的spy统计
                this.$mpUpdated().then(() => {
                    const sys = getSystemInfo();
                    this.getContentHeight().then(res => {
                        if (res && res.height && res.height < 50) {
                            sendDataErrorLog(JSON.stringify(sys), 'patientInfo', 'heightErr');
                        }
                    });
                });
            }
        },
        popupInfo(val) {
            // popup组件的scrollView属性可能不兼容textarea等组件
            if (val.type && (val.type === 'patientForm' || val.type === 'expertRec')) {
                this.scrollView = false;
            }
            if (val.type && (val.type === 'recommend' || val.type === 'expertRec')) {
                this.setData(val);
            }
        }
    },
    data() {
        return {
            show: this.popupShow,
            scrollView: true,
            fontNumShort: 0, // 简介截取'...'的字数
            curEnv: '', // 当前环境
            yidian: {},
            doctorInfo: '',
            abstract: [],
            recommendType: 'none',
            moreList: [],
            more: {},
            toJumpShop: {},
            recommendText: '',
            expertRecItem: {}
        };
    },
    mounted() {
        if (process.env.MARS_ENV === 'swan') {
            let screenWidth = getSystemInfo().windowWidth;
            this.fontNumShort = Math.floor(((screenWidth - 70) / 14) * 3 - 9);
            this.curEnv = 'swan';
        } else if (process.env.MARS_ENV === 'h5') {
            let screenWidth = document.documentElement.clientWidth;
            this.fontNumShort = Math.floor(((screenWidth - 70) / 14) * 3 - 9);
            this.curEnv = 'h5';
        }
    },
    methods: {
        setData(val) {
            if (val.type === 'recommend') {
                this.initRecommend(val);
            }
            if (val.type === 'expertRec') {
                this.initExpertRec(val);
            }
        },
        initRecommend(val) {
            let logObj = {};
            this.yidian = val.recommend.yidian;
            this.recommendText = val.recommend.recommendType;
            this.doctorInfo = this.yidian.doctor ? this.getDoctor(this.yidian.doctor.shift()) : '';
            this.abstract = this.filterAbstract(this.yidian.abstract);
            this.moreList = val.recommend.list || [];
            this.more = val.recommend.more;
            this.toJumpShop = val.recommend.jump;
            this.recommendType = val.recommend.type;
            logObj = {
                type: 'view',
                action: 'im_popup_kepu',
                extra: {
                    categoryType: this.yidian.type,
                    recommendType: this.recommendType
                }
            };
            if (this.toJumpShop && this.recommendType === 'drug' && this.moreList.length === 0) {
                Object.assign(logObj.extra, {
                    toShop: 1
                });
            }
            log.send(logObj);
        },
        initExpertRec(val) {
            this.expertRecItem = val;
        },
        // 拼装医生副标题
        getDoctor(doctor) {
            return [doctor.name, doctor.hospital, doctor.title, doctor.edit].join(' ');
        },
        // 过滤疾病定义和内容
        filterAbstract(abs) {
            let list = [];
            abs.forEach((item, idx) => {
                let obj = {
                    icon: item.icon,
                    title: item.title,
                    ctnObj: []
                };
                idx === 0 ? obj.ctnObj.push(this.cutString(item.content.shift())) : item.content.forEach(ctn => {
                    obj.ctnObj.push(this.cutString(ctn));
                });
                list.push(obj);
            });
            return list;
        },
        cutString(str) {
            let realNum = this.getLength(str, this.fontNumShort);
            let strObj = {
                fullStr: str,
                showFlag: false
            };
            // 计算真实切割的字数,中文字符和英文字符分开
            if (realNum > 0 && str.length > realNum) {
                strObj.shortStr = this.newString(str, realNum);
                strObj.showFlag = true;
            }
            return strObj;
        },
        onClose() {
            this.show = false;
            /**
            * 关闭弹窗事件
            */
            this.$emit('popupClose');
        },
        /**
         * 关闭病历卡编辑弹窗
         *
         * @param {Object} obj 病历保存成功将相关信息回传chat index父组件，更改病历卡历史信息
         */
        popClose(obj) {
            this.show = false;
            if (obj) {
                this.edited = true;
                this.$emit('onMedicalCardEdited', obj);
                return;
            }
            this.$emit('onMedicalCardEdited');
        },
        onTap(item) {
            /**
            * 点击事件
            */
            this.$emit('popupTap', item);
        },
        btnTap({btn}) {
            if (btn.callbackUrl) {
                this.$api.showLoading({
                    title: '正在跳转支付...'
                });
                request({
                    url: btn.callbackUrl,
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    isNeedLogin: true,
                    isFirstScreen: false
                }).then(res => {
                    if (res.data.toast) {
                        this.$api.showToast({
                            icon: 'none',
                            title: res.data.toast
                        });
                        return;
                    }
                    const {pay_url, payUrl, jumpUrl} = res.data || {};
                    if (process.env.MARS_ENV === 'swan') {
                        // 去支付
                        this.$api.hideLoading();
                        if (pay_url || payUrl) {
                            pay({
                                url: pay_url || payUrl,
                            });
                        }
                    } else if (process.env.MARS_ENV === 'h5') {
                        if (jumpUrl) {
                            let path = window.location.hash;
                            path = path + '&timestamp=' + new Date().getTime();
                            window.history.replaceState(null, null, path);
                            this.$api.hideLoading();
                            window.location.href = jumpUrl;
                        }
                    }
                });
            }
        },
        onUpdate(item) {
            /**
            * 更新卡片
            */
            this.$emit('update', item);
        },
        openDetail(i, idx) {
            let tmpAbstract = this.abstract[i];
            tmpAbstract.ctnObj[idx].showFlag = false;
            this.$set(this.abstract, i, tmpAbstract);
        },
        getLength(str, num) {
            // 获取应该截取多长的字，英文字符算1个，中文算2个。传入目标要的长度，返回真实应该取的长度。
            let count = 0;
            let flag = 0;
            let reg = /^[^\x00-\xff]+$/; // 双字符正则
            for (let i = 0; i < str.length; i++) {
                if (reg.test(str.charAt(i))) {
                    // 中文字符
                    flag = flag + 1;
                } else {
                    flag = flag + 0.5;
                }
                if (flag >= num) {
                    count = i;
                    break;
                }
            }
            return count;
        },
        newString(str, long) {
            let result = str.substring(0, long);
            return result;
        },
        jump(url, ext) {
            log.send({
                type: 'b',
                action: 'im_popup_kepu',
                extra: Object.assign(ext, {
                    recommendType: this.recommendType
                })
            });
            this.$emit('popupClose');
            this.$emit('toJump', url);
        },
        getContentHeight() {
            return new Promise((resolve, reject) => {
                this.$api.createSelectorQuery().select('#popup-slide-patient-form').boundingClientRect(rect => {
                    resolve(rect);
                }).exec();
            });
        },
        onUpdatePhys(updateUrl) {
            this.$emit('updatePhys', updateUrl);
        },
        onTapItem: throttle(function (item) {
            if (item.callbackUrl) {
                this.$api.showLoading({
                    title: item.loadingTxt || '正在跳转支付...'
                });
                let params = {};
                if (item.skuId) {
                    params = {
                        skuId: item.skuId,
                        skuCode: item.skuCode
                    };
                }
                if (item.cardType) {
                    params.value = item.cardType;
                }
                this.$emit('questionReply', {
                    callbackUrl: item.callbackUrl,
                    serviceCallbackUrl: item.callbackUrl,
                    params
                });
            }
        }, 2000)
    },
    components: {
        CPopup,
        CIcon,
        PatientInfo,
        CButton,
        CLabel,
        CAvatar,
        CImage,
        ImPopupEditMedicalRecord,
        ImPopupServiceIndicators
    }
};
</script>
<style lang="less" scoped>
.gurantee-card {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    &-close {
        position: absolute;
        right: 14px;
        top: 16px;
        z-index: 99;
    }

    &-brandicon {
        width: 72px;
    }

    &-headicon {
        width: 170px;
    }

    &-svcwrap {
        width: 100%;
    }

    &-svcitem {
        margin: 20px 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;
        font-size: 14px;
        color: #555;
    }

    &-iconwrap {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &-svcicon {
        width: 25px;
    }

    &-title {
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #333;
    }

    &-bottomtip {
        width: calc(100% - 34px);
        margin-bottom: 30px;
        padding: 12px 0;
        background: #f8f8f8;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 13px;
        color: #555;
    }

    &-tipicon {
        margin: 0 6px 0 12px;
        width: 15px;
        height: 15px;
    }

    &-popupbg {
        width: 200px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
    }
}

.pop-question {
    margin: 13px 17px 16px;
    font-family: PingFangSC-Medium;
    font-size: 15px;
    color: #333;
    letter-spacing: 0;
    line-height: 25px;

    &-para {
        margin-bottom: 20px;
    }

    &-text {
        display: flex;
        flex-direction: row;
    }
}

.pop-patient {
    &-list {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #333;
        background: #fff;
    }

    &-addwrap {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding-top: 10px;
        background: #f8f8f8;
    }

    &-add {
        width: 100%;
        font-size: 17px;
        color: #00c8c8;
        text-align: center;
        height: 48px;
        line-height: 48px;
        background: #fff;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    &-ph {
        height: 58px;
        background: #fff;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

.c-font-medium {
    font-family: PingFangSC-Medium;
    font-weight: bold;
}

.c-font-regular {
    font-family: PingFangSC-Regular;
}

.c-font-19 {
    font-size: 19px;
}

.c-v-center {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.c-v-bottom {
    display: flex;
    align-items: flex-end;
}

.c-v-top {
    display: flex;
    vertical-align: top;
}

.item-wrap,
.drug-item-wrap {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 10px;
}

.item-ctn-wrap,
.drug-item-ctn-wrap {
    overflow: hidden;
}

.drug-item-img {
    width: 90px;
    height: 90px;
    border-radius: 6px;
    display: inline-block;
}

.drug-now-price {
    color: #ff6f61;
}

.drug-before-price {
    color: #858585;
    text-decoration: line-through;
}

.item-img {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    float: left;
    display: block;
}

.item-ctn {
    width: calc(100% - 75px);
}

.drug-item-ctn {
    width: calc(100% - 120px);
    line-height: 20px;
}

.c-more {
    color: #1f1f1f;
    writing-mode: vertical-rl;
}

.more-info-btn {
    color: #999;
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    right: 0;
}

.c-label-wrap {
    border-radius: 8px;
    border: 1px solid rgba(143, 143, 143, .5);
    height: 14px;
    line-height: 14px;
    display: inline-block;
    padding: 0 5px;
    font-size: 10px;
}

.c-to-shop {
    background: #f5f5f5;
    border-radius: 19px;
    margin: 50px auto 10px;
    padding: 6px 18px;
    width: 130px;
    display: block;
}

.c-color-999 {
    color: #999;
}

.c-color-858 {
    color: #858585;
}

.c-width-clamp {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.expert-title,
.drug-price {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.c-kepu-logo {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border-radius: 50%;
}

.doc {
    background-color: #fff;
    background-size: auto 80%;
    background-position: top right;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 0 .08rem .08rem 0;
    display: block;

    .goodat {
        margin-top: .16rem;
    }

    .practiceExperience {
        margin-top: .26rem;
    }
}

.c-color-doc {
    color: #1f1f1f;
    font-size: .14rem;
}

.c-font-frey {
    font-size: .14rem;
    line-height: .24rem;
}

.c-flex {
    display: flex;
}

.c-service-tag {
    flex: 1;
    padding: .08rem 0;

    &.has-right-after {
        &::after {
            content: '';
            position: absolute;
            width: .01rem;
            transform: scaleX(0.333);
            height: 50%;
            right: -1px;
            top: 25%;
            background: #e0e0e0;
        }
    }
}

.popular-science {
    padding-bottom: .25rem;

    .expert-info {
        font-size: 14px;
        color: #999;
        display: flex;

        &.padding-small {
            padding: .15rem 0 .1rem;
        }

        &.padding-big {
            padding: .18rem 0 .1rem;
        }

        .expert-name {
            font-size: 16px;
            color: #333;
        }

        .expert-name-small {
            font-size: 14px;
            color: #333;
        }

        .avatar {
            margin-right: 8px;
        }

        .inline-text {
            display: inline-block;
        }
    }

    .pop-science-detail {
        padding-bottom: .15rem;

        .article-content {
            margin-bottom: .12rem;
            color: #333;
            font-size: 16px;
            line-height: 27px;
        }
    }
}

.c-color-f1 {
    color: #1f1f1f;
}

.assistant {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .info-wrap {
        display: flex;
        padding-top: .15rem;
        padding-bottom: .15rem;

        .item-avatar {
            width: 60px;
            height: 60px;
        }

        .info-detail {
            flex: 1;
            padding-left: .12rem;
            display: flex;
            align-items: center;

            .name {
                line-height: 1;
                font-family: PingFangSC-Medium;
            }

            .job-title {
                color: #333;
                margin-left: .08rem;
                font-family: PingFangSC-Regular;
            }

            .intro {
                color: #555;
                line-height: .24rem;
            }
        }
    }
}

.popup-slide-patient-form {
    height: 100%;
}

/deep/ .popup-box {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.detail {
    &-title {
        font-weight: 500;
        font-family: PingFangSC-Medium;
        text-align: center;
    }

    &-item {
        margin-top: 16px;
        position: relative;
    }

    &-price {
        font-weight: 600;
        position: absolute;
        right: 0;
        top: 0;
    }
}

.feature {
    &-wrap {
        padding-top: 8px;
    }

    &-item {
        display: flex;

        &-info {
            font-size: 15px;
            line-height: 27px;
            margin-left: 6px;
        }
    }
}

.doctor-title {
    font-weight: 500;
    font-family: PingFangSC-Medium;
}

.service-mode {
    position: absolute;
    right: 0;
    top: 25px;
}

.price-symbol {
    font-size: 15px;
}

.selected-icon {
    flex-shrink: 0;
    margin-top: 6px;
    background-image: url('https://med-fe.cdn.bcebos.com/wz/selected-icon.png');
    background-size: 100% 100%;
    width: 15px;
    height: 15px;
}

.explain {
    &-title {
        margin-top: 34px;
        font-size: 15px;
        line-height: 15px;
        font-weight: 500;
        font-family: PingFangSC-Medium;
    }

    &-content {
        margin-top: 6px;
        padding-bottom: 24px;
    }

    &-item {
        font-size: 15px;
        line-height: 27px;
        color: #1f1f1f;
    }
}

.bottom-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 7px;
    margin-bottom: 7px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-btn {
    width: 1.04rem;
    margin-left: 0.08rem;
}

.price-wrap {
    text-align: right;
}

.discount {
    font-size: 14px;
    line-height: 16px;
    color: #b5b5b5;
}

.total-price {
    font-size: 15px;
    color: #1f1f1f;
    font-weight: 500;
    font-family: PingFangSC-Medium;
}

.final-price {
    font-size: 19px;
}
</style>


