<template>
    <view class="drug-content">
        <view v-if="drugShow">
            <view
                v-for="(drugItem, index) in drugs"
                :key="'drug_' + index + drugItem.drugId"
                class="drug-item c-gap-inner-top-large c-gap-inner-bottom-large"
            >
                <drug-list-item
                    :drug-id="drugItem.drugId"
                    :head-image="drugItem.headImage"
                    :title-name="drugItem.titleName"
                    :text-name="drugItem.textName"
                    :target-url="drugItem.targetUrl"
                    :is-video="drugItem.isVideo"
                    :badge="drugItem.badge"
                    :price="drugItem.price"
                    :sales="drugItem.sales"
                    :status-text="drugItem.statusText"
                    :tips-text="drugItem.tipsText"
                    :label="drugItem.label"
                    :pre-label="drugItem.preLabel"
                    :logkey="logkey"
                    :ubc-log-search-all="ubcLogSearchAll"
                >
                    <view slot="priceRight" class="add-trolleys">
                        <view
                            :class="{
                                'disabled': drugItem.status != 1,
                            }"
                            class="m-icon m-icon-add"
                            @tap.stop="addTrolleys(drugItem)"
                        />
                    </view>
                </drug-list-item>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 搜索综合购药
 * @author zhangeryi
 */
import drugListItem from '../gy/drug-list-item';
import * as TrolleysUtil from '@utils/newTrolleys';
export default {
    config: {
        component: true
    },
    props: {
        drugs: {
            type: Array,
            default() {
                return [];
            }
        },
        drugCart: {
            type: Object
        },
        logkey: {
            type: String
        },
        ubcLogSearchAll: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            drugShow: true
        };
    },
    watch: {
        drugs() {
            // trick 解决药品url不更新问题
            this.drugShow = false;
            this.$mpUpdated(() => {
                this.drugShow = true;
            });
        }
    },
    components: {
        'drug-list-item': drugListItem
    },
    options: {
        addGlobalClass: true
    },
    created() {
        this.addTrolleys();
    },
    methods: {
        addTrolleys(drug) {
            if (drug) {
                // 带药品时为添加购物车 不带药品时为获取购物车数量
                if (+drug.status !== 1) {
                    // 无库存
                    this.$api.showToast({
                        icon: 'none',
                        title: drug.statusToast || '没有库存了，看看其他药品吧'
                    });
                    return;
                }
            }
            TrolleysUtil.asyncAddTrolleys({url: this.drugCart && this.drugCart.asyncAddUrl, drug: drug})
                .then(({data}) => {
                    this.drugNum = +data.drugNum || 0;
                });
        }
    }
};
</script>
<style lang="less" scoped>
.drug {
    &-content {
        padding-left: .13rem;
        padding-right: .13rem;
    }

    &-item {
        border-top: 1px solid #f1f1f1;

        &:first-child {
            border-top: none;
        }

        .add-trolleys {
            text-align: right;
            color: #ff6050;

            .m-icon-add {
                font-size: 26px;
                display: block;
                float: right;
                padding-left: 20px;
                padding-right: 15px;
                margin-right: -15px;
                margin-top: -5px;

                &.disabled {
                    color: #ccc;
                }
            }
        }
    }
}
</style>
