<template>
    <view
        :class="{
            'recommend--cancel-top': cancelTop,
            'recommend-yd-home': isYdNewHome,
        }"
        class="recommend"
    >
        <view v-if="title" class="recommend__title">{{ title }}</view>
        <view
            v-for="(recommend, index) in recommends"
            :key="index"
            :class="[index >= rn * (pn - 1) ? showLogClass : '']"
            :data-show="page + '-recommend-' + index"
            :data-extra="recommend.extraUbc"
            @tap="report(recommend,index)"
        >
            <view
                v-if="index !== 0 && (recommend.style === '4' || recommend.style === '5') || (topLine && index === 0)"
                class="c-line-top recommend__line"
            />
            <!-- 大图样式/大图样式 -->
            <recommend-big-pic-item
                v-if="recommend.style === '1' || recommend.style === '3'"
                :top-line="index !== 0"
                :title="recommend.title"
                :doctor="{
                    name: recommend.doctor,
                    rank: recommend.information,
                    label: recommend.hospi_level,
                    hospital: recommend.hospital,
                    image: recommend.portrait,
                }"
                :log="recommend.logStr"
                :img-type="recommend.imgType"
                :image="recommend.imageUrl"
                :url="recommend.url"
                :show-play="recommend.style === '3'"
                :duration="recommend.duration"
                :page="page"
                :feedback="recommend.feedback"
                :module="module + '-recommend-' + index"
                :log-url="recommend.url_tcurl"
            />
            <banner-image
                v-else-if="recommend.style === '2'"
                :top-line="index !== 0"
                :page="page"
                :image="recommend.imageUrl"
                :url="recommend.url"
                :ratio="recommend.ratio"
            />

            <!-- 直播大图 -->
            <view
                v-else-if="recommend.style === '4'"
                :style="{marginTop: '-0.09rem'}"
                class="recommend--padding"
            >
                <video-big-pic
                    :video="recommend.data"
                    :log="recommend.logStr"
                    hide-desc
                    border-radius="5px"
                    :livesource="livesource"
                />
            </view>

            <!-- 推荐标签 -->
            <view v-else-if="recommend.style === '5'">
                <!-- pm让先hold 后续推动研发换数据 -->
                <!-- <feeds-circles
                    :url="recommend.data.url"
                    :title="recommend.data.title"
                    :list="recommend.data.list"
                    :log="recommend.logStr"
                    class="coop-hide-element"
                /> -->
            </view>

            <!-- 广告 -->
            <advert
                v-else-if="recommend.style === '6'"
                :data="recommend.data"
            />
            <!-- 左文右图 -->
            <recommend-item
                v-else
                :top-line="index !== 0"
                :title="recommend.title"
                :labels="recommend.labels"
                :font-size="fontSize"
                :doctor="{
                    name: recommend.doctor,
                    rank: recommend.information,
                    label: recommend.hospi_level,
                    hospital: recommend.hospital,
                    image: showPortrait ? recommend.portrait : '',
                }"
                :log="recommend.logStr"
                :brief="showBrief ? recommend.brief : ''"
                :clamp="recommend.clamp"
                :show-play="!!recommend.duration"
                :image="recommend.imageUrl"
                :url="recommend.url"
                :out-link="recommend.newH5Url"
                :page="page"
                :feedback="recommend.feedback"
                :module="module + '-recommend-' + index"
                :log-url="recommend.url_tcurl"
                @articlesDetailDot="articlesDetailDot"
            />
        </view>
        <view
            :style="loadStyle"
        >
            <list-loading
                v-show="status && loadMore"
                :status="status"
                @reload="loadFeeds"
            />
        </view>
    </view>
</template>

<script>
/* global getApp */
/**
 *  @file index
 *  @author yantingxi
 */
import RecommendItem from './RecommendItem';
import BannerImage from './BannerImage';
import RecommendBigPicItem from './RecommendBigPicItem';
import Advert from '../../../components/common/advert';
import ListLoading from '../../../components/common/list-loading';
// import FeedsCircles from '../../../components/speTopic/Feeds/Circles';
import VideoBigPic from '../live/VideoBigPic';

import {request} from '../../../utils/request';
import {ubcInit, ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        title: {
            type: String,
            default: ''
        },
        recommends: {
            type: Array,
            default: () => []
        },
        module: {
            type: String,
            default: 'recommend'
        },
        showLogClass: {
            type: String,
            default: ''
        },
        page: {
            type: String,
            default: ''
        },
        from: {
            type: String,
            default: ''
        },
        loadMore: {
            type: String,
            default: ''
        },
        loadStyle: {
            type: Object,
            default: () => {}
        },
        // 取消上间隔
        cancelTop: {
            type: Boolean,
            default: false
        },
        rn: {
            type: Number,
            default: 10
        },
        showPortrait: {
            type: Boolean,
            default: false
        },
        showBrief: {
            type: Boolean,
            default: false
        },
        // 标题
        fontSize: {
            type: String,
            default: '0.19rem'
        },
        topLine: {
            type: Boolean,
            default: false
        },
        resultConcat: {
            type: Boolean,
            default: true
        },
        livesource: {
            type: String,
            default: ''
        },
        // 是否为医典首页推荐
        isYdNewHome: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            status: 'loading',
            requesting: false,
            pn: 0,
            statusMap: {
                0: 'loading',
                1: 'complete',
                2: 'fail',
                3: ''
            }
        };
    },
    components: {
        Advert,
        ListLoading,
        BannerImage,
        // 'feeds-circles': FeedsCircles,
        VideoBigPic,
        'recommend-item': RecommendItem,
        'recommend-big-pic-item': RecommendBigPicItem
    },
    created() {
        if (this.recommends.length > 0) {
            this.pn = 1;
        } else {
            this.pn = 0;
        }
    },
    // lifetimes: {
    //     detached() {
    //         this.pn = 0;
    //     }
    // },
    methods: {
        loadFeeds(url, fn) {
            if ((url || this.loadMore) && !this.requesting && (this.status === 'loading' || this.status === 'fail')) {
                this.status = this.statusMap[0];
                this.requesting = true;
                this.$emit('onLoad', this.pn);
                request({
                    url: url || this.loadMore,
                    data: this.from === 'specTopic' ? {
                        pgno: this.pn + 1
                    } : {
                        pn: this.pn
                    },
                    isNeedLogin: false,
                    isFirstScreen: false
                })
                    .then(({data, update}) => {
                        if (data && data.data) {
                            this.status = this.statusMap[data.data.status];
                            if (data.data && data.data.result) {
                                let res = data.data.result;
                                if (this.resultConcat) {
                                    res = this.recommends.concat(res);
                                }
                                this.$emit('onLoaded', res, 'recommends');
                                this.pn++;
                            } else {
                                this.loadFail();
                            }
                            this.$mpUpdated().then(() => {
                                this.requesting = false;
                            });
                        } else {
                            this.loadFail();
                        }
                    })
                    .catch(error => {
                        if (this.from === 'specTopic') {
                            // 兼容专题页feed流重复加载的问题
                            this.status = this.statusMap[1];
                        } else {
                            this.loadFail(error);
                        }
                    });
            }
        },
        report(recommend, index) {
            // 首页推荐用ubc 打点
            if (this.page === 'feed') {
                try {
                    let params = {
                        type: 'clk',
                        value: 'brand_recommend',
                        ext: {
                            pd: 'feed',
                            id: recommend.nid,
                            pos: index,
                            ext: {
                                gr_ext: recommend.gr_ext
                            }
                        }
                    };
                    ubcInit({
                        eventName: 'indexclk',
                        serverId: 11314
                    });
                    ubcSend(params, 'indexclk');
                } catch (error) {

                }
            } else if (recommend && recommend.report) {
                if (process.env.MARS_ENV === 'swan') {
                    getApp().$api.request({url: recommend.report});
                }
                else {
                    const img = new Image();
                    img.src = recommend.report;
                }
            }
        },
        resetPn(pn = 0) {
            this.pn = pn;
        },
        setStatus(status) {
            this.status = this.statusMap[status];
        },
        loadFail(error) {
            this.status = this.statusMap[2];
            this.requesting = false;
            this.$mpUpdated().then(() => {
                this.$emit('onLoaded', this.recommends.concat([]), 'recommends');
            });
            console.error(error);
        },
        articlesDetailDot() {
            this.$emit('ydSelectItem');
        }
    }
};
</script>

<style lang="less" scoped>
.recommend {
    background: #fff;

    &-yd-home {
        box-shadow: 0 11px 16.7px 0 rgba(0, 0, 0, 0.08);
    }

    &--cancel-top {
        margin-top: -15px;
    }

    &--padding {
        padding: 15px 17px 15px;
    }

    &__line {
        margin: 0 17px;
        border-top: 1px solid #f1f1f1;
        transform: scaleY(.5);
    }

    &__title {
        margin: 0 0.17rem;
        padding: .2rem 0 .07rem;
        font-weight: bold;
        font-size: 0.19rem;
        color: #333;
        border-bottom: 1px solid #f1f1f1;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: .48rem;
            left: 0;
            width: 75px;
            height: 1px;
            background: #3c76ff;
        }
    }

    &__nomore {
        margin-top: 15px;
        padding-bottom: 15px;
        font-size: 14px;
        color: #999;
        text-align: center;
    }
}
</style>
