<template>
    <view class="drug-wrap">
        <view
            v-for="(item, index) in list"
            :key="item.drugId"
            class="drug-wrap__item c-span4"
        >
            <view v-if="item.drugId" @tap="onItemTap(item, index)">
                <view
                    class="drug-wrap__item__img"
                >
                    <c-image
                        has-compress
                        :src="item.headImage"
                        class="image"
                        width="100%"
                        height="auto"
                        mode="widthFix"
                        :hack-white-stroke="false"
                        :is-round="false"
                        :extra="{column: 4}"
                        radius="0.09rem"
                    />
                    <view class="drug-wrap__item__img__imgback"/>
                </view>
                <view class="drug-wrap__item__title c-line-clamp2 c-font-normal">{{ item.titleName }}</view>
                <view v-if="item.price" class="drug-wrap__item__price">
                    <price
                        :price="item.price / 100"
                        u-size=".14rem"
                        i-size=".19rem"
                        d-size=".14rem"
                    />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import CImage from '@components/common/image';
import Price from '@commonComponents/Price';
import {navigate} from '@utils/navigate';
import {ubcSend} from '@utils/log';
/**
 * @file 药品列表
 * @author jiaxiangju
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        Price,
        CImage
    },
    data() {
        return {};
    },
    props: {
        /**
         * 列表数据
         */
        list: {
            type: Array,
            default: () => {
                return [];
            }
        },
        /**
         * 日志
         */
        log: {
            type: Object,
            default: () => {
                return {
                    value: '',
                    ext: {
                    }
                };
            }
        }
    },
    methods: {
        onItemTap(item) {
            if (item.targetUrl) {
                ubcSend({
                    type: 'clk',
                    value: this.log.value,
                    ext: Object.assign({
                        pd: 'member',
                        value_type: item.drugId,
                    }, this.log.ext || {})
                });
                navigate({
                    url: item.targetUrl,
                    // log: {
                    //     type: 'clk',
                    //     value: this.log.value,
                    //     ext: Object.assign({
                    //         pd: 'member',
                    //         value_type: 'drug',
                    //         value_id: item.drugId
                    //     }, this.log.ext || {})
                    // }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.drug-wrap {
    position: relative;
    padding: 0 .13rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: normal;

    &__item {
        flex: initial;
        overflow: hidden;
        margin-bottom: .2rem;

        &.c-span4:nth-child(3n + 1):nth-last-child(-n + 3),
        &.c-span4:nth-child(3n + 1):nth-last-child(-n + 3) ~ &.c-span4 {
            margin-bottom: 0 !important;
        }

        &__title {
            margin-top: .07rem;
            margin-bottom: .02rem;
        }

        &__img {
            width: 100%;
            height: auto;
            padding-top: calc(100%);
            position: relative;
            overflow: hidden;

            .image {
                width: 100%;
                height: auto;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 0.09rem;
            }

            &__imgback {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1;
                border-radius: 0.09rem;
                background: radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.08) 100%);
            }
        }
    }
}
</style>
