<template>
    <view class="card-gy-store c-padding-h c-gap-top-large" @tap.stop="onJump">
        <view class="c-row card-gy-store-cont">
            <view class="c-span2">
                <b-img
                    :src="store.storePic"
                    has-border
                    has-compress
                    :hack-white-stroke="false"
                    :extra="{column: 2}"
                />
            </view>
            <view class="c-span10">
                <!-- eslint-disable max-len -->
                <view :style="{width: 'calc(100% - 72px)'}">
                    <view v-if="store.storeName" class="c-font-17 c-color-333 card-gy-store-tit c-gap-left-small c-line-clamp1">{{ store.storeName }}</view>
                    <view v-if="store.storeStartHour && store.storeStopHour" class="c-font-normal c-color-normal c-gap-left-small">营业时间:{{ store.storeStartHour }}-{{ store.storeStopHour }}</view>
                    <view v-if="store.storeDesc" class="c-font-normal c-color-normal c-gap-left-small c-line-clamp1">{{ store.storeDesc }}</view>
                </view>
                <view class="card-gy-store-follow">
                    <follow-btn
                        :follow="1"
                        :type="store.type"
                        :show-type="1"
                        :relation-id="store.storeKey"
                        :favorite-id="store.id"
                        :selected-index="selectedIndex"
                        :focus-vaccines-content="store.source"
                        :central-concern-shop="centralConcernShop"
                    />
                </view>
                <template v-if="store.badge && store.badge.length">
                    <c-label
                        v-for="(item, index) in store.badge"
                        :key="index"
                        :text="item.text"
                        :color="item.color"
                        class="c-gap-right-small"
                    />
                </template>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @author chenshuo04
 * @file 药店卡片
 * @categories
 * @tags
 */
import CLabel from '@baidu/med-ui/components/Label/LabelOld';
import BImg from '../../components/common/image';
import FollowBtn from '../common/follow-btn';
import {navigate} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * store
         */
        store: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /**
         * tab点击索引
         */
        selectedIndex: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            centralConcernShop: true
        };
    },
    components: {
        CLabel,
        FollowBtn,
        BImg
    },
    methods: {
        onJump() {
            navigate({url: this.store.targetUrl});
        }
    }
};
</script>
<style lang="less" scoped>
.card-gy-store {
    &-cont {
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.06);
    }

    &-tit {
        font-weight: 900;
    }

    &-follow {
        position: absolute;
        top: 0;
        right: 0;
        box-sizing: content-box;
    }
}
</style>


