<template>
    <view
        class="head"
        :style="{
            background: background,
            paddingTop: topHeight + 'px',
            paddingBottom: searchTag && searchTag.length ? '10px' : '5px',
        }"
    >
        <!-- 搜索 -->
        <view class="search c-font-15">
            <navigate :url="path" class="search-left">
                <view class="search-location c-gap-inner-right c-line-clamp1">
                    <c-icon name="location" class="location-icon"/>
                    <view class="location-provice c-gap-right-small">{{ cityName }}</view>
                </view>
            </navigate>
            <navigate :url="searchUrl" class="search-right">
                <c-icon name="search" class="icon"/>
                <text class="c-gap-left-small">{{ searchText }}</text>
            </navigate>
        </view>
        <!-- 搜索tag -->
        <scroll-view scroll-x>
            <view class="search-tag">
                <view
                    v-for="(tag, tagIndex) in searchTag"
                    :key="tagIndex"
                    class="search-tag-i c-gap-right"
                    @tap="toDetail(tag)"
                >
                    {{ tag.text }}
                </view>
            </view>
        </scroll-view>

    </view>
</template>

<script>
import {getPageLocation} from '../../utils/location';

import CIcon from '@baidu/med-ui/components/Icon/Icon';
import Navigate from './navigate';
import {ubcSend} from '@utils/log';
import {navigate} from '@utils/navigate';
/**
 * @author chenshuo04
 * @file 搜索头部
 * @categories 通用组件
 * @tags [component]
 */
/* global getApp, swan, Page, getCurrentPages, _pages */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        Navigate
    },
    props: {
        /**
         * searchTag 搜索词列表
         * @param
         */
        searchTag: {
            type: Array,
            default: () => []
        },
        /**
         * 搜索url
         */
        searchUrl: {
            type: String,
            required: true
        },
        /**
         * 背景颜色
         */
        background: {
            type: String,
            default: 'linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%)'
        },
        /**
         * 搜索词
         */
        searchText: {
            type: String,
            default: '输入疾病、医生、科室、医院'
        },
        /**
         * topbar高度
         */
        topHeight: {
            type: Number,
            default: 44
        },
        // ubc打点必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    data() {
        let isSwan = true;
        if (process.env.MARS_ENV === 'h5') {
            isSwan = false;
        }
        return {
            isSwan,
            cityName: '',
            path: ''
        };
    },
    created() {
        this.path =
            '/pages/brand/citylist/index?title=选择城市&toPage=/' +
            encodeURIComponent(getCurrentPages()[getCurrentPages().length - 1].route);
        getPageLocation().then(city => {
            this.cityName = city && city.name ? city.name : '北京';
        });
    },
    methods: {
        toDetail(tag) {
            // !!!体检埋点
            if (tag && tag.text && tag.text.indexOf('体检') > -1) {
                ubcSend({
                    page: this.page,
                    type: 'clk',
                    value: 'tags',
                    ext: {
                        pd: 'tj',
                        'value_type': 'tj_tags',
                        'value_id': tag.trackType || tag.text
                    }
                });
            }

            navigate({url: tag.path});
        }
    }
};
</script>
<style lang="less" scoped>
.head {
    overflow: hidden;
    position: relative;
}
.search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px;
    box-sizing: border-box;
    margin-left: 0.17rem;
    margin-right: 0.17rem;
    .search-left {
        white-space: nowrap;
        display: inline-block;
        max-width: 100px;
    }
    .search-location {
        color: #ffffff;
    }
    .location-provice {
        display: inline;
    }
    .location-icon {
        width: 0.14rem;
        height: 0.2rem;
        position: relative;
        margin-right: 3px;
    }
    .search-right {
        flex: 12;
        background: #fff;
        color: #bbb;
        border-radius: 20px;
        padding: 6px 17px;
    }
    &-tag {
        padding: 10px 17px;
        white-space: nowrap;
        &-i {
            display: inline-block;
            background: rgba(0, 0, 0, 0.1);
            color: #fff;
            font-size: 13px;
            line-height: 23px;
            padding: 0 8px;
            border-radius: 12px;
        }
    }
}
</style>
