<template>
    <view class="hot">
        <view
            v-for="(item, index) in data"
            :key="index"
            class="hot__item img-background"
            @tap="onTap(item)"
        >
            <view class="hot__item__bg">
                <c-image
                    has-compress
                    :src="item.background"
                    width="100%"
                    height="100%"
                    :hack-white-stroke="false"
                    :extra="{column: 6}"
                    :is-round="false"
                    radius="0.08rem"
                />
            </view>
            <view class="hot__item__cont">
                <view class="hot__item__header">
                    <view class="hot__item__title c-line-clamp1">{{ item.title }}</view>
                    <view v-if="item.subTitle && item.subTitle.length" class="hot__item__subTitle">
                        <view
                            v-for="(text, index) in item.subTitle"
                            :key="index"
                            class="c-line-clamp1"
                        >{{ text }}</view>
                    </view>
                </view>

                <view class="hot__item__bottom">
                    <view class="hot__item__price c-line-clamp1">
                        <price
                            v-if="item.prices"
                            :price="parseInt(item.prices || '0')"
                            u-size=".14rem"
                            i-size=".19rem"
                            d-size=".14rem"
                            :p-style="{'color': '#FD503E'}"
                        />
                        <text class="hot__item__price__text">起</text>
                    </view>
                    <view
                        v-if="item.btn"
                        class="hot__item__btn c-font-wb"
                        :style="{
                            backgroundColor: item.btn.backgroundColor,
                        }"
                    >
                        {{ item.btn.text }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Price from '@commonComponents/Price';
import CImage from '@components/common/image';
import {navigate} from '@utils/navigate';
/**
 * @file 基因检测
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        Price,
        CImage
    },
    props: {
        /* 数据 */
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /** 日志 */
        log: {
            type: Object,
            default: () => {
                return {
                    page: '',
                    value: ''
                };
            }
        }
    },
    data() {
        return {};
    },
    methods: {
        onTap(item) {
            if (item.unifiUrl) {
                navigate({
                    url: item.unifiUrl,
                    log: {
                        page: this.log.page,
                        type: 'clk',
                        value: this.log.value,
                        ext: Object.assign({
                            pd: 'gene',
                            value_id: item.id
                        }, this.log.ext || {})
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.hot {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 304px;

    &__item {
        width: calc(50% - 4px);
        padding: 15px 13px 15px;
        box-sizing: border-box;
        background-size: 100% 100%;
        height: 96px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;

        &:nth-child(1),
        &:nth-child(2) {
            height: 148px;
            margin-right: 8px;
        }

        &__bg {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

        &__cont {
            position: relative;
            z-index: 5;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        &__title {
            font-size: 16px;
            line-height: 16px;
            font-weight: bold;
            margin-bottom: 2px;
            color: #1f1f1f;
        }

        &__subTitle {
            font-size: 14px;
            line-height: 19px;
            color: #858585;
        }

        &__bottom {
            display: flex;
            justify-content: space-between;
        }

        &__price {
            &__text {
                display: inline-block;
                color: #fd503e;
                font-size: 14px;
                line-height: 19px;
                margin-left: 1px;
            }
        }

        &__btn {
            height: 21px;
            line-height: 21px;
            border-radius: 30px;
            padding: 0 8px;
            color: #fff;
            font-size: 12px;
        }
    }
}
@media only screen and (max-width: 375px) {
    .hot__item {
        padding: 13px 7px;
    }
}
</style>
