<template>
    <navigate
        :url="data.url"
        :extra="{
            module: 'shopCick_' + logkey,
        }"
    >
        <view
            :class="{
                rest: data.serviceStatus,
                shadow: shadow,
            }"
            :style="{
                borderRadius: radius,
                padding: padding,
            }"
            class="shop c-container"
        >
            <view class="c-row">
                <view class="c-span2 logo" :style="{width: logoWidth}">
                    <view
                        class="img"
                    >
                        <c-image
                            :width="logoWidth"
                            :height="logoHeight"
                            :is-round="logoRound"
                            :src="data.headImage"
                            mode="aspectFit"
                            hack-bg="radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.05) 100%)"
                        />
                        <view
                            v-if="data.serviceStatus"
                            class="status"
                        >
                            {{ data.serviceText }}
                        </view>
                    </view>
                </view>
                <view class="c-span9 info">
                    <view class="desc c-row">
                        <view class="c-span1 c-line-clamp1">
                            <view class="c-font-big-less name c-line-clamp1">
                                {{ data.textName }}
                            </view>
                            <view
                                v-if="data.score"
                                class="stars"
                            >
                                <c-stars
                                    :num="data.score"
                                    :size="12"
                                    icon-color="#fd503e"
                                    empty-icon-color="#fd503e"
                                    text-color="#999"
                                    :text="data.score"
                                />
                            </view>
                            <view
                                v-if="data.label || data.badge"
                                class="shop__label"
                            >
                                <c-label
                                    v-if="data.label"
                                    color="#fd503e"
                                    custom
                                    :text="data.label"
                                    class="c-gap-right-small z-label"
                                />
                                <c-label
                                    v-for="(bdItem, index) in data.badge"
                                    :key="index"
                                    :color="bdItem.color"
                                    :text="bdItem.text"
                                    class="c-gap-right-small z-label"
                                />
                            </view>
                            <view
                                class="c-font-normal c-color c-line-clamp1"
                            >
                                <view
                                    v-for="(tagItem, index) in (data.infos || data.tags)"
                                    :key="index"
                                    class="tag c-line-clamp1"
                                >
                                    <text>{{ tagItem }}</text><text
                                        class="c-gap-left-small c-gap-right-small c-font-tiny s-line"
                                    >|</text>
                                </view>
                                <view v-if="data.city" class="c-inline shop__act__city">
                                    <text class="c-font-normal shop__act__city__text">{{ data.city }}</text>
                                </view>
                                <text
                                    v-if="data.distance"
                                >
                                    <text>距离{{ data.distance }}</text>
                                </text>
                            </view>
                            <view
                                v-if="data.infos && data.tags"
                                class="c-font-normal c-color c-line-clamp1"
                            >
                                <view
                                    v-for="(tagItem, index) in data.tags"
                                    :key="index"
                                    class="tag c-line-clamp1"
                                >
                                    <text>{{ tagItem }}</text><text
                                        v-if="index + 1 !== data.tags.length"
                                        class="c-gap-left-small c-gap-right-small c-font-tiny s-line"
                                    >|</text>
                                </view>
                            </view>
                        </view>
                        <view
                            v-if="bgImg"
                            class="c-span2 shop__bg"
                        >
                            <image
                                class="shop__bg__img"
                                src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1094139061,2045509490&fm=179&app=35&f=PNG?w=201&h=163&s=C1E19346D7A7AEE05C77BE0B030070DD"
                                mode="aspectFit"
                            />
                        </view>
                        <view
                            v-else-if="data.rightButton"
                            class="c-span1 right-button"
                        >
                            <c-button
                                :height="30"
                                :font-size="13"
                                :type="data.rightButton.type || 'primary'"
                                primary-color="#fd503e"
                                border-radius="20px"
                            >
                                {{ data.rightButton.text }}
                            </c-button>
                        </view>
                        <!-- 文字链接进店样式 -->
                        <view
                            v-else-if="data.textLink"
                            class="c-span3 right-text-link c-font-normal"
                        >
                            <text>{{ data.textLink }}</text>
                        </view>
                    </view>
                    <!-- 三个药品 -->
                    <view
                        v-if="data.drugs && data.drugs.length && drugNum == 3"
                        class="shop-drugs shop-drugs-sroller c-gap-bottom c-gap-top"
                    >
                        <view class="shop-drugs-scroll-wrapper">
                            <view
                                class="c-row shop-drugs shop-drugs-scroll"
                            >
                                <view
                                    v-for="(drugItem, index) in data.drugs"
                                    :key="index + '_' + drugItem.drugId"
                                    class="c-span1 drug-item"
                                    @tap="linkDrug(drugItem.url)"
                                >
                                    <drug
                                        :data="drugItem"
                                        :logkey="logkey"
                                        width="110px"
                                        height="110px"
                                    />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 四个药品 -->
            <view
                v-if="data.drugs && data.drugs.length && drugNum == 4"
                class="c-row shop-drugs c-gap-bottom c-gap-top"
            >
                <view
                    v-for="(drugItem, index) in data.drugs"
                    :key="index + '_' + drugItem.drugId"
                    class="c-span3 drug-item"
                    @tap="linkDrug(drugItem.url)"
                >
                    <drug
                        :page="page"
                        :data="drugItem"
                        :logkey="logkey"
                        height="70px"
                    />
                </view>
            </view>
        </view>
    </navigate>
</template>

<script>
/**
 * @file 药店卡片组件
 * @author zhangeryi@baidu.com
 */

import Navigate from '../common/navigate';
import {navigate} from '../../utils/navigate';
import image from '../common/image';
import drug from './drug';
import Button from '@baidu/med-ui/components/Button/Button';
import Stars from '@baidu/med-ui/components/Stars/Stars';
import Label from '@baidu/med-ui/components/Label/LabelOld';
// import {send} from '../../utils/log';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        shadow: {
            'type': Boolean,
            'default': true
        },
        radius: {
            'type': String,
            'default': '.08rem'
        },
        padding: {
            'type': String,
            'default': '15px 17px 0'
        },
        logoRound: {
            'type': Boolean,
            'default': false
        },
        logoWidth: {
            'type': String,
            'default': '.4rem'
        },
        logoHeight: {
            'type': String,
            'default': '.4rem'
        },
        drugNum: {
            'type': Number,
            'default': 3
        },
        bgImg: {
            'type': Boolean,
            'default': false
        },
        logkey: {
            type: String
        },
        // ubc日志上报必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    components: {
        'c-image': image,
        'drug': drug,
        'c-label': Label,
        'navigate': Navigate,
        'c-stars': Stars,
        'c-button': Button,
    },
    data() {
        return {
        };
    },
    methods: {
        linkDrug(url) {
            navigate({
                url
            });
        }
    }
};
</script>
<style lang="less" scoped>
.shop {
    &.shadow {
        box-shadow: 0 3px 20px rgba(0, 0, 0, .08);
    }
    &.rest {
        opacity: .6;
        .logo {
            .img {
                position: relative;
                .logo-img {
                    opacity: .5;
                }
                .status {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    background: #c2c2c2;
                    font-size: 10px;
                    color: #fff;
                    text-align: center;
                    height: .17rem;
                    line-height: .17rem;
                }
            }
        }
    }
    &__label {
        line-height: 0;
        padding: 5px 0;
    }
    &__bg {
        flex: none;
        box-sizing: content-box;
        width: .49rem;
        position: relative;
        &__img {
            width: .49rem;
            height: .49rem;
            position: absolute;
        }
    }
    .logo {
        flex: none;
        box-sizing: content-box;
        padding-right: .06rem;
        .img {
            border-radius: .05rem;
            overflow: hidden;
        }
    }
    .info {
        margin-top: -.04rem;
        .desc {
            .name {
                color: #333;
                margin-bottom: 0;
                font-weight: bold;
            }
            .tag {
                display: inline;
            }
            .distance {
                width: auto;
                white-space: nowrap;
                text-align: right;
                padding-top: 10px;
                color: #666;
            }
            .right-button {
                min-width: 58px;
                flex: none;
                align-self: center;
                white-space: nowrap;
            }
            .right-text-link {
                margin-top: 0.16rem;
                flex: none;
                color: #1f1f1f;
                font-weight: bold;
                line-height: 0.27rem;
                height: 0.28rem;
                text-align: center;
                border: 1px solid #858585;
                border-radius: 0.48rem;
                box-sizing: border-box;
            }
        }
    }
    .shop-drugs {
        justify-content: flex-start;
        &.shop-drugs-sroller {
            margin-right:-17px;
            overflow-y: hidden;
        }
        &-scroll {
            justify-content: flex-start;
            &-wrapper {
                position: relative;
                -webkit-overflow-scrolling: touch;
                padding-bottom: .3rem;
                margin-top: -.3rem;
                -webkit-transform: translateY(.3rem);
                transform: translateY(.3rem);
                overflow-x: auto;
            }
            .drug-item {
                width: 110px;
                height: 161px;
                box-sizing: content-box;
                &:last-child {
                    padding-right: 17px;
                }
            }
        }
        .drug-item {
            flex: none;
        }
    }
    &__act{
        &__city {
            position: relative;
            margin-right: 0.08rem;
            &::after {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                content: '';
                width: 1px;
                height: 7px;
                background-color: #b8b8b8;
            }
            &__text {
                margin-right: 0.08rem;
            }
        }
    }
}
.s-line {
    color: #e0e0e0;
    position: relative;
    top: -1px;
}
</style>


