<template>
    <view class="agency-item c-gap-inner-top-large" :style="itemStyle">
        <view v-if="agencyInfo && agencyInfo.url" @tap="toDetail(agencyInfo, 'agency')">
            <view class="agency-item-cont">
                <view class="agency-item-img">
                    <c-image
                        has-compress
                        :src="agencyInfo.logo"
                        width="20.77vw"
                        height="20.77vw"
                        :extra="{column: 2}"
                        :hack-white-stroke="false"
                        :is-round="false"
                    />
                </view>
                <view class="agency-item-right">
                    <view class="agency-desc">
                        <view
                            class="agency-item-title"
                        ><span v-if="agencyInfo.nameLabel" class="agency-item-title-level">{{
                            agencyInfo.nameLabel
                        }}</span><span class="agency-item-title-name c-font-medium c-line-clamp1">{{
                            agencyInfo.name
                        }}</span></view>
                        <view class="agency-address c-color c-font-normal c-line-clamp1">
                            <view class="agency-address-name c-gap-inner-right-small c-line-clamp1">{{
                                agencyInfo.address
                            }}</view>
                            <view v-if="agencyInfo.distance" class="agency-address-distance c-line-clamp1">
                                距您{{ agencyInfo.distance }}
                            </view>
                        </view>
                        <view v-if="agencyInfo.hosp_tags && agencyInfo.hosp_tags.length" class="agency-tag-wrapper">
                            <c-label
                                v-for="(item, index) in agencyInfo.hosp_tags"
                                :key="index"
                                :font-size="12"
                                :height="14"
                                :line-height="14"
                                :text="item"
                                color="box_gray"
                                :padding="5"
                                class="new-gap-right-small agency-tag-wrapper-item-bottom"
                            />
                        </view>
                    </view>
                    <view class="agency c-font-normal">
                        <!-- 价格 -->
                        <view class="agency-price">
                            <view class="agency-price-wrapper">
                                <view
                                    v-if="agencyInfo.lowPrice"
                                    class="c-inline agency-price-now c-font-wb c-line-clamp1"
                                >
                                    <text class="c-font-small agency-price-color">¥</text>
                                    <text v-if="lowPrice.int">
                                        <text>{{ lowPrice.int }}</text>
                                        <text
                                            v-if="lowPrice.dec"
                                            class="c-font-normal agency-price-after"
                                        >.{{ lowPrice.dec }}起</text>
                                    </text>
                                </view>
                            </view>
                            <view
                                v-if="agencyInfo.sales"
                                class="agency-price-sales c-font-normal c-font-normal c-line-clamp1"
                            >已售{{ agencyInfo.sales }}</view>
                            <!-- 暂不显示人均价 -->
                            <!-- <view
                                v-if="agencyInfo.perPrice"
                                class="agency-price-per c-font-normal c-line-clamp1"
                            >人均¥{{ agencyInfo.perPrice }}</view>-->
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/* global Page swan  getApp */
import CLabel from '@baidu/med-ui/components/Label/Label';
import CImage from '@components/common/image';
import {ubcSend} from '@utils/log';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CLabel,
        CImage
    },
    computed: {
        lowPrice() {
            let price = this.agencyInfo.lowPrice;
            if (price) {
                const priceArr = price.toString().split('.');
                const int = priceArr[0];
                const dec = priceArr[1];
                return {
                    int,
                    dec
                };
            }
            return {};
        }
    },
    methods: {
        toDetail(item, type) {
            ubcSend({
                page: this.page,
                type: 'clk',
                value: 'type',
                ext: {
                    pd: 'tj',
                    value_type: `${type}_id`,
                    value_id: item.store_id || item.id
                }
            });
            navigate({url: item.url});
        }
    },
    props: {
        /**
         * 套餐信息
         */
        agencyInfo: {
            type: Object,
            default: () => {}
        },
        /**
         * 自定义套餐item颜色
         */
        itemStyle: {
            type: Object,
            default: () => ({
                'box-shadow': '0 10px 50px 0 rgba(0,0,0,0.06)',
                'margin-bottom': '20px'
            })
        },
        // ubc打点日志必传字段page
        page: {
            type: String,
            default: ''
        }
    }
};
</script>
<style lang="less" scoped>
.agency-item {
    padding: 10px 13px;
    box-sizing: border-box;
    background-color: #fff;

    &-cont {
        display: flex;
        position: relative;
    }

    &-right {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    &-img {
        width: 20.77vw;
        height: 20.77vw;
        border-radius: 9px;
        background-size: 100% 100%;
        flex-shrink: 0;
        margin-right: 8px;
        overflow: hidden;
    }

    &-title {
        display: flex;
        align-items: center;

        &-name {
            color: #1f1f1f;
            font-size: 16px;
            flex: 1;
        }

        &-level {
            display: flex;
            align-items: center;
            background: #00c8c8;
            border-radius: 24px;
            font-size: 12px;
            padding: 0 5px;
            color: #fff;
            margin-right: 5px;
            height: 16px;
        }
    }
}

.agency-tag-wrapper {
    display: flex;
    flex-wrap: wrap;

    &-item-bottom {
        margin-bottom: 6px;
    }
}

.agency-desc {
    flex: 1;
}

.agency {
    &-price {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;

        &-now {
            font-weight: 600;
            font-size: 19px;
            color: #fd503e;
            line-height: 16px;
        }

        &-normal {
            color: #fd503e;
        }

        &-symbol-color {
            color: #fd503e;
        }

        &-after {
            font-weight: bold;
            white-space: nowrap;
        }

        &-sales {
            margin-left: 4px;
            align-items: flex-start;
            color: #858585;
        }

        &-per {
            flex-shrink: 0;
            position: relative;
            color: #858585;
        }
    }

    &-address {
        font-size: 14px;
        margin-top: 6px;
        display: flex;
        flex-direction: column;
        color: #858585;
        margin-bottom: 6px;

        &-name {
            line-height: 14px;
        }

        &-distance {
            line-height: 14px;
            margin-top: 8px;
        }
    }
}

@media only screen and (max-width: 360px) {
    .act-price-row {
        font-size: 0.13rem;
    }
}

.new-gap-right-small {
    margin-right: 0.04rem;
}
</style>
