<template>
    <!-- 搜索 -->
    <view class="wrapper">
        <view
            class="c-row com-search"
            :class="['com-search--' + size, 'com-search--' + customClass]"
        >
            <navigate
                v-if="locationUrl"
                :url="locationUrl"
                class="c-span1 detail-location"
                @tap="reloadLocation"
            >
                <view class="detail-location__inner">
                    <c-icon
                        class="icon c-gap-right-small"
                        name="location"
                        font-size="15px"
                        :style="{
                            'margin-right': '3px',
                            'vertical-align': 'middle',
                        }"
                    />
                    <text v-if="locationText" class="detail-location__inner__text c-font-13">{{ locationText }}</text>
                    <view class="detail-location__inner__arrow">
                        <c-icon
                            class="icon c-gap-right-small"
                            name="play"
                            font-size="10px"
                        />
                    </view>
                </view>
            </navigate>
            <view class="c-span11">
                <view
                    class="com-search-bar wrapper"
                    @tap="onSearch"
                >
                    <navigate :url="searchUrl">
                        <c-icon name="search" class="com-search-bar-icon"/>
                        <text
                            :class="{
                                'searched': defaultWord,
                                'com-search-bar__placeholder': placeholder,
                            }"
                            class="c-gap-left c-font-normal"
                        >{{ defaultWord || placeholder }}</text>
                    </navigate>
                </view>
            </view>
            <view
                v-if="doctorAskIm"
                class="com-search__kefu"
                @tap="$emit('imPopupShow', doctorAskIm)"
            >
                <view :class="doctorAskIm.icon || 'm-icon-yaoshi'" class="m-icon"/>
                <view class="ask-text c-font-tiny">{{ doctorAskIm.title }}</view>
            </view>
            <navigate
                v-else-if="drugCartUrl"
                :url="drugCartUrl"
                class="c-span1 com-search-trolleys"
            >
                <view class="m-icon m-icon-trolleys"/>
            </navigate>
        </view>
    </view>
</template>

<script>
/**
* @file 公用头部
* @author zhangeryi
* @categories 业务组件
* @tags [component]
*/

import Navigate from '../common/navigate';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /* 跳转地址 */
        locationUrl: {
            type: String,
            default: ''
        },
        /* 文案 */
        locationText: {
            'type': String,
            'default': '定位中...'
        },
        /* 搜索跳转地址 */
        searchUrl: {
            type: String,
            default: ''
        },
        /* 占位 */
        placeholder: {
            type: String,
            default: ''
        },
        /* 默认value */
        defaultWord: {
            type: String,
            default: ''
        },
        /* 购物车api数据 */
        drugCartUrl: {
            type: String,
            default: ''
        },
        /* 客服 */
        doctorAskIm: {
            type: [Object, String],
            default: ''
        },
        size: {
            type: String,
            default: ''
        },
        customClass: {
            type: String,
            default: ''
        },
        /* 打点key */
        logkey: {
            type: String,
            default: ''
        }
    },
    components: {
        Navigate,
        CIcon
    },
    data() {
        return {
        };
    },
    methods: {
        reloadLocation() {
            /* 重新获取定位 */
            this.$emit('reloadLocation');
        },
        onSearch() {
            /* 触发搜索 */
            this.$emit('onSearch');
        }
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    padding-left: .15rem;
    padding-right: .15rem;
}

.com-search {
    align-items: center;
    &--mini {
        .com-search-bar {
            height: 32px;
            line-height: 32px;
            border-radius: 32px;
        }
    }
    &-bar {
        height: 38px;
        line-height: 38px;
        border-radius: 38px;
        color: #bbb;
        background: #fff;
        .searched {
            color: #333;
        }
        &-icon {
            display: inline-block;
            font-weight: 900;
        }
    }
    .detail-location {
        white-space: nowrap;
        width: auto;
        max-width: 100px;
        color: #fff;
        position: relative;
        margin-right: .1rem;
        padding-left: 0;
        @media screen and (max-width: 350px) {
            max-width: 60px;
        }
        &__inner {
            position: relative;
            line-height: 0;
            float: left;
            &__text {
                content: attr(text);
                color:#fff;
                -webkit-mask: linear-gradient(to right, #fff 70%, transparent);
                mask: linear-gradient(to right, #fff 70%, transparent);
                white-space: normal;
                height: 22px;
                line-height: 21px;
                overflow: hidden;
                display: inline-block;
                vertical-align: middle;
                white-space: nowrap;
                padding-right: .12rem;
                max-width: 65px;
                @media screen and (max-width: 350px) {
                    max-width: 40px;
                }
            }
            &__arrow {
                position: absolute;
                right: -8px;
                top: 12px;
                bottom: 0;
                width: .2rem;
                text-align: right;
                background-size: 35px 100%;
                .icon {
                    transform: scale(.7) rotate(90deg) translateX(-3px) translateY(-7px);
                    display: block;
                }
            }
        }
    }
    &-trolleys {
        color: #fff;
        width: auto;
        white-space: nowrap;
        flex: none;
        .m-icon {
            font-size: 20px;
        }
    }
    &__kefu {
        white-space: nowrap;
        width: auto;
        text-align: center;
        color: #fff;
        font-size: 10px;
        padding-left: 8px;
        padding-top: 4px;
        .m-icon {
            font-size: 22px;
            line-height: 1;
        }
    }
    &--transparent {
        .com-search-bar {
            color: #fff;
            background: rgba(255, 255, 255, .3);
            &__placeholder {
                opacity: .4;
            }
        }
    }
    &--black {
        .com-search-bar {
            color: #858585;
            background: #f5f5f5;
            &__placeholder {
                opacity: 1;
                color: #858585;
            }
        }
        .detail-location {
            color: #1f1f1f;
            &__inner {
                &__text {
                    color:#1f1f1f;
                    -webkit-mask: linear-gradient(to right, #fff 60%, transparent);
                    mask: linear-gradient(to right, #fff 60%, transparent);
                }
                .icon {
                    color: #1f1f1f;
                }
            }
        }
    }
}
</style>


