<template>
    <view
        :class="{
            rest: data.storeInfo.serviceStatus,
            shadow: shadow,
        }"
        :style="{
            borderRadius: radius,
            padding: padding,
        }"
        class="shop"
    >
        <view class="wrapper">
            <navigate
                :url="data.storeInfo.storeUrl"
                :extra="{
                    module: 'shopCick_' + logkey,
                }"
            >
                <view class="c-row">
                    <view class="c-span9 info">
                        <view class="desc c-row">
                            <view v-if="testType" class="shop-logo c-span1">
                                <view class="head-img">
                                    <c-image
                                        :src="data.storeInfo.storeHeadImg"
                                        has-compress
                                        mode="widthFix"
                                        :hack-white-stroke="false"
                                        :is-round="false"
                                        radius="0.09rem"
                                        width="100%"
                                        height="100%"
                                        :extra="{column: 2}"
                                    />
                                </view>
                            </view>
                            <view class="c-span4 c-line-clamp1">
                                <view class="name">
                                    <!-- eslint-disable max-len -->
                                    <text class="c-line-clamp1 c-color-title c-font-wb" :class="[testType ? 'c-font-big-less' : '']">{{ data.storeInfo.storeName }}</text>
                                    <!-- 优质好店logo -->
                                    <view
                                        v-if="data.storeInfo.storeTags"
                                        class="best-store c-inline-block c-gap-inner-left-small c-gap-inner-right-small c-gap-left-small"
                                    >
                                        <view class="best-store__logo c-inline-block">
                                            <c-image
                                                src="https://med-drug.cdn.bcebos.com/store_best_icon.svg"
                                                has-compress
                                                mode="widthFix"
                                                :hack-white-stroke="false"
                                                :is-round="false"
                                                width="100%"
                                                height="100%"
                                                :extra="{column: 1}"
                                            />
                                        </view>
                                        <text class="best-store__text c-font-small c-inline-block">{{ data.storeInfo.storeTags.text }}</text>
                                    </view>
                                </view>
                                <view
                                    v-if="data.storeInfo.score"
                                    class="stars"
                                >
                                    <c-stars
                                        :num="data.storeInfo.score"
                                        :size="12"
                                        icon-color="#fd503e"
                                        empty-icon-color="#fd503e"
                                        text-color="#999"
                                        :text="data.storeInfo.score"
                                    />
                                </view>
                                <view
                                    v-if="!testType"
                                    class="c-font-13 c-color-gray c-line-clamp1"
                                >
                                    <view
                                        class="tag c-line-clamp1"
                                    >
                                        <text>{{ data.storeInfo.businessTime }}</text>
                                    </view>
                                    <text
                                        v-if="data.storeInfo.distance"
                                    >
                                        <text class="c-gap-left-small c-gap-right-small c-font-tiny">|</text><text>
                                            距离{{ data.storeInfo.distance }}
                                        </text>
                                    </text>
                                </view>
                                <view
                                    v-if="testType"
                                    class="c-font-normal c-color c-line-clamp1"
                                >
                                    <view
                                        class="tag c-line-clamp1"
                                    >
                                        <text>距离{{ data.storeInfo.distance }}</text>
                                    </view>
                                    <text
                                        v-if="data.storeInfo.distance"
                                    >
                                        <text class="c-gap-left-small c-gap-right-small c-font-tiny s-line"/>
                                        <text>{{ data.storeInfo.businessTime }}</text>
                                    </text>
                                </view>
                                <view
                                    class="label"
                                >
                                    <c-label
                                        v-if="data.storeInfo.label"
                                        color="#fd503e"
                                        custom
                                        :text="data.storeInfo.label"
                                        class="c-gap-right-small z-label"
                                    />
                                    <c-label
                                        v-for="(bdItem, index) in data.storeInfo.badge"
                                        :key="index"
                                        :color="bdItem.color"
                                        :text="bdItem.text"
                                        class="c-gap-right-small z-label"
                                    />
                                    <c-label
                                        v-for="(bdItem, index) in testType && cardBadges"
                                        :key="index"
                                        color="box_red"
                                        :text="bdItem.text"
                                        class="c-gap-right-small z-label label-test"
                                    />
                                </view>
                                <scroll-view
                                    v-if="data.storeInfo.coupons && data.storeInfo.coupons.length && !testType"
                                    v-show="!shopCardOpen"
                                    scroll-x
                                    class="ticket-item-card"
                                >
                                    <view class="ticket-item-card-wrapper">
                                        <view
                                            v-for="(ticket, idx) in data.storeInfo.coupons"
                                            :key="idx"
                                            class="ticket-item-card-item ticket-item-card-item-small"
                                        >
                                            <ticket-item
                                                v-if="idx === 0"
                                                :ticket="ticket"
                                                card-type="mini"
                                            />
                                        </view>
                                    </view>
                                </scroll-view>
                            </view>
                        </view>
                    </view>
                    <view class="c-span2 logo">
                        <view class="img">
                            <c-image
                                src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1094139061,2045509490&fm=179&app=35&f=PNG?w=201&h=163&s=C1E19346D7A7AEE05C77BE0B030070DD"
                                mode="aspectFit"
                                has-compress
                                :hack-white-stroke="false"
                                :is-round="false"
                                width="100%"
                                height="100%"
                                :extra="{column: 2}"
                            />
                        </view>
                    </view>
                </view>
            </navigate>
            <!-- 药品 -->
            <view
                v-if="data.drugInfo && data.drugInfo.length"
                class="drugs-wrapper c-gap-top c-gap-inner-bottom-small"
            >
                <view
                    v-for="(drugItem, index) in data.drugInfo"
                    :key="index + drugItem.drugId"
                    class="drug-item"
                    :class="[
                        showLogSign,
                    ]"
                    :data-show="drugItem.logStr + '_' + index"
                    use-trackby
                >
                    <drug-list-item
                        :page="page"
                        :drug-id="drugItem.drugId"
                        :head-image="drugItem.headImage"
                        :title-name="drugItem.titleName"
                        :text-name="!testType ? drugItem.textName : ''"
                        :label="drugItem.label"
                        :target-url="drugItem.targetUrl"
                        :price="drugItem.price"
                        :sales="drugItem.sales"
                        :status-text="drugItem.statusText"
                        :tips-text="drugItem.tipsText"
                        :is-video="drugItem.isVideo"
                        :pre-label="drugItem.preLabel"
                        :indication="testType ? drugItem.indication : ''"
                        :price-gap-top="false"
                        :logkey="drugItem.logStr + '_' + index"
                        :width="testType ? '86px' : '80px'"
                        :height="testType ? '86px' : '80px'"
                        :title-style="testType ? {color: '#1f1f1f'} : {}"
                        :p-style="testType ? {marginTop: '.03rem'} : {}"
                    />
                </view>
            </view>
        </view>
        <navigate
            v-if="data.storeInfo && data.storeInfo.storeUrl && testType"
            :url="data.storeInfo.storeUrl"
            class="wrapper c-color more c-font-normal"
        >
            <view class="more-text">
                <text>{{ data.storeInfo.text }}</text>
                <c-icon
                    name="right"
                    font-size="13px"
                    class="right-icon"
                />
            </view>
        </navigate>
        <!-- 查看附近药店 -->
        <navigate
            v-if="data.more && data.more.url && !testType"
            :url="data.more.url"
            :extra="{
                module: 'shopmore_' + logkey,
            }"
            class="wrapper c-gap-inner-top c-gap-inner-bottom c-color-gray c-font-15 more"
        >
            <text><text class="m-icon m-icon-dianpu c-font-15 c-gap-right-small"/>{{ data.more.text }}</text>
            <c-icon
                name="right"
                font-size="13px"
                class="right-icon"
            />
        </navigate>
    </view>
</template>

<script>
/**
 * @file o2o入口卡
 * @author zhangeryi@baidu.com
 * @categories 业务组件
 * @tags [component]
 */

import Navigate from '../common/navigate';
import DrugListItem from './drug-list-item';
import CStars from '@baidu/med-ui/components/Stars/Stars';
import CLabel from '@baidu/med-ui/components/Label/Label';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import TicketItem from '@components/brand/ticket-item';

import CImage from '@components/common/image';

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': '10px 0 0 0'
        },
        /* logo是否圆形 */
        logoRound: {
            'type': Boolean,
            'default': false
        },
        /* 打点key */
        logkey: {
            type: String,
            default: ''
        },
        /* 打点key */
        showLogSign: {
            type: String,
            default: ''
        },
        /* 实验类型 */
        testType: {
            type: Number,
            default: 0
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    components: {
        CLabel,
        Navigate,
        CStars,
        CIcon,
        DrugListItem,
        TicketItem,
        CImage
    },
    data() {
        return {
        };
    },
    computed: {
        cardBadges() {
            if (this.data.drugInfo && this.data.drugInfo[0] && this.data.drugInfo[0].forNewCardBadges) {
                return this.data.drugInfo[0].forNewCardBadges.slice(0, 2);
            }
            return null;
        }
    },
    methods: {
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    padding-left: .13rem;
    padding-right: .13rem;
}

.shop {
    background: #fff;

    &.shadow {
        box-shadow: 0 3px 20px rgba(0, 0, 0, .08);
    }

    .logo {
        flex: none;
        box-sizing: content-box;
        width: .66rem;
        position: relative;

        .img {
            width: .66rem;
            height: .66rem;
            position: absolute;
        }
    }

    .info {
        .desc {
            .name {
                margin-bottom: 0;
                font-weight: bold;
                font-size: .17rem;
                display: flex;
                align-items: center;
            }

            .tag {
                display: inline;
            }

            .distance {
                width: auto;
                white-space: nowrap;
                text-align: right;
                padding-top: 10px;
                color: #666;
            }

            .shop-logo {
                min-width: 61px;
            }
        }
    }

    .drugs-wrapper {
        .drug-item {
            padding-bottom: .1rem;
        }
    }

    .label-test {
        margin-top: .02rem;
        margin-bottom: .02rem;
    }

    .more {
        padding-top: .09rem;
        padding-bottom: .09rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        &-text {
            width: calc(100vw - .46rem);

            .right-icon {
                float: right;
            }
        }

        &::before {
            position: absolute;
            top: 0;
            width: 100%;
            content: " ";
            display: block;
            left: 0;
            right: 0;
            height: .01rem;
            -webkit-transform: scaleY(0.33);
            transform: scaleY(0.33);
            background: #e0e0e0;
        }
    }
}

.head-img {
    width: .53rem;
    height: .53rem;
    border-radius: .09rem;
    margin-top: .04rem;
}

.s-line {
    display: inline-block;
    height: .07rem;
    width: .0067rem;
    background: #b8b8b8;
    position: relative;
    top: -1px;
}

.ticket-item-card {
    //margin-right: -.15rem;
    width: auto;
    position: relative;

    &::after {
        content: '';
        display: block;
        width: 17px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        box-shadow: inset -10px 0 10px 0 #fff;
    }

    &-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    &-item {
        padding-right: .05rem;
        flex: none;
        box-sizing: border-box;

        &:last-child {
            padding-right: .17rem;
        }

        &-small {
            width: auto;
        }
    }
}

.best-store {
    background-image: linear-gradient(270deg, #f2bd61 0%, #ecc781 100%);
    height: .16rem;
    line-height: .14rem;
    border-radius: .08rem;

    &__logo {
        width: .11rem;
        height: .11rem;
    }

    &__text {
        color: #402200;
        line-height: 1;
        padding-left: .03rem;
    }
}
</style>


