<template>
    <im-half-popup
        :is-open="isOpen"
        @isOpenChange="changeIsCloseByUser"
    >
        <view
            v-if="item.docInfo"
            class="doctor-introduce"
        >
            <view
                class="avatar-view"
                @tap="onTap(item.docInfo)"
            >
                <c-image
                    has-compress
                    :src="item.docInfo.avatarUrl || 'https://zhuanjia.su.bcebos.com/zhuanjia/b1556002148936538624.png'"
                    width="0.4rem"
                    height="0.4rem"
                    class="avatar"
                    :is-round="true"
                    :hack-white-stroke="false"
                    :extra="{column: 2}"
                />
            </view>
            <view class="c-line-clamp1">
                <view
                    v-if="item.docInfo.name"
                    class="doctor-name"
                >
                    {{ item.docInfo.name }}
                </view>
                <view class="professional-title c-line-clamp1">
                    {{ item.docInfo.level }} {{ item.docInfo.deptName }}
                </view>
            </view>
            <view
                v-if="item.docInfo.btns && item.docInfo.btns.length"
                class="right-icons"
            >
                <view
                    v-for="(icon, i) in item.docInfo.btns"
                    :key="i"
                    class="icon-box"
                    @tap="onTap(icon)"
                >
                    <image
                        v-if="icon.icon"
                        class="right-icon"
                        :src="icon.icon"
                    />
                    <view class="right-word">
                        {{ icon.title }}
                    </view>
                </view>
            </view>
        </view>

        <view
            v-if="item.serviceInfo"
            class="doctor-service"
            :style="{'background': item.serviceInfo.backgroundColor || ''}"
        >
            <view
                v-if="item.serviceInfo.serviceList && item.serviceInfo.serviceList.length"
                class="services-con"
            >
                <view class="services-box">
                    <view class="services-title">{{ item.serviceInfo.title }}</view>
                    <view
                        class="service-lists"
                    >
                        <view
                            v-for="(service, i) in item.serviceInfo.serviceList"
                            :key="i"
                            class="service-card"
                            @tap="onTap(service.btn, i)"
                        >
                            <view
                                v-if="service.icon"
                                class="service-icon"
                            >
                                <image
                                    class="icon-img"
                                    :src="service.icon"
                                />
                            </view>
                            <view
                                v-if="service.serviceName && service.content"
                                class="service-desc"
                            >
                                <view class="c-gap-bottom-5">
                                    <text class="service-title">{{ service.serviceName }}</text>
                                    <text class="service-price">{{ service.price }}</text>
                                </view>
                                <view class="service-content">
                                    {{ service.content }}
                                </view>
                            </view>
                            <view
                                v-if="service.btn"
                                class="service-btn"
                            >
                                <view
                                    v-if="service.btn.btnName"
                                    class="service-btn-text"
                                >
                                    {{ service.btn.btnName }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-if="item.serviceInfo.backgroundImg"
                class="card-watermark"
            >
                <c-image
                    has-compress
                    :src="item.serviceInfo.backgroundImg"
                    width="0.9rem"
                    height="0.46rem"
                    class="watermark"
                    :is-round="false"
                    :hack-white-stroke="false"
                    :extra="{column: 3}"
                />
            </view>
            <view
                v-if="item.serviceInfo.backgroundColor && item.serviceInfo.topColor"
                class="gradual-box gradual-back-green"
            />
        </view>

        <!-- tips -->
        <view
            v-if="item.otherServiceInfo && item.otherServiceInfo.tips"
            class="doctor-tips"
        >
            <view class="tips-line"></view>
            <view class="tips-text">{{ item.otherServiceInfo.tips }}</view>
        </view>

        <view
            v-if="item.otherServiceInfo"
            class="doctor-service"
            :style="{'background': item.otherServiceInfo.backgroundColor || ''}"
        >
            <view
                v-if="item.otherServiceInfo.serviceList && item.otherServiceInfo.serviceList.length"
                class="services-con"
            >
                <view class="services-box">
                    <view class="services-title">{{ item.otherServiceInfo.title }}</view>
                    <view
                        class="service-btns"
                    >
                        <view
                            v-for="(btn, i) in item.otherServiceInfo.serviceList"
                            :key="i"
                            class="other-btn"
                            @tap="onTap(btn.btn)"
                        >
                            <view
                                class="btn-text"
                            >
                                {{ btn.btn.btnName }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-if="item.otherServiceInfo.backgroundImg"
                class="card-watermark"
            >
                <c-image
                    has-compress
                    :src="item.otherServiceInfo.backgroundImg"
                    width="0.9rem"
                    height="0.46rem"
                    class="watermark"
                    :is-round="false"
                    :hack-white-stroke="false"
                    :extra="{column: 3}"
                />
            </view>
            <view
                v-if="item.otherServiceInfo.backgroundColor && item.otherServiceInfo.topColor"
                class="gradual-box gradual-back-gold"
            />
        </view>

        <view class="buffer-box"></view>
    </im-half-popup>
</template>

<script>
/**
 * @file im布局
 * @author baiyuhang
 * @categories 业务组件
 * @tags [component]
 */
import ImHalfPopup from './im-half-popup';
import CImage from '@components/common/image';

import {request} from '../../utils/request';
import {ubcSend} from '@utils/log';
import {navigate} from '@utils/navigate';
import {throttle} from '../../utils/core';


export default {
    config: {
        component: true
    },
    props: {
        // 组件的数据
        item: {
            type: Object,
            default: () => ({})
        },
        isOpen: {
            type: Number,
            default: 1
        },
        /**
        * 对话流唯一标识
        */
        qid: {
            type: [Number, String],
            default: ''
        },
    },
    components: {
        ImHalfPopup,
        CImage
    },
    data() {
        return {
            myIsOpen: this.isOpen
        };
    },
    mounted() {
        setTimeout(() => {
            this.initSend();
        }, 50);
    },
    methods: {
        initSend() {
            if (this.item) {
                if (this.item.docInfo.btns && this.item.docInfo.btns.length) {
                    this.item.docInfo.btns.forEach(o => {
                        if (o.title) {
                            ubcSend({
                                type: 'view',
                                value: `repeat_${o.title}`
                            });
                        }
                    });
                }
                if (this.item.serviceInfo
                    && this.item.serviceInfo.serviceList
                    && this.item.serviceInfo.serviceList.length) {
                    this.item.serviceInfo.serviceList.forEach(o => {
                        if (o.serviceName) {
                            ubcSend({
                                type: 'view',
                                value: `repeat_${o.serviceName}`
                            });
                        }
                    });
                }
                if (this.item.otherServiceInfo
                    && this.item.otherServiceInfo.serviceList
                    && this.item.otherServiceInfo.serviceList.length) {
                    this.item.otherServiceInfo.serviceList.forEach(o => {
                        if (o.btn.btnName) {
                            ubcSend({
                                type: 'view',
                                value: `repeat_${o.btn.btnName}`
                            });
                        }
                    });
                }
            }
        },
        changeIsCloseByUser(info) {
            this.$emit('isOpenChange', info);
        },
        onTap: throttle(function (info, i) {
            if (info.type && info.type === 'noramlNav') {
                if (i || i === 0) {
                    ubcSend({
                        type: 'clk',
                        value: `repeat_${this.item.serviceInfo.serviceList[i].serviceName}_${info.btnName}`
                    });
                } else {
                    ubcSend({
                        type: 'clk',
                        value: `repeat_${info.btnName || info.title || info.name}`
                    });
                }
                navigate({
                    url: info.url
                });
            } else if (info.type && info.type === 'comment') {
                ubcSend({
                    type: 'clk',
                    value: `repeat_${info.title}`
                });
                this.$emit('onPopup', {
                    type: info.type,
                    callback: info.url
                });
            } else if (info.type && info.type === 'pay') {
                ubcSend({
                    type: 'clk',
                    value: `repeat_${info.btnName}`
                });
                this.$emit('onPay', {
                    type: info.type,
                    url: info.url
                });
            } else if (info.type && info.type === 'changephone') {
                ubcSend({
                    type: 'clk',
                    value: `repeat_${info.btnName}`
                });
                this.$api.showLoading({
                    title: '请稍候...'
                });
                request({
                    url: info.url,
                    isFirstScreen: false,
                    isNeedLogin: true
                }).then(resp => {
                    this.$api.hideLoading();
                    if (resp.data) {
                        this.$emit('onPopup', {
                            type: info.type,
                            popup: resp.data
                        });
                    }
                });
            }
        }, 1000),
    }
};
</script>

<style lang="less" scoped>
.doctor-introduce {
    display: flex;
    align-items: center;
    margin: 0 0.07rem 0.2rem;

    .avatar-view {
        height: 0.4rem;
        position: relative;
        margin-right: 0.09rem;

        .avatar {
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 50%;
        }
    }

    .doctor-name {
        font-family: PingFangSC-Medium;
        font-size: 0.18rem;
        color: #1f1f1f;
        line-height: 0.18rem;
        font-weight: 500;
        margin-bottom: 0.08rem;
    }

    .professional-title {
        font-size: 0.14rem;
        line-height: 0.14rem;
        color: #1f1f1f;
    }

    .right-icons {
        margin-left: auto;
        display: flex;

        .icon-box {
            min-width: 0.43rem;
            margin-left: 0.09rem;
            text-align: center;
        }

        .right-icon {
            width: 0.21rem;
            height: 0.21rem;
        }

        .right-word {
            font-size: 0.13rem;
            color: #1f1f1f;
            line-height: 0.13rem;
            font-weight: 500;
        }
    }
}

.doctor-service {
    border-radius: 0.12rem;
    position: relative;
    margin-bottom: 0.08rem;

    .services-con {
        width: 100%;
        position: relative;
        z-index: 3;
        top: 0;

        .services-box {
            padding: 0.15rem 0.13rem;

            .services-title {
                color: #fff;
                font-size: 0.16rem;
                line-height: 0.16rem;
                margin-bottom: 0.15rem;
            }

            .service-lists {
                background-color: #fff;
                border-radius: 0.08rem;
            }

            .service-card {
                display: flex;
                align-items: center;
                padding: 0.15rem 0.13rem;

                .service-icon {
                    width: 0.24rem;
                    height: 0.24rem;
                    margin-left: 0.03rem;
                    margin-right: 0.12rem;

                    .icon-img {
                        width: 0.24rem;
                        height: 0.24rem;
                    }
                }

                .service-desc {
                    .service-title {
                        font-family: PingFangSC-Medium;
                        font-size: 0.16rem;
                        color: #1f1f1f;
                        line-height: 0.16rem;
                        font-weight: 500;
                    }

                    .service-price {
                        margin-left: 0.05rem;
                        font-size: 0.14rem;
                        color: #fd503e;
                        line-height: 0.18rem;
                        font-weight: 500;
                    }

                    .service-content {
                        color: #b5b5b5;
                        font-size: 0.13rem;
                        line-height: 0.13rem;
                    }
                }

                .service-btn {
                    margin-left: auto;
                    background: #00c8c8;
                    border-radius: 0.16rem;
                    padding: 0.09rem 0.15rem;

                    .service-btn-text {
                        font-size: 0.14rem;
                        color: #fff;
                        line-height: 0.14rem;
                        font-weight: 500;
                    }
                }
            }

            .service-btns {
                display: flex;
                justify-content: space-between;

                .other-btn {
                    width: 48%;
                    padding: 0.14rem 0;
                    background: #fff;
                    border-radius: 0.08rem;

                    .btn-text {
                        font-size: 0.16rem;
                        color: #1f1f1f;
                        text-align: center;
                        line-height: 0.16rem;
                        font-weight: 400;
                    }
                }
            }
        }
    }

    .card-watermark {
        width: 0.9rem;
        height: 0.46rem;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;

        .watermark {
            width: 0.9rem;
            height: 0.46rem;
        }
    }

    .gradual-box {
        width: 100%;
        height: 1.05rem;
        position: absolute;
        z-index: 1;
        top: 0;
        border-radius: 0.12rem;
    }

    .gradual-back-green {
        background: linear-gradient(0deg, rgb(234, 250, 250) 0%, rgb(76, 216, 216) 99%);
    }

    .gradual-back-gold {
        background: linear-gradient(0deg, rgb(252, 245, 235) 0%, rgb(241, 207, 156) 99%);
    }
}

.doctor-tips {
    margin: 0.2rem 0.29rem;
    position: relative;
    text-align: center;

    .tips-line {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 0.11rem;
        border-top: 1px solid #f1f1f1;
    }

    .tips-text {
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: #b5b5b5;
        line-height: 0.14rem;
        font-weight: 400;
        position: relative;
        text-align: center;
        background-color: #fff;
        margin: auto;
        padding: 0 0.09rem;
        display: inline-block;
    }
}

.buffer-box {
    width: 100%;
    height: 2px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.c-gap-bottom-5 {
    margin-bottom: 0.05rem;
}

.clear {
    clear: both;
}
</style>
