<template>
    <c-popup
        :show="show"
        row-tile
        show-title-line
        :show-close-handler="false"
        :title="'公益咨询'"
        border-radius="12px"
        show-close
        max-height="80.3%"
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <view
            class="consult-wrap"
        >
            <view class="title">{{ titleText }}</view>
            <view class="item">1. 当前病情分析及建议</view>
            <view class="item item-extra">2. 定期随访服务，监控病情发展</view>
            <view class="tips"> 填写问卷后专家团队会和您进一步沟通判断是否可以进组，如不能进组您可以选择咨询百度健康其他医生 </view>
            <view class="tips">
                您填写的问卷内容仅用于判断是否符合进组要求，请提前阅读
                <text class="privacy" @tap.stop="clickPrivacy"> 《隐私政策》 </text>，提交问卷代表您已阅读并同意政策
                <view>
                    <view class="btn" @tap.stop="clickBtn">
                        填写问卷
                    </view>
                </view>
            </view></view></c-popup>
</template>

<script>
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import { navigate } from '@utils/navigate';
import { ubcSend } from '@utils/log';
/**
 * @file 公益咨询弹窗
 * @author mazihan@baidu.com
 * @categories 弹窗组件
 * @tags [component]
 */
/* global getApp, getCurrentPages */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CPopup
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            type: Boolean,
            default: true
        },
        data: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            titleText: '',
            privacyUrl:
                'https://expert.baidu.com/med/template/#/pages/speTopic/dict/articles/index?contentid=ydar_11677588125250960919'
        };
    },
    mounted() {
        const { data } = this.data;
        if (Array.isArray(data) && data.length) {
            const rank = data[0].docRank;
            const name = data[0].name;
            const randText = rank ? '院士' : '专家';
            this.titleText = `开始咨询前请先完成一份简单的问卷，如果符合要求,您将得到${name}${randText}团队的免费咨询服务，包含：`;
        }
    },
    methods: {
        handlePopupClose() {
            /**
             * 弹窗关闭
             */
            this.$emit('handlePopupClose');
        },
        clickPrivacy() {
            this.$emit('handlePopupClose');
            this.navigateAfterPopup(this.privacyUrl, 'clk', 'privacy');
        },
        clickBtn() {
            this.$emit('handlePopupClose');
            const { consultData: { jumpUrl } } = this.data;
            jumpUrl && this.navigateAfterPopup(jumpUrl, 'clk', 'jump');
            ubcSend({
                type: 'clk',
                value: 'ydcty_gongyitiaozhuandianji',
            });
        },
        navigateAfterPopup(url, logType, logValue) {
            const p = new Promise((resolve, reject) => {
                resolve();
            });
            p.then(() => {
                navigate({
                    url: url,
                    log: {
                        type: logType,
                        value: logValue,
                    }
                });
            });
        }
    }
};
</script>
<style lang="less" scoped>
.consult-wrap {
    padding: 0.15rem 0.17rem 0.31rem;
    .title {
        font-size: 0.16rem;
        color: #1f1f1f;
        line-height: 0.26rem;
    }
    .item {
        padding-top: 0.07rem;
        font-size: 0.16rem;
        color: #1f1f1f;
        font-weight: bold;
    }
    .item-extra {
        padding-top: 0.05rem;
    }
    .tips {
        position: relative;
        padding-left: 0.12rem;
        font-size: 0.14rem;
        color: #b5b5b5;
        line-height: 0.22rem;
        padding-top: 0.22rem;
        &:nth-last-child(1) {
            padding-top: 0.04rem;
        }
        &::before {
            content: '*';
            color: red;
            position: absolute;
            left: 0;
        }
        .privacy {
            color: #00C8C8;
        }
    }
    .btn {
        background-image: linear-gradient(134deg, #00cfa3 0%, #05cfcd 61%, #00d3ea 100%);
        box-shadow: 0 3px 7px 0 rgba(0, 200, 200, 0.3);
        border-radius: 0.22rem;
        height: 0.44rem;
        line-height: 0.44rem;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 0.16rem;
        margin-top: 0.35rem;
    }
}
</style>
