<template>
    <view class="drug-list-panel">
        <navigate v-if="title" :url="title.url">
            <view class="drug-list-panel__title">
                <view class="c-font-big c-font-wb c-color-title">{{ title.text }}</view>
                <view class="drug-list-panel__title__more">
                    <text class="c-font-normal c-color-gray">{{ title.moreText }}</text>
                    <c-icon
                        name="more"
                        font-size="12px"
                        :style="{
                            color: '#858585',
                            'margin-right': '-3px',
                        }"
                    />
                </view>
            </view>
        </navigate>
        <view class="drug-list-panel__wrapper c-row">
            <view
                v-for="(item, index) in list"
                :key="index + item.drugId"
                class="drug-list-panel__wrapper__item c-span4"
                :data-show="item.logStr + '_' + index"
                :class="showLogClass"
                use-trackby
            >
                <view class="drug-list-panel__wrapper__item__inner">
                    <drug-list-item
                        :page="page"
                        style-type="narrow"
                        :is-high-style="isHighStyle"
                        :corner-img="item.cornerImg"
                        :drug-id="item.drugId"
                        :head-image="item.headImage"
                        :title-name="item.titleName"
                        :target-url="item.targetUrl"
                        :price="item.price"
                        :price-type="item.priceType"
                        :is-video="item.isVideo"
                        :status-text="item.statusText"
                        :top-label="item.preLabel"
                        :logkey="item.logStr + '_' + index"
                        width="100%"
                        height="100%"
                        radius=".1rem .1rem 0 0"
                        box-radius=".1rem"
                        card-style="card-style"
                        :box-shadow="false"
                        :info-style="{
                            'min-height': '.85rem',
                            'margin-bottom': isHighStyle ? '.05rem' : '.09rem',
                            'padding-top': '0.09rem',
                            'margin-left': '0.13rem',
                            'margin-right': '0.13rem',
                        }"
                        :title-style="{
                            'font-size': '.15rem',
                            'line-height': '.23rem',
                        }"
                        price-margin-top="0.09rem"
                    >
                        <view
                            slot="priceRight"
                            :style="{
                                'position': 'relative',
                                'top': isHighStyle ? '-8px' : '0',
                            }"
                        >

                            <trolleys-mini
                                :disabled="item.status != 1"
                                @trolleysTap="addTrolleys(item, index)"
                            />
                        </view>
                    </drug-list-item>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 药品列表
* @author zhangeryi
* @categories 药品列表
* @tags [component]
*/
import Navigate from '../common/navigate';
import DrugListItem from './drug-list-item';
import TrolleysMini from './trolleys-mini';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {send} from '@utils/log';
import * as TrolleysUtil from '@utils/newTrolleys';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        DrugListItem,
        TrolleysMini,
        Navigate,
        CIcon
    },
    props: {
        /* 药品数据 */
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        /**
         * 查看更多url
         */
        title: {
            type: Object,
            default() {
                return {};
            }
        },
        // 添加购物车api
        cartApi: {
            type: String,
            default: ''
        },
        /* 曝光日志class */
        showLogClass: {
            type: String,
            default: 'SHOW_LOG_MODULE'
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            goodsImg: '',
            drugNum: 0
        };
    },
    computed: {
        isHighStyle() {
            for (let i = 0; i < this.list.length; i++) {
                if (this.list[i].priceType) {
                    return true;
                }
            }
            return false;
        }
    },
    methods: {
        addTrolleys(drug, index) {
            /* 添加购物车 */
            this.$emit('addTrolleys', drug);
            if (this.cartApi) {
                this.goodsImg = '';
                if (drug) {
                    if (+drug.status !== 1) {
                        // 无库存
                        this.$api.showToast({
                            icon: 'none',
                            title: drug.statusToast || '没有库存了，看看其他药品吧'
                        });
                        return;
                    }
                    this.goodsImg = drug.headImage;
                }
                TrolleysUtil.asyncAddTrolleys({url: this.cartApi, drug: drug})
                    .then(({data}) => {
                        this.drugNum = +data.drugNum || 0;
                        this.$refs.scrollFold && this.$refs.scrollFold.upfoldOpen();
                    });
            }
            send({
                type: 'b',
                action: 'click',
                extra: {
                    type: 'listPanelAddCart',
                    logStr: `${drug.logStr}_${index}`
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    padding-left: .1rem;
    padding-right: .1rem;
}

.drug-list-panel {
    &__title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.02rem;

        &__more {
            white-space: nowrap;
        }
    }

    &__wrapper {
        flex-wrap: wrap;
        justify-content: flex-start;

        &__item {
            flex: none;
            margin-top: .08rem;
        }
    }
}
</style>


