<template>
    <view class="c-inline">
        <!-- icon -->
        <view class="c-font-small pv-color" @tap="onTap">
            <c-icon name="call-shield" font-size="16px"></c-icon>
            <!--问诊流程优化去掉文案，pm令茹，rd佳宏已确认-->
            <!-- <text class="c-gap-left-small">隐私保护</text> -->
        </view>
        <c-dialog
            v-if="item.popupInfo"
            :show="isShow"
            :title="item.popInfo.title"
            :btn-opts="[
                {
                    text: item.popInfo.footerTxt,
                    event: 'cancel'
                }
            ]"
            @btntap="onClose"
        >
            <view class="c-font-medium c-color">{{ item.popInfo.subTitle }}</view>
            <view class="pv-ctn c-gap-top-small">
                <image :src="item.popInfo.img" mode="widthFix" class="pv-img"></image>
                <view class="c-font-small c-color-gray pv-text">{{ item.popInfo.content }}</view>
            </view>
        </c-dialog>
    </view>
</template>

<script>
/**
 * @file components/im/im-private
 * @author haoyan
 */
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Dialog from '@baidu/med-ui/components/Dialog/Dialog';

import {send} from '../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        item: {
            type: Object
        }
    },
    data() {
        return {
            isShow: false
        };
    },
    components: {
        'c-icon': Icon,
        'c-dialog': Dialog
    },
    methods: {
        // 点击[隐私保护]
        onTap() {
            this.isShow = true;
            send({
                type: 'b',
                action: 'tapPrivacy'
            });
        },
        // 点击[我知道了]
        onClose() {
            this.isShow = false;
            send({
                type: 'b',
                action: 'closePrivacy'
            });
        }
    }
};
</script>

<style lang="less">
@imgWid: 0.54rem;
.pv-color {
    display: inline-block;
    color: #38f;
}
.pv-ctn {
    position: relative;
}
.pv-img {
    width: @imgWid;
    position: absolute;
    top: 50%;
    margin-top: -1 * @imgWid / 2;
}
.pv-text {
    margin-left: @imgWid;
}
</style>
