<template>
    <view class="content">
        <!-- 非重名医生首位 -->
        <view v-if="currentIndex === 0">
            <!-- 认领卡 -->
            <view v-if="claimType && (claimType === '1' || '2')">
                <!-- 医生头部信息 -->
                <doctor-card-head
                    v-if="docDetailMsg" 
                    :doc-detail-msg="docDetailMsg"
                    @tap="onNavtoDocHome"
                />
                <view class="message">
                    <!-- 复旦排行榜 -->
                    <view v-if="transformRanks && transformRanks.length" class="rank c-color-prime c-font-normal">
                        <view
                            v-for="(list, index) in transformRanks"
                            :key="index"
                        >
                            <rich-text :nodes="list"/>
                        </view>
                    </view>
                    <!-- 专业擅长 -->
                    <view
                        v-if="goodAtTag && goodAtTag.length"
                        class="advantage c-color-title"
                        @tap="onNavtoGoodAt"
                    >
                        <view class="advantage__title c-font-medium">{{ goodAtTitle }}<c-icon name="right"/></view>
                        <view class="c-line-clamp2 c-font-normal">
                            <text
                                v-for="(list, index) in goodAtTag"
                                :key="index"
                                class="advantage-good__at"
                            >{{ list }}</text>
                        </view>
                    </view>
                    <!-- 百科 -->
                    <view
                        v-if="encyclopediasInfo.baikeSummery || (encyclopediasInfo.baikeCatalog && encyclopediasInfo.baikeCatalog.length)"
                        class="encyclopedias c-color-title"
                        @tap="onNavtoBaike"
                    > 
                        <view class="encyclopedias__title c-font-medium">{{ baiKeTitle }}<c-icon name="right"/></view>
                        <view v-if="encyclopediasInfo.baikeSummery" class="c-line-clamp3 c-font-normal">{{ encyclopediasInfo.baikeSummery }}</view>
                        <view v-if="encyclopediasInfo.baikeCatalog && encyclopediasInfo.baikeCatalog.length" class="encyclopedias__subtitle c-color-title c-font-normal">
                            <view 
                                v-for="(list, index) in encyclopediasInfo.baikeCatalog"
                                :key="index"
                                class="encyclopedias__subtitle_detail"
                                :style="{
                                    'width': subtitleStyle,
                                }"
                            >{{ list.title }}</view>
                        </view>
                    </view>
                    <!-- 医生简介 -->
                    <view
                        v-if="description"
                        class="introduction c-color-title"
                        @tap="onNavtoBrief"
                    >
                        <view class="encyclopedias__title c-font-medium">{{ descriptionTitle }}<c-icon name="right"/></view>
                        <view class="c-line-clamp3 c-font-normal">{{ description }}</view>
                    </view>
                    <!-- 医生服务 -->
                    <view v-if="services" class="clinic">
                        <view
                            v-if="services.title"
                            class="clinic__title c-font-medium"
                            @tap="onNavtoClinic"
                        >{{ services.title }}<c-icon name="right"/></view>
                        <doctor-card-service
                            v-if="services.list && services.list.length"
                            :service-info="services.list"
                            @toDetailService="toDetailService"
                        />
                    </view>
                    <!-- 查看更多 -->
                    <card-item-bottom-more v-if="docDetailMsg" @tap="onNavtoDocHome"/>
                </view>
            </view>
            <!-- 未认领 -->
            <view v-else>
                <view class="unclaimed">
                    <!-- 医生头部信息 -->
                    <doctor-card-unclaimed-head
                        v-if="docDetailMsg"
                        :doc-detail-msg="docDetailMsg"
                        :transform-ranks="transformRanks"
                        @tap="onNavtoDocHome"
                    />
                    <!-- 专业擅长 -->
                    <view
                        v-if="goodAtTag && goodAtTag.length"
                        class="advantage c-color-title"
                        @tap="onNavtoGoodAt"
                    >
                        <view class="advantage__title c-font-medium">{{ goodAtTitle }}<c-icon name="right"/></view>
                        <view class="c-line-clamp2">
                            <text 
                                v-for="(list, index) in goodAtTag" 
                                :key="index" 
                                class="advantage-good__at c-font-normal"
                            >{{ list }}</text>
                        </view>
                    </view>
                    <!-- 服务 -->
                    <doctor-card-unclaimed-service
                        v-if="services.list && services.list.length"
                        :service="services.list"
                        @toDetailService="toDetailService"
                    />
                </view>
                <!-- 查看更多 -->
                <card-item-bottom-more v-if="docDetailMsg" @tap="onNavtoDocHome"/>
            </view>
        </view>
        <!-- 非重名医生非首位 -->
        <view v-else>
            <view class="non-primacy">
                <view class="non-primacy__title c-font-17">{{ title }}</view>
            </view>
            <view v-if="expertList && expertList.length > 0" class="space">
                <view
                    v-for="(expert, index) in expertList" 
                    :class="[
                        index === 0 ? 'expert-space' : '',
                        'expert-item',
                    ]"
                >
                    <new-expert-item
                        :key="index"
                        :expert="expert"
                        :page-source="'searchCard'"
                    />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file ala 医生卡
 * @author chenhongfan
 */

import doctorCardHead from '@components/common/doctor-card-head';
import doctorCardService from '@components/common/doctor-card-service';
import doctorCardUnclaimedHead from '@components/common/doctor-card-unclaimed-head';
import doctorCardUnclaimedService from '@components/common/doctor-card-unclaimed-service';
import newExpertItem from '@components/doctor/new-expert-item';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '../../utils/navigate';
import CardItemBottomMore from './card-item-bottom-more';

export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        newExpertItem,
        doctorCardHead,
        doctorCardService,
        CardItemBottomMore,
        doctorCardUnclaimedHead,
        doctorCardUnclaimedService,
    },
    props: {
        currentIndex: {
            type: Number,
            default: 0
        },
        doctorInfo: {
            type: Object,
            default: () => {}
        },
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            result: {},
            services: {},
            // 认领 '1'||'2' 未认领 ''
            claimType: '',
            // 医生四元组信息
            docDetailMsg: {},
            fudanRanks: {},
            ranks:[],
            transformRanks: [],
            goodAtTag: [],
            goodAtTagUrl: '',
            goodAtTagSwanUrl: '',
            encyclopediasInfo: {},
            description: '',
            descriptionSwanUrl: '',
            descriptionUrl: '',
            subtitleStyle: '',
            changeExpertList: [],
            searchDoctor: true,
            expertList: [],
            labelList: [],
            pageSource: 'searchCard',
            goodAtTitle: '专业擅长',
            baiKeTitle: '百度百科',
            descriptionTitle: '医生简介'
        };
    },
    watch: {
        doctorInfo: {
            immediate: true,
            handler(val) {
                this.init(val);
            }
        }
    },
    created() {
        this.subtitleStyle = this.encyclopediasInfo.baikeCatalog.length > 1
            ? `calc(${100 / this.encyclopediasInfo.baikeCatalog.length}% - 4px)`
            : '';
    },
    mounted() {
        this.init(this.doctorInfo);
    },
    methods: {
        init(params) {
            this.result = params || {};
            this.services = this.result.services || {};
            let doctorMessage = this.result.doctor || {};
            // 认证标志
            const {
                claimType = '',
                topPhoto = '',
                docName = '',
                title = '',
                depart = '',
                hospital = '',
                url = '',
                swan_url = '',
                hostpitalLevel = '',
                isJingXuan = '',
                yidianTag = '',
                authenticationTag = '',
                fudanDepartRank = '',
                areaFudanDepartRank = '',
                fudanRank = '',
                areaFudanRank = '',
                goodAtTag = [],
                goodAtTagUrl = '',
                goodAtTagSwanUrl = '',
                baikeCatalog = [],
                baikeDoctorUrl = '',
                baikeDoctorSwanUrl = '',
                baikeSummery = '',
                baikeDoctorDes = '',
                description = '',
                descriptionSwanUrl = '',
                descriptionUrl = ''
            } = doctorMessage;
            this.claimType = claimType;
            this.docDetailMsg = {
                topPhoto,
                docName,
                title,
                depart,
                hospital,
                url,
                swan_url,
                // 三甲
                hostpitalLevel,
                // 精选医生
                isJingXuan,
                // 医典专家
                yidianTag,
                // 已认证
                authenticationTag
            };
            // 复旦排行
            this.fudanRanks = {
                fudanDepartRank,
                areaFudanDepartRank,
                fudanRank,
                areaFudanRank
            };
            this.ranks = Object.values(this.fudanRanks).filter(Boolean);
            let fontColor = ['1', '2'].includes(this.claimType) ? '#4E6EF2' : '#00C8C8';
            if (this.ranks && this.ranks.length) {
                this.transformRanks = this.ranks.map((rank) => {
                    return rank.replace(/<[^>]*>(.*)<\/[^>]*>/gm, `<span style="color:${fontColor}">$1</span>`);
                });
            }
            // 擅长
            this.goodAtTag = goodAtTag;
            this.goodAtTagUrl = goodAtTagUrl;
            this.goodAtTagSwanUrl = goodAtTagSwanUrl;
            // 百科
            this.encyclopediasInfo = {
                baikeCatalog: baikeCatalog,
                baikeDoctorUrl: baikeDoctorUrl,
                baikeDoctorSwanUrl: baikeDoctorSwanUrl,
                baikeSummery: baikeSummery,
                baikeDoctorDes: baikeDoctorDes
            };
            // 展示四个百度百科小标题
            if (this.encyclopediasInfo.baikeCatalog && this.encyclopediasInfo.baikeCatalog.length > 4) {
                this.encyclopediasInfo.baikeCatalog = this.encyclopediasInfo.baikeCatalog.slice(0, 4);
            }
            // 医生简介
            this.description = description;
            this.descriptionSwanUrl = descriptionSwanUrl;
            this.descriptionUrl = descriptionUrl;
            // 非重名医生复旦排行榜数据处理
            let expertInfoList = this.result.expertList || [];
            if (expertInfoList && expertInfoList.length) {
                this.expertList = expertInfoList.map((list) => {
                    return JSON.parse(JSON.stringify(list));
                });
            }
            if (this.expertList && this.expertList.length) {
                this.expertList.map((list) => {
                    if (list.labelList && list.labelList.length) {
                        list.labelList.map((item) => {
                            item.label = item.label.replace(
                                /<[^>]*>(.*)<\/[^>]*>/gm,
                                '<span style="color: #4E6EF2">$1</span>'
                            );
                        });
                    }
                });
            }
        },
        // 百度百科
        onNavtoBaike() {
            let swanUrl = this.encyclopediasInfo.baikeDoctorSwanUrl;
            let url = this.encyclopediasInfo.baikeDoctorUrl;
            navigate({
                url: process.env.MARS_ENV === 'swan' && swanUrl ? swanUrl : url,
                urlType: '1',
                log: {
                    type: 'clk',
                    value: 'searchCardBaike'
                }
            });
        },
        // 医生简介
        onNavtoBrief() {
            let swanUrl = this.descriptionSwanUrl;
            let url = this.descriptionUrl;
            navigate({
                url: swanUrl ? swanUrl : url,
                log: {
                    type: 'clk',
                    value: 'searchCardDocBrief'
                }
            });
        },
        // 医生服务
        onNavtoClinic() {
            let clinicUrl = this.services.url;
            navigate({
                url: clinicUrl,
                log: {
                    type: 'clk',
                    value: 'xcx_doccard_ysfw'
                }
            });
        },
        // 医生主页
        onNavtoDocHome() {
            navigate({
                url: this.docDetailMsg.url,
                log: {
                    type: 'clk',
                    value: 'xcx_doccard_stra'
                }
            });
        },
        toDetailService(params) {
            if (params.url || params.unifiUrl) {
                navigate({
                    url: params.url || params.unifiUrl,
                    log: {
                        type: 'clk',
                        value: params.tcType || ''
                    }
                });
            }
        },
        // 专业擅长
        onNavtoGoodAt() {
            let goodAtUrl = this.goodAtTagUrl || this.goodAtTagSwanUrl;
            goodAtUrl && navigate({url: goodAtUrl});
        }
    }
};

</script>

<style lang="less" scoped>
.content {
    border-radius: 12px;
    margin-bottom: 0.1rem;
    background: #ffffff;
}
.message {
    padding: 0px 13px;
}
.rank {
    background: #F5F5F5;
    border-radius: 9px;
    padding: 7px 15px;
    margin-bottom: 17px;
}
.advantage {
    padding-bottom: 7px;
    &__title {
        padding-bottom: 6px;
    }
    &-good {
        &__at {
            margin-right: .08rem;
            display: inline-block;
            &:nth-child(n + 2) {
                &:before {
                    content: '';
                    display: inline-block;
                    width: .01rem;
                    height: .14rem;
                    background: #F1F1F1;
                    margin: 0 .08rem 0 0;
                    vertical-align: middle;
                    position: relative;
                    top: -.01rem;
                }
            }
        }
    }
}
.encyclopedias {
    margin-bottom: 13px;
    &__title {
        padding-bottom: 6px;
    }
    &__subtitle {
        display: flex;
        justify-content: space-between;
        padding-top: 6px;
        &_detail {
            text-align: center;
            background-color: #F5F5F5;
            border-radius: 9px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            padding: 6px 0px;
        }
    }
}
.introduction {
    padding-bottom: 8px;

    &__title {
        padding-bottom: 6px;
    }
}
.clinic {
    margin-bottom: 17px;
    &__title {
        padding-bottom: 6px;
    }
}
.unclaimed {
    padding: 0 13px 14px;
    &-more {
        border-top: 1px solid #f1f1f1;
    }
}
.more {
    text-align: center;
    padding: 11px 0px 4px;
    &__space {
        padding-top: 15px;
    }
}
.non-primacy {
    display: flex;
    padding: 11px 13px 10px;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 15px;
    &__title {
        flex: 1;
        color: #1F1F1F;
        font-weight: 700;
    }
}
.duplicate-name {
    color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 12px 13px 12px;
    background-image: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
    margin-bottom: 11px;
}
.expert-item {
    padding: 14px 13px 0px;
}
.expert-space {
    padding-top: 0px;
}
.space {
    padding-bottom: 15px;
}

</style>
