<template>
    <view class="result-list">
        <template>
            <view
                v-for="(item, index) in dataList"
                :key="index"
                use-trackby
            >
                <!-- 视频文章 -->
                <card-recommend-item
                    v-if="tag === 'article' || tag === 'video'"
                    :top-line="index !== 0"
                    :title="item.title"
                    :doctor="{
                        name: item.expertName,
                        rank: item.expertRank,
                        label: item.hospitalTag,
                        hospital: item.hospitalName,
                    }"
                    :url="item.unifiUrl"
                    :show-play="tag === 'video'"
                    :image="item.img"
                    :page="'pages/brand/search/index'"
                    :module="'search-recommend-list'"
                    @articlesDetailDot="articlesDetailDot"
                />
                <!-- 问答 -->
                <view v-else-if="tag === 'wenda'" class="item-wenda">
                    <view class="item-wenda-cont">
                        <card-wenda :key="index" :wenda="item"/>
                    </view>
                </view>
                <!-- 问诊 -->
                <view v-else-if="tag === 'wz'" class="c-padding-10">
                    <view>
                        <!-- 非定向推荐 -->
                        <view
                            v-if="item.resultType
                                && (item.resultType === 'wzCard' || item.resultType === 'phoneClinicCard')"
                            class="item-type-card"
                        >
                            <card-rec :item="item"/>
                        </view>
                        <!-- 推荐三甲医生专家服务 -->
                        <view v-else-if="item.resultType && item.resultType === 'imgCard'" class="doc-type-card">
                            <image
                                v-for="(card, index) in item.list"
                                :key="index"
                                :src="card.img"
                                mode="widthFix"
                                class="doc-card"
                                @tap="navigateTo(card)"
                            />
                        </view>
                        <!-- 专病推荐 -->
                        <view v-else-if="item.resultType && item.resultType === 'diseaseCard'" class="c-gap-bottom">
                            <c-navigate :url="item.msUrl" :extra="{id: item.resultType}">
                                <view class="c-width item-type-radius">
                                    <c-image
                                        :src="item.img"
                                        mode="widthFix"
                                        has-compress
                                        :hack-white-stroke="false"
                                        :is-round="true"
                                        width="100%"
                                        height="100%"
                                        :extra="{column: 2}"
                                    />
                                </view>
                            </c-navigate>
                        </view>
                        <!-- 搜索结果 -->
                        <view
                            v-else
                            :class="item.showLogSign"
                            :data-show="'expert_' + item.expertId + ',' + (index + 1) + ',' + (item.expTag || '')"
                            class="item-type-card-wz"
                        >
                            <card-wz-doctor :expert="item" :index="index"/>
                        </view>
                    </view>
                </view>
                <!-- 医生 -->
                <view v-else-if="tag === 'ys'" class="c-padding-10">
                    <view>
                        <view class="item-type-doctor-card">
                            <basic-doctor :expert="item" :current-type="currentTagValue"/>
                        </view>
                        <!-- 最后一个医生之后增加非定向问诊入口 -->
                        <view
                            v-if="dataList.length === index + 1 && currentTagValue === '2'"
                            class="item-type-card"
                        >
                            <online-wz/>
                        </view>
                    </view>
                    <view
                        v-if="(length && length <= 2 && (++index) === length) || (length > 2 && index === 1)"
                        class="find-outer"
                    >
                        <view @tap="onTap(bannerImg.jumpUrlDoctor)">
                            <c-image
                                :src="bannerImg.findDoctor"
                                mode="widthFix"
                                radius="0.08rem"
                                width="100%"
                                height="82px"
                                has-compress
                                :hack-white-stroke="false"
                                :is-round="false"
                                :extra="{column: 12}"
                            />
                        </view>
                    </view>
                </view>
                <!-- 医院 -->
                <view v-else-if="tag === 'hp'" class="c-padding-10">
                    <view class="c-gap-bottom">
                        <hospital-card-item :hospital="item" class="hospital-item c-gap-bottom"/>
                    </view>
                </view>
                <!-- 疫苗 -->
                <view v-else-if="tag === 'ym'" class="c-padding-10">
                    <view class="c-gap-bottom-large">
                        <package-item
                            :package-info="item"
                            btn-color="#06CB9D"
                            :item-style="{
                                'margin-bottom': '20px',
                            }"
                        />
                    </view>
                </view>
                <!-- 体检 -->
                <view v-else-if="tag === 'tj'" class="c-padding-10">
                    <view class="c-gap-bottom-large">
                        <physical-package
                            :package-info="item"
                            btn-color="#06CB9D"
                            :ubc="UBC"
                        />
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
/**
 * @file 问诊搜索结果
 * @author chenshuo04
 * @categories 二级页面
 * @tags [page]
 */
import CardWenda from './card-wenda';
import CardRecommendItem from '../speTopic/Recommend/RecommendItem';
import CardWzDoctor from './card-wz-doctor';
import CardRec from './card-wz-rec';
import BasicDoctor from '../doctor/basic-doctor';
import PackageItem from '../physical/PackageItem';
import PhysicalPackage from '../physical/PhysicalPackage';
import CNavigate from '../common/navigate';
import HospitalCardItem from '../zyy/hospital-new-card';
import OnlineWz from '../doctor/online-wz';
import {navigate} from '../../utils/navigate';
import {ubcSend} from '@utils/log';

import CImage from '@components/common/image';


export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CardRecommendItem,
        CardWenda,
        CardRec,
        CardWzDoctor,
        PackageItem,
        PhysicalPackage,
        CNavigate,
        HospitalCardItem,
        BasicDoctor,
        OnlineWz,
        CImage
    },
    props: {
        /**
         * 数据列表
         */
        dataList: {
            type: Array
        },
        /**
         * 当前选中tag
         */
        tag: {
            type: String,
            default: ''
        },
        /**
         * ubc判断page
         */
        ubcByPage: {
            type: String,
            default: ''
        },
        currentTagValue: {
            type: String,
            default: ''
        },
        doctorSample: {
            type: String,
            default: ''
        }
    },
    data() {
        const UBC = {
            type: 'clk',
            value: 'search',
            ext: {
                pd: 'tj',
                value_type: 'search_tj'
            }
        };
        return {
            logkey: 'searchListDrug',
            UBC,
            length: 0,
            bannerImg: {
                findDoctor: 'https://med-fe.cdn.bcebos.com/brand/seoFindDoctor.png',
                jumpUrlDoctor: '/pages/doctor/finddoc/index?pd=med&openapi=1&from_sf=1&resource_id=5216&vn=med&word=%E9%97%AE%E5%8C%BB%E7%94%9F&atn=finddoc&title=%E6%89%BE%E5%8C%BB%E7%94%9F', // eslint-disable-line
            }
        };
    },
    created() {
        this.length = this.dataList && this.dataList.length;
    },
    methods: {
        articlesDetailDot() {
            if (this.ubcByPage === 'ydSearch') {
                ubcSend({
                    type: 'clk',
                    value: 'ydss_wenzhangjieguo'
                });
            }
        },
        navigateTo(card) {
            navigate({
                url: card.msUrl
            });
        },
        onTap(url) {
            navigate({
                url
            });
        },
        doctorTabClick(item) {
            this.$emit('doctorTabClick', item);
        }
    }
};
</script>
<style lang="less" scoped>
.c-padding-10 {
    padding: 0 0.1rem;
}

.result-list {
    .item-wenda {
        padding: 0 10px;

        &-cont {
            padding: 5px 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            background: #fff;
            // box-shadow: 0 3px 20px 0 rgba(0,0,0,0.08);
        }
    }

    .item-type-card {
        position: relative;
        border-radius: 12px;
        padding: 0.15rem 0.13rem;
        background: #fff;
        margin-bottom: 0.15rem;
    }

    .item-type-doctor-card {
        position: relative;
        border-radius: 8px;
        padding: 0.15rem 0.13rem .05rem;
        background: #fff;
        margin-bottom: 0.1rem;
    }

    .doc-type-card {
        position: relative;
        border-radius: 12px;
        margin-bottom: 0.1rem;

        .doc-card {
            width: 100%;
            display: block;
        }
    }

    .item-type-card-wz {
        position: relative;
        border-radius: 12px;
        padding: 0.18rem 0.13rem;
        background: #fff;
        margin-bottom: 0.1rem;
    }

    .item-type-radius {
        border-radius: 8px;
    }

    .find-outer {
        width: 100%;
        margin-top: -0.04rem;
        margin-bottom: 0.06rem;
        border-radius: 0.08rem;
        overflow: hidden;
    }
}
</style>
<style lang="less" scoped>
.tab-list {
    position: relative;
    padding: 0px 10px 10px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    background: #f5f5f5;
}
</style>
