<template>
    <view :class="sourcePopularScience ? '' : 'b-feed'">
        <view class="b-feed-flex">
            <view class="c-font-large cl-bold c-color-333 b-feed-flex-title">{{ title }}</view>
            <view
                v-if="sourceHospital && list && list.length"
                class="c-color-gray c-font-medium-less"
                @tap.stop="moreScience"
            >查看更多<c-icon name="youjiantou"/>
            </view>
        </view>
        <view
            v-if="list && list.length > 1"
            class="c-gap-inner-top"
            :style="{minHeight: '36px'}"
        >
            <view
                :style="{
                    position: topBarShow ? 'fixed' : '',
                    top: topbarHeight + 'px',
                    left: '0px',
                    width: '100%',
                    padding: topBarShow ? '10px' : '',
                    background: topBarShow ? '#fff' : '',
                    boxSizing: topBarShow ? 'border-box' : '',
                    zIndex: topbarHeight ? 899 : 1,
                }"
            >
                <template>
                    <c-navs
                        v-if="sourcePopularScience"
                        class="popular-science-tabs"
                        :options="list"
                        scroll
                        :bottom-line-width="lineWidth"
                        :color="fontColor"
                        :selected-font-color="selectedColor"
                        :select-bottom-line-color="selectedColor"
                        :border-bottom="true"
                        :bottom-line-height="lineHeight"
                        :height="navsHeight"
                        :selected-index="selectedIndex"
                        @itemtap="changeTab"
                    />
                    <pcr-tab
                        v-else
                        :tabs="list"
                        :selected-color="selectedColor"
                        :default-index="selectedIndex"
                        @onChange="changeTab"
                    />
                </template>
            </view>
        </view>
        <view
            :style="{
                minHeight: minHeight ? 'calc(100vh - ' + '80px)' : '',
            }"
        >
            <view
                v-if="list && list.length && list[selectedIndex].items && list[selectedIndex].items.length === 0"
                class="empty-result"
            >
                {{ promptMessage }}
            </view>
            <view
                v-if="list && list.length && list[selectedIndex].items && list[selectedIndex].items.length"
                class="b-feed-cont"
                :class="[
                    flexLayout ? 'b-feed-flexbox' : '',
                    sourcePopularScience ? 'science-space' : '',
                    (
                        list[selectedIndex].type === 'expert_yidian'
                        || list[selectedIndex].type === 'yidian'
                        && !(list[selectedIndex].linkUrl)
                    ) ? 'c-gap-inner-top-large' : '',
                ]"
            >
                <template
                    v-if="
                        (
                            list[selectedIndex].type === 'expert_yidian'
                            || list[selectedIndex].type === 'yidian'
                        )
                            && list[selectedIndex].linkUrl
                            && list[selectedIndex].title
                    "
                >
                    <!-- 百度健康医典 -->
                    <!-- eslint-disable max-len -->
                    <view class="science-entry-title c-gap-inner-top-large c-gap-inner-bottom-ll">
                        <view class="c-font-normal">
                            <text>— 内容来自医生参与编审</text><text class="c-color-main science-entry-title-link" @tap="onTap(list[selectedIndex].linkUrl, list[selectedIndex].title)">百度健康医典</text><text>词条 —</text>
                        </view>
                    </view>
                </template>

                <template v-for="(item, index) in list[selectedIndex].items">
                    <!-- 文章 -->
                    <card-recommend-item
                        v-if="list[selectedIndex].type === 'article'"
                        :key="index"
                        :top-line="index !== 0"
                        :title="item.title || item.abstract"
                        :doctor="{
                            name: item.ctime || '',
                            rank: item.expertRank,
                            label: item.hospitalTag,
                            hospital: item.hospitalName || '',
                            hospitalPic: item.hospitalPic || '',
                            expertName: item.expertName || '',
                            expertPortrait: item.expertPortrait || '',
                            expertDepartment: item.expertDepartment || '',
                        }"
                        :ztype="list[selectedIndex].ztype"
                        :padding="index !== list[selectedIndex].items.length - 1
                            ? '10px 0'
                            : index === list[selectedIndex].items.length - 1
                                ? '10px 0 0 0'
                                : '10px 0 10px 0'"
                        :out-link="item.url"
                        :show-play="false"
                        :image="item.img || item.imgUrl"
                        :page="'pages/brand/search/index'"
                        :module="'search-recommend-list'"
                        :class="showLogClass"
                        :data-show="'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')'"
                        :data-extra="showLogExtra"
                        :log-extra="
                            Object.assign({}, logExtra, {
                                name: 'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')',
                            })
                        "
                        :font-size="'0.18rem'"
                    />
                    <!-- 动态 -->
                    <view
                        v-else-if="list[selectedIndex].type === 'dynamic'"
                        :key="index"
                        class="c-gap-top"
                        :class="showLogClass"
                        :data-show="'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')'"
                        :data-extra="showLogExtra"
                    >
                        <card-dynamic
                            :item="item"
                            :show-border="index !== list[selectedIndex].items.length - 1"
                            :extra="
                                Object.assign({}, logExtra, {
                                    name: 'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')',
                                })
                            "
                        />
                    </view>
                    <!-- 问答 -->
                    <view
                        v-else-if="list[selectedIndex].type === 'question'"
                        :key="index"
                        :class="showLogClass"
                        :data-show="'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')'"
                        :data-extra="showLogExtra"
                    >
                        <card-wenda
                            :wenda="item"
                            :show-border="index !== list[selectedIndex].items.length - 1"
                            :extra="
                                Object.assign({}, logExtra, {
                                    name: 'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')',
                                })
                            "
                        />
                    </view>
                    <!-- 视频 -->
                    <view
                        v-else-if="list[selectedIndex].type === 'quanwei_vedio' || list[selectedIndex].type === 'video'"
                        :key="index"
                        class="c-inline-block b-feed-video c-gap-top"
                        :class="showLogClass"
                        :data-show="'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')'"
                        :data-extra="showLogExtra"
                        :style="{
                            width: item.type === 'text' ? '100%' : 'calc(50% - 5px)',
                        }"
                        @tap="onNavtoH5(item.url, list[selectedIndex].type, index)"
                    >
                        <card-recommend-video
                            :video-message="item"
                            :video-width="videoWidth"
                        />
                    </view>
                    <!-- 直播 -->
                    <view
                        v-else-if="list[selectedIndex].type === 'zhibo'"
                        :key="index"
                        class="c-inline-block b-feed-video c-gap-top"
                        :class="showLogClass"
                        :data-show="'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')'"
                        :data-extra="showLogExtra"
                        :style="{
                            width: 'calc(50% - 5px)',
                            marginTop: index < 2 ? '.15rem' : '',
                        }"
                        @tap="onNavtoH5(item.url, list[selectedIndex].type, index)"
                    >
                        <view class="b-feed-video_box">
                            <view class="b-feed-video_mask"/>
                            <!--  封面图-->
                            <c-image
                                has-compress
                                class="b-feed-video_img"
                                :src="item.img"
                                :width="videoWidth + 'px'"
                                :height="videoWidth / 1.785 + 'px'"
                                mode="widthFix"
                                :is-round="false"
                                radius="0.09rem"
                                :hack-white-stroke="false"
                                :extra="{column: 5}"
                            />

                            <!-- 直播状态：直播中'0'、直播预告'-1'、直播回放'1'› -->
                            <c-label
                                v-if="item.status"
                                label-type="live"
                                :live-status="item.status"
                                class="live-broadcast-status"
                            />
                            <!-- 直播图标 -->
                            <c-icon
                                name="live"
                                font-size="30px"
                                class="b-feed-video_icon"
                            />
                            <!-- 直播时长 -->
                            <view
                                v-if="item.status === '1' && item.time"
                                class="b-feed-video_time c-font-small c-font-13"
                            >
                                {{ item.time }}
                            </view>
                        </view>

                        <!-- 标题 -->
                        <view
                            v-if="item.title"
                            class="c-line-clamp2 cl-color-1f c-font-normal"
                            :style="{height: '.44rem'}"
                        >{{ item.title }}</view>
                        <view class="cl-flex">
                            <!--直播时间-->
                            <text
                                v-if="(item.status === '-1' || item.status === '1') && item.date"
                                class="c-color-gray c-font-normal b-feed-live"
                            >
                                {{ item.date }}
                            </text>
                            <!-- 观看人数 -->
                            <text
                                v-if="item.status === '1' && item.viewers"
                                class="c-color-gray c-font-normal b-feed-live"
                                :style="{
                                    margin: '0 0 0 8px',
                                }"
                            >
                                {{ item.viewers }}
                            </text>
                        </view>
                    </view>
                    <!-- 语音 -->
                    <view
                        v-else-if="list[selectedIndex].type === 'audio'"
                        :key="index"
                        class="each-voice"
                        :class="showLogClass"
                        :data-show="'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')'"
                        :data-extra="showLogExtra"
                        @tap="onNavtoH5(item.url, 'voice', index)"
                    >
                        <view class="voice-title c-line-clamp2">
                            {{ item.title }}
                        </view>
                        <view class="voice-content c-line-clamp2">
                            {{ item.abstract }}
                        </view>
                        <view class="audio-wrap">
                            <c-image
                                v-if="item.portrait"
                                has-compress
                                class="expert-img"
                                :src="item.portrait"
                                width="0.25rem"
                                height="0.25rem"
                                mode="widthFix"
                                :hack-white-stroke="false"
                            />
                            <im-audio
                                title="点击播放"
                                :time="item.duration"
                                :audiourl="item.voice_url"
                                @curaudio="onCurAudio"
                            />
                        </view>
                        <view
                            v-if="item.expertName || item.expertDepartment || item.ctime"
                            class="audio-subtitle c-color-gray c-font-normal c-gap-top-small"
                        >
                            <text v-if="item.expertName" class="c-gap-right-middle c-line-clamp1">{{ item.expertName }}</text>
                            <text
                                v-if="item.expertDepartment"
                                class="c-gap-right-middle c-line-clamp1"
                            >
                                {{ item.expertDepartment }}
                            </text>
                            <text v-if="item.ctime" class="c-gap-right-middle c-line-clamp1">{{ item.ctime }}</text>
                        </view>
                        <view
                            :class="index !== list[selectedIndex].items.length - 1
                                ? 'c-line-superfine-after c-gap-top'
                                : ''"
                        />
                    </view>
                    <!-- 小视频 -->
                    <view
                        v-else-if="list[selectedIndex].type === 'small-video'"
                        :key="index"
                        :class="showLogClass"
                        :data-show="'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')'"
                        :data-extra="showLogExtra"
                    >
                        <view class="c-inline-block">
                            <view
                                v-if="item.img"
                                class="b-feed-video_img"
                                :style="{
                                    width: videoWidth + 'px',
                                    bakcground: 'url(' + item.img + ')',
                                }"
                            >
                                <view>{{ item.play }}}次播放</view>
                            </view>
                        </view>
                    </view>
                    <!-- 新增小视频，主要是样式和上面的有不一样 -->
                    <view
                        v-else-if="list[selectedIndex].type === 'small_video'"
                        :key="index"
                        class="c-inline-block b-feed-video c-gap-top"
                        :class="showLogClass"
                        :data-show="'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')'"
                        :data-extra="showLogExtra"
                        :style="{
                            width: 'calc(50% - 5px)',
                            marginTop: index < 2 ? '.15rem' : '',
                        }"
                        @tap="onNavtoH5(item.url, list[selectedIndex].type, index)"
                    >
                        <view class="b-feed-video_box">
                            <view class="b-feed-video_mask"/>
                            <!-- <image
                                :src="item.img"
                                class="b-feed-video_img"
                                :style="{
                                    width: videoWidth + 'px',
                                    height: videoWidth / 0.75 + 'px',
                                }"
                            /> -->
                            <view
                                class="b-feed-video_img small_video_img a123"
                                :style="{
                                    width: videoWidth + 'px',
                                    height: videoWidth / 0.75 + 'px',
                                    'background-image': 'url(' + item.img + ')',
                                } | imgCompress('background-image', {column: 5})"
                            />
                            <c-icon
                                name="play"
                                font-size="30px"
                                class="b-feed-video_icon"
                            />
                            <view class="video-subtitle c-font-normal">
                                <c-image
                                    v-if="item.hospitalPic"
                                    has-compress
                                    class="video-subtitle-img c-gap-right-middle"
                                    :src="item.hospitalPic"
                                    width="0.14rem"
                                    height="0.14rem"
                                    :hack-white-stroke="false"
                                    :extra="{column: 1}"
                                />
                                <view class="c-line-clamp1">
                                    <text v-if="item.hospitalName" class="c-gap-right-middle">{{ item.hospitalName }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="c-line-clamp2 cl-color-1f c-font-normal samll_video_title c-gap-top-small">
                            {{ item.title }}
                        </view>
                    </view>
                    <!-- 新增科普词条 -->
                    <view
                        v-else-if="list[selectedIndex].type === 'expert_yidian' || list[selectedIndex].type === 'yidian'"
                        :key="index"
                        :data-extra="showLogExtra"
                        :class="showLogClass"
                        :data-show="'med-doctor-feed-' + list[selectedIndex].type + '(' + index + ')'"
                        @tap="onTap(item.url, list[selectedIndex].type, index)"
                    >
                        <!-- 词条展示 -->
                        <view
                            class="science-entry-content c-gap-inner-top-large"
                            :class="index !== list[selectedIndex].items.length - 1 ? 'c-gap-inner-bottom-large' : ''"
                            :style="{
                                paddingTop: index < 1 ? '0px' : '',
                            }"
                        >
                            <view class="science-entry-content-list">
                                <!-- 词条名称 -->
                                <view v-if="item.name" class="c-font-big-less c-color-title"> {{ item.name }} </view>
                                <view class="science-entry-details c-color">
                                    <!-- 标签(数组)： 中西药、处方药、医保信息 、特征信息-->
                                    <view v-if="item.lables && item.lables.length" class="science-entry-details-table">
                                        <c-label
                                            v-for="(label, labelIndex) in item.lables"
                                            :key="labelIndex"
                                            :text="label"
                                            font-size="10"
                                            height="16"
                                            padding="6"
                                            class="c-gap-right-small"
                                        />
                                    </view>
                                    <!-- 别名、科室、管理类别、接种对象 -->
                                    <template v-if="item.list && item.list.length">
                                        <view
                                            v-for="(listItem, listIndex) in item.list"
                                            :key="listIndex"
                                            class="c-line-clamp1 c-font-normal"
                                        >
                                            <text> {{ listItem.name }} </text>
                                            <text> {{ listItem.value }} </text>
                                        </view>
                                    </template>
                                    <!-- 标签：禁忌-->
                                    <view v-if="item.taboo && item.taboo.length" class="science-entry-details-table">
                                        <c-label
                                            v-for="(tabooDetail, tabooIndex) in item.taboo"
                                            :key="tabooIndex"
                                            :text="tabooDetail.name"
                                            :color="tabooDetail.type === '1' ? 'box_red' : 'box_orange'"
                                            height="16"
                                            padding="6"
                                            class="c-gap-right-small"
                                        />
                                    </view>
                                    <!-- 科室、人群禁忌、概述 -->
                                    <template v-if="item.bottomData && item.bottomData.length">
                                        <view
                                            v-for="(data, dataIndex) in item.bottomData"
                                            :key="data.name + dataIndex"
                                            class="c-line-clamp1 c-font-normal"
                                        >
                                            <text> {{ data.name }} </text>
                                            <text> {{ data.value }} </text>
                                        </view>
                                    </template>
                                </view>
                                <view
                                    v-if="item.expertPortrait || item.expertName || item.expertDepartment"
                                    class="science-entry-content-subtitle c-font-normal c-color-gray"
                                >
                                    <c-image
                                        v-if="item.expertPortrait"
                                        has-compress
                                        :src="item.expertPortrait"
                                        class="science-entry-content-docImg"
                                        :is-round="true"
                                        :extra="{column: 1}"
                                        width="0.14rem"
                                        height="0.14rem"
                                    />
                                    <view class="c-line-clamp1">
                                        <text v-if="item.expertName" class="c-gap-left-middle">{{ item.expertName }}</text>
                                        <text v-if="item.expertDepartment" class="c-gap-left-middle">{{ item.expertDepartment }}</text>
                                    </view>
                                </view>
                            </view>
                            <view v-if="item.cover">
                                <c-image
                                    v-if="item.cover"
                                    has-compress
                                    class="science-entry-content-images c-radius-large"
                                    :src="item.cover"
                                    width="28.3vw"
                                    height="9.6vh"
                                    mode="aspectFill"
                                    :hack-white-stroke="false"
                                    :is-round="false"
                                    :extra="{column: 4}"
                                    radius="0.1rem"
                                />

                            </view>
                        </view>
                        <view :class="index === list[selectedIndex].items.length - 1 ? '' : 'c-line-superfine-after'"/>
                    </view>
                </template>
                <template v-if="!sourceHospital">
                    <view v-if="list[selectedIndex].hasMore == 1" class="b-feed-cont_none">
                        <list-loading status="loading" bg-color="transparent"/>
                    </view>
                    <view v-else-if="list[selectedIndex].hasMore == 0" class="b-feed-cont_none c-font-13">
                        没有更多内容了
                    </view>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 诊疗室
 * @description 目前医生主页、医院主页、科普详情页、科普详情页用到该组件
 * @author chenshuo04, chenyang28, chenhongfan
 */
/* global getCurrentPages getApp */
import CardRecommendItem from '@components/speTopic/Recommend/RecommendItem';
import CardRecommendVideo from '@components/speTopic/Recommend/RecommendVideo';
import PcrTab from '@components/act/pcr/pcr-tab';
import CardDynamic from '@components/search/card-dynamic';
import CardWenda from '@components/search/card-wenda';
import {navigate, navToBdBoxH5} from '@utils/navigate';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import * as Log from '@utils/log';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import ImAudio from '@components/wz/audio-bubble';
import ListLoading from '@components/common/list-loading';
import CLabel from '@baidu/med-ui/components/Label/Label';
import {request} from '@utils/request';
import * as conf from '@utils/conf';
import CNavs from '@baidu/med-ui/components/Navs/Navs';
import CImage from '@components/common/image';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        PcrTab,
        CardRecommendItem,
        CardRecommendVideo,
        CardDynamic,
        CardWenda,
        CIcon,
        ImAudio,
        ListLoading,
        CLabel,
        CNavs,
        CImage
    },
    props: {
        title: {
            type: String,
            default: '动态科普'
        },
        defaultList: {
            type: Array,
            default: () => []
        },
        topbarHeight: {
            type: Number,
            default: 0
        },
        topBarShow: {
            type: Boolean,
            default: false
        },
        feedId: {
            type: String,
            default: ''
        },
        tabType: {
            type: String,
            default: ''
        },
        promptMessage: {
            type: String,
            default: ''
        },
        redirectAction: {
            type: String,
            default: ''
        },
        showLogClass: {
            type: String,
            default: ''
        },
        expertId: {
            type: String,
            default: ''
        },
        from: {
            type: String,
            default: ''
        },
        sfRef: {
            type: String,
            default: ''
        },
        // 医院来源
        sourceHospital: {
            type: Boolean,
            default: false
        },
        // 科普详情页
        sourcePopularScience: {
            type: Boolean,
            default: false
        },
        // 科室来源
        sourceDepartment: {
            type: Boolean,
            default: false
        },
        selectedNum: {
            type: Number,
            default: 0
        },
        moreUrl: {
            type: String,
            default: ''
        }
    },
    watch: {
        topBarShow(nval) {
            this.minHeight = nval;
        }
    },
    data() {
        return {
            selectedIndex: 0,
            videoWidth: 0,
            list: [],
            currentAudio: null,
            locking: false,
            minHeight: false,
            contentTop: 500,
            resetTop: 450,
            showLogExtra: '',
            typeMap: {
                dynamic: 'Dynamic',
                zhibo: 'Zhibo',
                audio: 'Audio',
                article: 'article',
                question: 'Question',
                quanwei_vedio: 'Video',
                video: 'Video',
                expert_yidian: 'Expert_yidian',
                yidian: 'Expert_yidian',
                small_video: 'Small_video'
            },
            distinguishTypes: [
                'quanwei_vedio',
                'zhibo',
                'video',
                'small_video',
                'small-video',
            ],
            fontColor: '#555555',
            lineWidth: '60%',
            selectedColor: '#00C8C8',
            lineHeight: '3px',
            navsHeight: 43,
            flexLayout: false,
            scienceText: '',
            articlePadding: ''
        };
    },
    created() {
        const list = this.defaultList.map((item, index) => {
            // 后端 问答 type未对齐
            if (item.type === this.tabType || (this.tabType === 'wenda' && item.type === 'question')) {
                this.selectedIndex = index;
            }
            if (item.type === 'dynamic') {
                item.items = item.items.map(itm => this.formatDynamic(itm));
            }
            return item;
        });
        this.$set(this, 'list', list);
        if (this.sourcePopularScience) {
            this.selectedIndex = this.$api.getStorageSync('currentIndex') || 0;
        }
        let selectedTypes = this.list[this.selectedIndex].type;
        this.flexLayout = this.distinguishTypes.includes(selectedTypes);
        let screenWidth = 0;
        if (process.env.MARS_ENV === 'swan') {
            screenWidth = getSystemInfo().windowWidth;
        }
        else if (process.env.MARS_ENV === 'h5') {
            screenWidth = document.documentElement.clientWidth;
        }
        this.videoWidth = (screenWidth - 54) / 2;
        if (this.topBarShow) {
            this.minHeight = true;
        }

        this.showLogExtra = JSON.stringify({expertId: this.expertId, from: this.from, ref: this.sfRef});
        this.logExtra = {
            expertId: this.expertId,
            from: this.from,
            ref: this.sfRef
        };
    },
    // computed: {
    // showLogExtra() {
    //     return JSON.stringify({expertId: this.expertId});
    // }
    // },
    mounted() {
        setTimeout(() => {
            this.$api
                .createSelectorQuery()
                .select('#' + this.feedId)
                .boundingClientRect(data => {
                    // 切换tab高度恢复
                    if (data && data.top) {
                        // this.resetTop = data.top - 16;
                        if (process.env.MARS_ENV === 'swan') {
                            let isIphoneX = false;
                            const systemInfo = getSystemInfo();
                            if (
                                systemInfo.model.search('iPhone X') !== -1
                                || systemInfo.model.search('iPhone 11') !== -1
                                || systemInfo.model.search('iPhone 12') !== -1
                            ) {
                                isIphoneX = true;
                            }
                            this.resetTop = data.top - (isIphoneX ? 56 : 36);
                        }
                        else {
                            this.resetTop = data.top - 16;
                        }

                        if (this.tabType) {
                            this.$api.pageScrollTo({
                                scrollTop: this.resetTop,
                                duration: 0
                            });
                        }
                    }
                })
                .exec();
        }, 300);
    },
    methods: {
        changeTab(e) {
            let type = this.sourcePopularScience ? this.list[e.index].type : this.list[e].type;
            const trackingType = this.typeMap[type];
            Log.send({
                type: 'c',
                action: 'click',
                extra: {
                    name: `${trackingType || 'otherType'}`,
                    expertId: this.expertId,
                    from: this.from,
                    ref: this.sfRef
                }
            });
            // 增加ubc打点
            Log.ubcSend({
                type: 'clk',
                value: `${trackingType || 'otherType'}`,
                ext: {
                    expertId: this.expertId
                }
            });
            this.locking = true;
            if (this.topBarShow) {
                this.$api.pageScrollTo({
                    scrollTop: this.resetTop,
                    duration: 0
                });
            }
            this.selectedIndex = this.sourcePopularScience ? e.index : e;
            this.$api.setStorageSync('currentIndex', this.selectedIndex);
            let selectedTypes = this.list[this.selectedIndex].type;
            this.flexLayout = this.distinguishTypes.includes(selectedTypes);
            setTimeout(() => {
                this.locking = false;
            }, 300);
        },

        onTap(url, title, index) {
            if (url) {
                let name = '';
                if (typeof index === 'number') {
                    name = `med-doctor-feed-${title}(${index})`;
                }
                else {
                    name = title;
                }
                navigate({
                    url: url,
                    extra: Object.assign({}, this.logExtra, {
                        name
                    })
                });
            }
        },

        onNavtoH5(url, type, index) {
            Log.send({
                type: 'l',
                action: 'navigate',
                extra: Object.assign({}, this.logExtra, {
                    name: `med-doctor-feed-${type}(${index})`
                })
            });
            navToBdBoxH5(url);
        },
        onLoading() {
            const data = this.list[this.selectedIndex];
            if (data.hasMore === '1') {
                this.onAsyncList();
            }
        },
        // 请求
        onAsyncList() {
            if (this.locking) {
                return;
            }
            this.locking = true;
            const api = this.list[this.selectedIndex].nextApi;
            const pages = getCurrentPages();
            const curPage = pages && pages.length ? pages[pages.length - 1] : {};
            const currentPage = curPage.route || '';
            request({
                url: conf.goApiHost + api,
                data: {
                    pageSize: 10,
                    page: this.list[this.selectedIndex].nextPn,
                    fe_path: '/' + currentPage
                },
                isNeedLogin: false,
                isFirstScreen: false
            })
                .then(res => {
                    this.locking = false;
                    const {
                        Audio,
                        Zhibo,
                        Video,
                        Dynamic,
                        Article,
                        QA,
                        SmallVideo,
                        Expert_yidian,
                        Yidian
                    } = res.data.tabs;
                    let data = Audio
                        || Zhibo
                        || Video
                        || Dynamic
                        || Article
                        || QA
                        || SmallVideo
                        || Expert_yidian
                        || Yidian;
                    let list = this.list[this.selectedIndex].items.concat(
                        data.items.map(itm => {
                            if (Dynamic) {
                                itm = this.formatDynamic(itm);
                            }
                            return itm;
                        })
                    );
                    this.$set(this.list[this.selectedIndex], 'items', list);
                    this.$set(this.list[this.selectedIndex], 'nextPn', data.nextPn);
                    this.$set(this.list[this.selectedIndex], 'hasMore', data.hasMore);
                    this.$set(this.list[this.selectedIndex], 'nextApi', data.nextApi);
                })
                .catch(err => {
                    this.locking = false;
                });
        },
        onCurAudio(detail) {
            this.onPause();
            this.currentAudio = detail;
        },
        onPause() {
            if (this.currentAudio) {
                this.currentAudio.pause();
            }
        },
        formatDynamic(item) {
            return Object.assign(item, {
                type: item.items && item.items[0] && item.items[0].style,
                picUrl:
                    item.items
                    && item.items[0]
                    && (item.items[0].img_200_200 || item.items[0].img_big || item.items[0].img_origin),
                picUrls:
                    item.items
                    && item.items.length
                    && item.items
                        .map(itm => {
                            return itm.img_200_200 || itm.img_big || itm.img_origin;
                        })
                        .slice(0, 3)
            });
        },
        timespan(nowtime) {
            if (!nowtime) {
                return '';
            }
            let yearUnit = '-';
            let monthUnit = '-';
            let dayUnit = '';
            // 如果是中文类型
            if (this.type === 2) {
                yearUnit = '年';
                monthUnit = '月';
                dayUnit = '日';
            }
            let now = new Date().getTime();
            now = parseInt(now, 10);
            // 单位：ms
            let time = parseInt(nowtime, 10);
            // 单位：s
            let dur = parseInt((now - time) / 1000, 10);
            const suffix = dur >= 0 ? '前' : '后';
            let timespan = '';
            dur = Math.abs(dur);

            if (this.format(new Date(now), 'yyyy') !== this.format(new Date(time), 'yyyy')) {
                timespan = this.format(new Date(time), `yyyy${yearUnit}MM${monthUnit}dd${dayUnit}`);
            }
            else if (dur === 0) {
                timespan = '刚刚';
            }
            else if (dur < 60) {
                timespan = parseInt(dur, 10) + '秒' + suffix;
            }
            else if (dur / 60 < 60) {
                timespan = parseInt(dur / 60, 10) + '分钟' + suffix;
            }
            else if (dur / 60 / 60 < 24) {
                timespan = parseInt(dur / 60 / 60, 10) + '小时' + suffix;
            }
            else if (dur / 24 / 60 / 60 <= 7) {
                timespan = parseInt(dur / 24 / 60 / 60, 10) + '天' + suffix;
            }
            else {
                timespan = this.format(new Date(time), `MM${monthUnit}dd${dayUnit}`);
            }

            return timespan;
        },
        format(date, fmt) {
            const o = {
                'M+': date.getMonth() + 1,
                'd+': date.getDate(),
                'h+': date.getHours(),
                'm+': date.getMinutes(),
                's+': date.getSeconds(),
                'q+': Math.floor((date.getMonth() + 3) / 3),
                S: date.getMilliseconds()
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            Object.keys(o).map(k => {
                if (new RegExp('(' + k + ')').test(fmt)) {
                    fmt = fmt.replace(
                        RegExp.$1,
                        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
                    );
                }
            });
            return fmt;
        },

        moreScience() {
            if (this.moreUrl) {
                navigate({
                    url: this.moreUrl || '',
                    log: {
                        value: 'moreScience',
                        type: 'clk'
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.b-feed {
    padding: 0.1rem 0.13rem 0.1rem 0.13rem;
    background: #fff;
    border-radius: 10px;

    &-flex {
        display: flex;
        align-items: center;

        &-title {
            flex: 1;
        }
    }

    &-cont {
        // padding-top: 5px;
        &_none {
            color: #999;
            padding: 10px 0 10px 0;
            text-align: center;
            width: 100%;
        }
    }

    &-flexbox {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    &-video {
        position: relative;

        &_img {
            position: relative;
            border-radius: 9px;

            &::before {
                content: ' ';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background:
                    linear-gradient(
                        180deg,
                        rgba(0, 0, 0, 0) 0%,
                        rgba(0, 0, 0, 0.17) 79%,
                        rgba(0, 0, 0, 0.4) 99%
                    );
                border-radius: 9px;
            }
        }

        &_box {
            position: relative;
        }

        &_icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            color: #fff;
        }

        &_time {
            position: absolute;
            bottom: 8px;
            right: 8px;
            color: #fff;
        }

        &_title {
            height: .44rem;
        }

        &-subtitle {
            display: flex;
            align-items: center;

            &_time {
                position: relative;
                top: -5px;
                height: 24px;
            }
        }
    }
}

.video-subtitle {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 4px;
    left: 8px;
    color: #fff;
    width: 100%;

    &-img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        border-radius: 50%;
    }
}

.doctor-img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
}

.each-voice {
    margin-bottom: 15px;
    font-family: PingFangSC-Regular;
    letter-spacing: 0;

    &:first-child {
        margin-top: 15px;
    }

    &:last-child {
        margin-bottom: 0px;
    }
}

.voice-content {
    font-size: 14px;
    color: #525252;
    line-height: 22px;
}

.voice-title {
    font-size: 16px;
    color: #1f1f1f;
    line-height: 16px;
}

.audio-wrap {
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    .expert-img {
        margin-right: 14px;
        width: 25px;
        height: 25px;
        border-radius: 25px;
        background-size: 100% 100%;
    }

    .audio-bubble {
        position: relative;
        height: 38px;
        width: 150px;
        background: #f5f5f5;
        border-radius: 3px 3px 3px 3px;
    }

    .triangle-icon {
        position: absolute;
        top: 50%;
        margin-top: -5px;
        left: -10px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-right-color: #f5f5f5;
    }

    .audio-content {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #3f3f3f;
    }

    .audio-play-title {
        margin-right: 10px;
        font-size: 14px;
        color: #000;
    }
}

.audio-subtitle {
    display: flex;
    align-items: center;
}

.empty-result {
    padding: 0.15rem 0;
    line-height: 60px;
    color: #999;
    text-align: center;
}

.cl-bold {
    font-weight: bold;
}

.cl-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cl-divider {
    margin-top: 15px;
    width: 100%;
    height: 1px;
    transform: scaleY(0.33);
    background: #e0e0e0;
}

.cl-color-1f {
    color: #1f1f1f;
}

.samll_video_title {
    margin-bottom: 0;
}

.small_video_img {
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.science-entry-title {
    text-align: center;
    position: relative;
    color: #b8b8b8;

    .science-entry-title-link {
        position: relative;

        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background: #00c8c8;
            bottom: 0;
        }
    }
}

.science-entry {
    &-content {
        display: flex;
        justify-content: space-between;
        align-items: stretch;

        &-list {
            flex: 1;
            overflow: hidden;
            margin-right: 12px;
        }

        &-images {
            width: 28.3vw;
            height: 9.6vh;
        }

        &-images img {
            width: 100%;
            height: 100%;
        }

        &-subtitle {
            display: flex;
            align-items: center;
        }

        &-docImg {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            flex-shrink: 0;
        }
    }
}

.science-entry-details-table {
    position: relative;
    white-space: nowrap;

    &::after {
        content: '';
        display: block;
        width: 14px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-box-shadow: inset -10px 0 10px 0 #fff;
        box-shadow: inset -10px 0 10px 0 #fff;
    }
}

.science-space {
    padding: 5px 18px;
}

.live-broadcast-status {
    position: absolute;
    left: 0%;
    top: 0%;
    margin: 0.06rem 0 0 0.06rem;
}

.popular-science-tabs {
    text-align: center;
}
</style>
