<template>
    <view class="goods-list" :style="{padding}">
        <view class="goods-list-box">
            <c-navigate
                v-for="(drug, index) in drugList"
                :key="index"
                :class="'goods-list__item' + ' goods-list__item__' + column"
                :style="{
                    background: ueConf.drugLinearBg,
                    borderRadius: ueConf.itemBorderRadius,
                }"
                :url="drug.targetUrl"
                :extra="{id: drug.id, ...extra}"
            >
                <!-- 商品图片 -->
                <view
                    class="goods-list__item__img"
                    :style="__imgStyle"
                >
                    <view class="goods-list__item__image">
                        <c-image
                            has-compress
                            :src="drug.headImage"
                            width="100%"
                            height="auto"
                            mode="widthFix"
                            :extra="{column: 6}"
                            :hack-white-stroke="false"
                            :is-round="false"
                        />
                    </view>
                </view>
                <!-- 商品标题 -->
                <view
                    class="goods-list__item__title c-font-13 c-line-clamp2"
                    :style="__titleStyle"
                >{{ drug.titleName }}</view>
                <template v-if="column === 2">
                    <view
                        class="goods-list__item__opeart goods-list__item__opeart2"
                        :style="{
                            backgroundColor: ueConf.fontColor,
                            backgroundImage: ueConf.fontBg,
                            backgroundSize: ueConf.fontSize,
                        }"
                    >
                        <view class="goods-list__item__finaly-price goods-list__item__finaly-price2 c-gap-left-large">
                            <view
                                v-if="drug.orgPrice && drug.finalyPrice < drug.orgPrice"
                                class="goods-list__item__finaly-price__ori goods-list__item__finaly-price2__ori"
                                :style="{color: ueConf.fontAssistColor}"
                            ><text>原价</text><text class="value">¥{{ drug.orgPrice }}</text></view>
                            <view
                                v-if="drug.finalyPrice"
                                class="goods-list__item__finaly-price__now"
                                :class="'goods-list__item__finaly-price2__now text-background'"
                                :style="{backgroundImage: ueConf.drugLinearBg}"
                            ><text
                                class="unit"
                            >{{ drug.finalyPriceText || '券后' }} </text><text
                                class="value"
                            >¥{{ drug.finalyPrice }}</text></view>
                        </view>
                    </view>
                    <view style="height: 57px;"/>
                </template>
                <template v-if="column === 3">
                    <view
                        class="goods-list__item__opeart"
                        :style="{backgroundColor: ueConf.fontColor}"
                    >
                        <view class="goods-list__item__finaly-price c-gap-left">
                            <view
                                v-if="drug.orgPrice"
                                class="goods-list__item__finaly-price__ori"
                                :style="{color: ueConf.fontAssistColor}"
                            ><text>原价</text><text class="value">¥{{ drug.orgPrice }}</text></view>
                            <view
                                v-if="drug.finalyPrice"
                                class="goods-list__item__finaly-price__now text-background"
                                :style="{backgroundImage: ueConf.drugLinearBg}"
                            ><text class="unit">券后 </text><text class="value">¥{{ drug.finalyPrice }}</text></view>
                        </view>
                    </view>
                    <view style="height: 41px;"/>
                </template>
            </c-navigate>
        </view>
        <view
            v-if="more.text"
            class="goods-list__more c-font-13 c-gap-inner-top"
            :style="__moreStyle"
            @tap="onMore"
        >
            <text>{{ more.text }}</text>
            <image
                class="goods-list__more__icon c-gap-left-small"
                :src="more.rightIcon ? more.rightIcon : 'https://medactivity.cdn.bcebos.com/new-user/service-more-icon.png'"
            /></view>
    </view>
</template>
<script>
/**
 * @file tag横滑切换模块
 * @author chenshuo04
 * @categories
 * @tags
 */
/* global getApp */
import CImage from '@components/common/image';
import * as log from '../../../utils/log';
import CNavigate from '@baidu/med-ui/components/Navigate/Navigate';
import {navigate} from '@utils/navigate';
export default {
    options: {
        addGlobalClass: true
    },
    config: {
        component: true
    },
    components: {
        CNavigate,
        CImage
    },
    props: {
        /**
         * 药品列表
         */
        drugList: {
            type: Array,
            default: () => ([])
        },
        /**
         * 查看更多
         */
        more: {
            type: Object,
            default: () => ({})
        },
        /**
         * 图片
         */
        img: {
            type: Object,
            default: () => ({})
        },
        /**
         * 图片样式
         */
        imgStyle: {
            type: Object,
            default: () => ({})
        },
        /**
         * 查看更多样式
         */
        moreStyle: {
            type: Object,
            default: () => ({})
        },
        /**
         * 列数
         */
        column: {
            type: Number,
            default: 3
        },
        /**
         * ue配置
         */
        ueConf: {
            type: Object,
            default: () => ({
                fontColor: '#ee3b35',
                borderColor: '#fcac1b',
                drugLinearBg: 'linear-gradient(to top, #fec870, #fff5bb)',
                fontAssistColor: '#ffefc4',
                fontLinear: 'linear-gradient(to bottom, #ffe589 49%, #f9be60 100%)'
            })
        },
        /**
         * padding
         */
        padding: {
            type: String,
            default: '0 14px'
        },
        /**
         * 标题样式
         */
        titleStyle: {
            type: Object,
            default: () => ({})
        },
        /**
         * 日志
         */
        extra: {
            type: Object,
            default: () => ({
                type: 'newYear2021-drug'
            })
        }
    },
    computed: {
        __titleStyle() {
            return Object.assign({color: this.ueConf.fontColor}, this.titleStyle);
        },
        __imgStyle() {
            return Object.assign({}, this.imgStyle);
        },
        __moreStyle() {
            return Object.assign({}, this.moreStyle);
        }
    },
    data() {
        return {
            isTapMore: true
        };
    },
    created() {},
    methods: {
        onSpreadTap() {
            if (!this.isTapMore) {
                return;
            }
            log.send({
                type: 'b',
                action: 'newYear2021-spread'
            });
            /**
             * 展开更多
             */
            this.$emit('spreadMore');
            this.isTapMore = false;
        },
        onMore() {
            navigate({
                url: this.more.url,
                openType: this.more.url.indexOf('pages/gy/medstorehome') >= 0 ? 'relaunch' : 'navigate',
                extra: {
                    ...this.extra,
                    more: true
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.text-background {
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-clip: text;
}

.goods-list {
    &-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    &__item {
        position: relative;
        border-radius: 3px;
        margin-bottom: 4px;

        &__2 {
            width: calc(50% - 3px);
        }

        &__3 {
            width: calc(33.33% - 3px);
        }

        &__img {
            margin: 3px;
            margin-bottom: 0px;
            display: flex;
            height: auto;
            padding-top: calc(100% - 6px);
            position: relative;
            overflow: hidden;
        }

        &__image {
            width: 100%;
            height: auto;
            position: absolute;
            left: 0;
            top: 0;
        }

        &__title {
            font-weight: 500;
            line-height: 17px;
            padding: 0 5px;
            margin-top: 4px;
        }

        &__opeart {
            box-sizing: border-box;
            position: absolute;
            bottom: 8px;
            left: 5px;
            right: 5px;
            display: flex;
            align-items: center;
            height: 33px;
            background-size: 33px 33px;
            border-radius: 100px;
            background-repeat: no-repeat;
            background-position: right center;
            background-image: url("https://medactivity.cdn.bcebos.com/new-year-2021/rob.png");
        }

        &__opeart2 {
            height: 50px;
            background-size: 50px 50px;
        }

        &__finaly-price {
            height: 100%;
            padding-top: 2px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;

            &__ori {
                line-height: 10px;
                font-size: 10px;

                .value {
                    margin-left: 3px;
                    // text-decoration: line-through;
                }
            }

            &__now {
                line-height: 13px;

                .unit {
                    font-size: 10px;
                }

                .value {
                    font-size: 15px;
                }
            }
        }

        &__finaly-price2 {
            padding-top: 0;

            &__ori {
                line-height: 21px;
                font-size: 15px;
                opacity: 0.8;
                margin-bottom: -3px;

                .value {
                    margin-left: 3px;
                }
            }

            &__now {
                line-height: 21px;

                .unit {
                    font-size: 15px;
                    vertical-align: bottom;
                }

                .value {
                    font-size: 19px;
                    vertical-align: bottom;
                }
            }
        }
    }

    &__more {
        color: #fed07d;
        font-weight: 500;
        text-align: center;

        &__icon {
            width: 12px;
            height: 12px;
            transform: translateY(1px);
        }
    }
}
@media only screen and (max-width: 400px) {
    .goods-list__item__finaly-price2 {
        margin-left: 0.12rem;

        &__ori {
            font-size: 13px !important;
        }

        &__now {
            .unit {
                font-size: 14px;
            }

            .value {
                font-size: 16px;
            }
        }
    }
}
</style>
