<template>
    <view class="covid-item c-gap-bottom" @tap.stop="onJump(cardData)">
        <view class="c-row c-gap-inner-left-large c-gap-inner-right-large">
            <view class="c-span2">
                <b-img
                    has-compress
                    :src="cardData.storeHeadImgUrl"
                    :extra="{column: 2}"
                    has-border
                    hack-white-stroke
                />
            </view>
            <view class="c-span10">
                <view :style="{width: '100%'}">
                    <view v-if="cardData.storeName" class="c-font-17 c-color-333 c-font-wb covid-item-tit">
                        <text>{{ urgentTest === '0' ? cardData.storeName : cardData.titleName }}</text>
                    </view>
                    <view v-if="cardData.tags">
                        <c-label
                            v-for="(tag, tagIndex) in cardData.tags"
                            :key="tagIndex"
                            :text="tag.text || tag"
                            :color="tag.color"
                            class="c-gap-right-small"
                        />
                    </view>
                    <!-- 团检tips -->
                    <view
                        v-if="cardData.groupInfo && cardData.groupInfo.group_price_label"
                        class="c-font-small c-color c-line-clamp1 c-gap-top-small c-gap-bottom-small"
                        :style="{
                            fontSize: '12px',
                            lineHeight: '22px',
                            background: '#f8f8f8',
                            padding: '0 5px',
                            borderRadius: '3px'
                        }"
                    >
                        {{ cardData.groupInfo.group_price_label }}
                    </view>
                    <!-- <view v-if="cardData.refundRule" class="c-font-13 c-color-normal">
                        <c-icon name="clock-circle" class="c-gap-right-middle"/>
                        <text>退款须知：{{ cardData.refundRule }}</text>
                    </view> -->
                    <view v-if="cardData.storeStartHour" class="c-font-13 c-color-normal">
                        <!-- <c-icon name="clock-circle" class="c-gap-right-middle"/> -->
                        <text>服务时间：{{ cardData.storeStartHour }}-{{ cardData.storeStopHour }}</text>
                    </view>
                    <view v-if="cardData.serviceRange" class="c-font-13 c-color-normal">
                        <!-- <c-icon name="clock-circle" class="c-gap-right-middle"/> -->
                        <text>服务范围：{{ cardData.serviceRange }}</text>
                    </view>
                    <view
                        v-else-if="cardData.address"
                        class="c-font-13 c-color-normal card-gy-store-tit covid-address"
                        :style="{
                            width: cardData.distance ? 'calc(100% - 64px)' : '100%'
                        }"
                    >
                        <view class="c-line-clamp1">
                            <!-- <c-icon name="location-hollow" class="c-gap-right-middle"/> -->
                            <text>{{ cardData.address }}</text>
                        </view>
                        <text v-if="cardData.distance" class="c-color-gray covid-dist">{{ cardData.distance }}</text>
                    </view>
                    <view
                        class="c-color-normal covid-flex c-font-normal"
                        :style="{
                            justifyContent: 'flex-end',
                            padding: '5px 0px'
                        }"
                    >
                        <!-- 上门检测 -->
                        <view v-if="cardData.groupInfo && cardData.groupInfo.price">
                            <text>检测费用：</text>
                            <text class="c-color-orange c-font-17 c-gap-left-small">{{
                                cardData.groupInfo.price
                            }}</text>
                        </view>
                        <!-- 划线价 -->
                        <view v-else-if="cardData.couponPrice" class="">
                            <price
                                :price="cardData.couponPrice / 100"
                                u-size=".14rem"
                                i-size=".19rem"
                                d-size=".14rem"
                                :p-style="{color: '#fd503e'}"
                            />
                            <text class="c-font-normal c-color-mall covid-item__coupon__text">补贴价</text>
                            <text v-if="cardData.price" class="c-color-gray covid-item__coupon__line">
                                ￥{{ cardData.price / 100 }}
                            </text>
                        </view>
                        <!-- 门店检测 -->
                        <view v-else>
                            <text>检测费用：</text>
                            <text class="c-color-orange c-font-17 c-gap-left-small">￥{{ cardData.price / 100 }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="covid-price covid-flex c-gap-top-small c-gap-inner-left-large c-gap-inner-right-large">
            <view>
                <view v-if="cardData.tpNameValue" class="c-font-13 c-color-gray">
                    <text class="m-icon m-icon-yiyuan c-gap-right-middle" />
                    <text>由{{ cardData.tpNameValue }}提供</text>
                </view>
            </view>
            <view>
                <view class="c-inline-block">
                    <c-button
                        type="primary"
                        :primary-color="btnColor"
                        border-radius="100px"
                        :height="28"
                        :font-size="12"
                        auto
                        :disabled="cardData.status == 2"
                    >
                        {{ cardData.status == 2 ? '已约满' : '立即预约' }}
                    </c-button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 核酸检测卡片
 * @author chenshuo04
 * @categories 业务组件
 * @tags [component]
 */
import {navigate} from '../../utils/navigate';
import BImg from '../common/image';
import CButton from '@baidu/med-ui/components/Button/Button';
import CLabel from '@baidu/med-ui/components/Label/Label';
import Price from '@commonComponents/Price';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        BImg,
        CButton,
        CLabel,
        Price
    },
    props: {
        /* 数据 */
        cardData: {
            type: Object,
            required: true
        },
        /* 按钮颜色 */
        btnColor: {
            type: String,
            default: '#6897FF'
        },
        urgentTest: {
            type: String,
            default: '0'
        }
    },
    methods: {
        onJump(data) {
            console.log('data:', data);
            let url = data.unifiUrl || data.url;
            if (data.groupInfo && data.groupInfo.url || data.homeTest === 1) {
                url += '&group_test=1&home_test=1';
            }
            navigate({url});
        }
    }
};
</script>
<style lang="less" scoped>
.covid-title {
    text-align: center;
    color: #333;
}

.covid-cont {
    padding-bottom: 64px;
}

.covid-item {
    background: #fff;
    // box-shadow: 0 3px 20px 0 rgba(0,0,0,0.10);
    border: 1px solid #fff;
    border-radius: 8px;
    padding-top: 15px;
    padding-bottom: 6px;

    &__coupon__text {
        vertical-align: text-bottom;
        margin-left: 0.02rem;
    }

    &__coupon__line {
        text-decoration: line-through;
        margin-left: 0.02rem;
    }
}

.covid-item-tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.covid-address {
    position: relative;
}

.covid-dist {
    position: absolute;
    right: -64px;
    top: 0;
}

.covid-flex {
    display: flex;
    align-items: center;
}

.covid-price {
    padding-top: 6px;
    border-top: 1px solid #f1f1f1;
    justify-content: space-between;
}

.c-font-wb {
    font-weight: 600;
}
</style>
