<template>
    <view
        class="feedback-btn-box"
        :class="collectClass"
        :style="{
            transform: !isUpfold ? 'translateX(' + moveWidth + 'px)' : '',
        }"
        @tap.stop="checkTap"
    >
        <view>
            <view
                class="feedback-icon"
                :style="{
                    backgroundImage: 'url(' + consultData.docImg + ')',
                }"
            />
            <view v-if="consultData.weakTitle" class="weak-title">
                {{ consultData.weakTitle }}
            </view>
        </view>
        <view id="consult" class="feedback-font">
            <view class="title">{{ consultData.title }}</view>
            <view class="text">{{ consultData.subtitle }}</view>
        </view>
        <view
            class="close"
            :class="!isUpfold ? 'upfold' : ''"
            @tap.stop="closeConsult"
        >
            <image
                src="https://med-fe.cdn.bcebos.com/yd/consult_close.png"
                class="close-icon"
            />
        </view>
    </view>
</template>


<script>
import { ubcSend } from '@utils/log';
/**
 * @file 悬浮窗-more
 * @author mazihan@baidu.com
 * @categories 悬浮窗组件
 * @tags [component]
 */
/* global getApp, getCurrentPages */
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 展开或者收起
         */
        isUpfold: {
            type: Boolean,
            default: true
        },
        consultData: {
            type: Object,
            default: () => ({})
        },
        collectClass: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            moveWidth: ''
        };
    },
    mounted() {
        const consultDom = this.$api.createSelectorQuery().select('#consult');
        consultDom
            .boundingClientRect(rect => {
                const {width} = rect || {};
                if (width) {
                    this.moveWidth = width;
                }
            })
            .exec();
    },
    methods: {
        checkTap() {
            this.$emit('clickFloatBtn', true);
            ubcSend({
                type: 'clk',
                value: 'ydcty_fuchuangdianji',
            });
        },
        closeConsult() {
            /**
             * 关闭浮窗
             */
            this.$emit('closeConsult', true);
        }
    }
};
</script>
<style lang="less" scoped>
.feedback-btn-box {
    padding: 0.04rem 0 0.04rem 0.04rem;
    border-radius: 0.5rem 0 0 0.5rem;
    display: flex;
    align-items: center;
    background-image: linear-gradient(-2deg, #00bcbc 36%, #00c8c8 99%);
    position: fixed;
    right: 0px;
    bottom: 22%;
    border-right: none;
    box-shadow: 0 0 5px 1.667px rgba(85, 85, 85, 0.08);
    transition: all 0.5s;
    transform: translateZ(0);
    z-index: 9;
    .feedback-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 0.4rem;
        height: 0.4rem;
        background-size: 100%;
        background-repeat: no-repeat;
        border-radius: 50%;
        margin-right: 0.08rem;
        .icon {
            color: #fff;
            font-size: 0.23rem;
        }
    }
    .close {
        position: absolute;
        left: -9px;
        top: -14px;
        .close-icon {
            width: 18px;
            height: 18px;
            display: block;
        }
    }
    .weak-title {
        position: absolute;
        padding: 0 .04rem;
        bottom: 0;
        left: 0;
        height: .16rem;
        line-height: .16rem;
        font-weight: bold;
        font-size: 10px;
        color: #00A2A2;
        background-image: linear-gradient(180deg, #E3FFFF 0%, #91F3F3 100%);
        box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.68);
        border-radius: .08rem;
    }
    .feedback-font {
        color: #fff;
        line-height: 1;
        padding-right: 0.08rem;
        max-width: 1.6rem;
        .title {
            margin-top: 1px;
            font-size: 0.16rem;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .text {
            padding-top: 0.04rem;
            font-size: 0.12rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    &.upfold {
        transform: translateX(0.46rem);
    }
}
</style>
