<template>
    <view v-if="agencyInfo && agencyInfo.url" @tap="toDetail(agencyInfo, 'agency')">
        <view class="agency-item" :style="itemStyle">
            <view class="agency-item-top">
                <view class="agency-item-img">
                    <c-image
                        has-compress
                        class="c-inline-block"
                        :src="agencyInfo.logo"
                        width="0.5rem"
                        height="0.5rem"
                        mode="aspectFit"
                        :extra="{column: 2}"
                        :hack-white-stroke="false"
                    />
                </view>
                <view class="agency-item-cont">
                    <view class="agency-item-cont-row">
                        <view :class="useTitleBold ? 'hosp-title' : ''" class="c-font-17">
                            <text>{{ agencyInfo.name }}</text>
                        </view>
                        <view class="c-font-normal hosp-distance">{{ agencyInfo.distance }}</view>
                    </view>
                    <view v-if="agencyInfo.tags && agencyInfo.tags.length">
                        <template>
                            <c-new-label
                                v-if="agencyInfo.nameLabel"
                                :text="agencyInfo.nameLabel"
                                :solid="true"
                                :font-size="12"
                                :color="'box_' + labelColor"
                                class="new-gap-right-small"
                            />
                            <c-new-label
                                v-for="(t, i) in agencyInfo.tags"
                                :key="i"
                                :text="t"
                                :color="'box_' + labelColor"
                                :font-size="12"
                                :disable-sanjia="false"
                                class="new-gap-right-small"
                            />
                        </template>
                    </view>
                    <view v-if="agencyInfo.packageList && agencyInfo.packageList.length" class="pack-wrapper">
                        <view
                            v-for="(item, index) in agencyInfo.packageList"
                            :key="index"
                            class="pack-item"
                            :style="{marginBottom: packageItemMargin, padding: packageItemPadding}"
                        >
                            <view @tap="toDetail(item, 'package')">
                                <view class="pack-item-row">
                                    <view class="pack-name c-font-normal">{{ item.name }}</view>
                                    <view v-if="!item.beforePrice && !item.sales" class="pack-price">
                                        <view class="c-inline c-font-tiny">￥</view>
                                        <view class="c-inline c-font-normal">{{ item.price }}</view>
                                    </view>
                                </view>
                                <view v-if="item.tags && item.tags.length" class="pack-tag-wrapper">
                                    <!-- <template v-if="!useNewLabel">
                                        <c-label
                                            v-for="(t, i) in item.tags"
                                            :key="i"
                                            :text="t.text || t"
                                            :color="t.color ? t.color : 'gray'"
                                            class="c-gap-right-small"
                                        />
                                    </template> -->
                                    <!-- <template v-else> -->
                                    <c-new-label
                                        v-for="(t, i) in item.tags"
                                        :key="i"
                                        :text="t.text || t"
                                        font-size="12"
                                        :color="t.color ? t.color : 'box_gray'"
                                        class="c-gap-right-small"
                                    />
                                    <!-- </template> -->
                                </view>
                                <view v-if="item.beforePrice || item.sales" class="pack-item-bottom">
                                    <view>
                                        <view class="c-inline c-color-mall">
                                            <text class="c-font-normal c-font-wb">￥</text>
                                            <text class="c-font-large c-font-wb">{{
                                                item.couponPrice || item.flashPrice || item.price
                                            }}</text>
                                        </view>
                                        <view class="c-inline c-font-13 c-gap-left price-text">
                                            <text v-if="item.couponPrice">券后价</text>
                                            <text v-else-if="item.flashPrice">限时价</text>
                                        </view>
                                        <!-- 去掉划线价
                                        <view
                                            class="pack-item-bottom-price-old
                                                c-inline c-color-gray c-font-normal
                                                c-gap-left-small"
                                        >
                                            <text v-if="item.beforePrice" class="c-font-tiny">￥</text>
                                            <text v-if="item.beforePrice">{{ item.beforePrice }}</text>
                                        </view>
                                        -->
                                    </view>
                                    <view v-if="item.sales" class="pack-item-bottom-sale c-color-gray">{{
                                        item.sales
                                    }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="agency-item-more c-tac" :style="{paddingTop: moreTextPadding}">
                <view
                    class="more-wrap"
                    :style="{
                        color: colorMap[labelColor],
                        background: bgColorMap[labelColor],
                    }"
                >
                    <view class="c-inline-block">{{ agencyInfo.moreText ? agencyInfo.moreText : '查看更多' }}</view>
                    <c-icon
                        name="right"
                        font-size=".08rem"
                        class="right-icon"
                    />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 体检机构Item
 * @author zhanngqian51@baidu.com
 * @categories 业务组件
 * @tags [component]
 */

/* global Page swan  getApp */

import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CNewLabel from '@baidu/med-ui/components/Label/Label';
import CImage from '@components/common/image';
import {navigate} from '@utils/navigate';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        CNewLabel,
        CImage
    },
    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'
            })
        },
        /**
         * 体检套餐每项的间距
         */
        packageItemMargin: {
            type: String,
            default: '6px'
        },
        /** *
         * 体检套餐每项的padding
         */
        packageItemPadding: {
            type: String,
            default: '.05rem .13rem .05rem .15rem'
        },
        /**
         * 查看更多上方padding
         */
        moreTextPadding: {
            type: String,
            default: '3px'
        },
        /**
         * 标题加粗
         */
        useTitleBold: {
            type: Boolean,
            default: false
        },
        /**
         * label颜色
         */
        labelColor: {
            type: String,
            default: 'blue'
        },
        // ubc日志上报必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // 颜色映射
            colorMap: {
                gray: '#999999',
                blue: '#4B83FF',
                green: '#00C8C8',
                box_gray: '#999999',
                box_blue: '#4B83FF',
                box_green: '#00C8C8'
            },
            // 背景色颜色映射
            bgColorMap: {
                gray: 'rgba(153, 153, 153, .1)',
                blue: 'rgba(75, 131, 255, .1)',
                green: 'rgba(0, 200, 200, .1)',
                box_gray: 'rgba(153, 153, 153, .1)',
                box_blue: 'rgba(75, 131, 255, .1)',
                box_green: 'rgba(0, 200, 200, .1)'
            }
        };
    },
    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});
        }
    }
};
</script>
<style lang="less" scoped>
.agency-item {
    // height: 2.4rem;
    box-sizing: border-box;
    background-color: #fff;
    padding: 15px 16px 0 11px;
    // margin-bottom: 20px;
    // box-shadow: 0 10px 50px 0 rgba(0,0,0,0.06);
    border-radius: 8px;

    &-top {
        display: flex;
    }

    &-img {
        flex-shrink: 0;
        border-radius: 50%;
        border: 1px solid rgba(31, 31, 31, 0.08);
        overflow: hidden;
        width: 0.5rem;
        height: 0.5rem;
    }

    &-more {
        position: relative;
        width: 100%;

        .more-wrap {
            height: 0.24rem;
            display: inline-block;
            padding: 0 0.04rem 0 0.08rem;
            vertical-align: middle;
            border-radius: 0.12rem;
            // font-size: .14rem;
        }
    }

    &-cont {
        width: calc(100% - 6px);
        padding-left: 0.08rem;
        flex-grow: 1;

        &-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.02rem;

            &-level {
                background-image: linear-gradient(134deg, #489af6 0%, #82cbff 100%);
                background-size: cover;
                border-radius: 3px;
                padding: 5px 3px;
                font-size: 10px;
                line-height: 10px;
                color: #fff;
                white-space: nowrap;
            }
        }
    }
}

.hosp-label {
    padding: 3px;
    position: relative;
    top: -1px;
    background-image: linear-gradient(134deg, #489af6 0%, #82cbff 100%);
    color: #fff;
    margin-right: 8px;
    border-radius: 3px;
    vertical-align: middle;
    font-weight: 500;
}

.hosp-title {
    font-weight: 600;
    color: #1f1f1f;
}

.hosp-distance {
    color: #858585;
    line-height: 27px;
}

.hosp-tag {
    display: inline;
    border-radius: 8px;
    padding: 0 5px;
    margin-right: 5px;
    color: #489af6;
    border: 1px solid rgba(72, 154, 246, 0.2);
}

.pack-wrapper {
    margin-top: 0.13rem;
}

.pack-item {
    // height: 58px;
    box-sizing: border-box;
    padding: 9px 12px 3px 11px;
    margin-bottom: 0.09rem;
    background-color: #f8f8f8;
    border-radius: 6px;
}

.pack-item-row {
    display: flex;
    justify-content: space-between;
    // min-height: 24px;
}

.pack-item-bottom {
    display: flex;
    justify-content: space-between;

    .price-text {
        color: #fd503e;
    }

    &-price-old {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: 2px;
            top: 8px;
            width: 100%;
            border-top: 1px solid #999;
        }
    }

    &-sale {
        font-size: 0.14rem;
        line-height: 0.27rem;
    }
}

.pack-name {
    color: #525252;
}

.pack-price {
    color: #ff6050;

    &-delete {
        color: #999;
        text-decoration: line-through;
    }
}

.pack-tag-wrapper {
    margin: 0.02rem 0;
}

.pack-tag {
    display: inline;
    border-radius: 8px;
    margin-right: 5px;
    color: #999;
    border: 1px solid #f1f1f1;
    padding: 0 5px;
}

.more {
    display: inline-block;
    padding: 0 4px 0 8px;
    margin-top: 6px;
    font-size: 13px;
    color: #00c8c8;
    text-align: center;
    background: #edfdff;
    border-radius: 15px;
}

.right-icon {
    vertical-align: middle;
    height: 0.22rem;
    display: inline-block;
    line-height: 0.18rem;
}

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