<template>
    <view class="rp-card">
        <navigate :url="data.url">
            <view class="wrapper">
                <view class="c-gap-inner-top c-gap-inner-bottom rp-card__title">
                    <view class="c-line-clamp1 c-gap-inner-right-large c-font-13">
                        <view v-if="data.titleInfo" class="c-line-clamp1">
                            <text v-if="data.titleInfo.title" class="c-color-333">{{ data.titleInfo.title }}：</text>
                            <text class="c-color-333 rp-card__title__value">{{ data.titleInfo.value }}</text>
                        </view>
                    </view>
                    <view class="flex-auto c-font-13">
                        <text v-if="data.status" :style="{color: data.status.color}">{{ data.status.text }}</text>
                    </view>
                </view>
            </view>
            <!-- 信息 -->
            <view
                v-if="data.info && data.info.length"
                class="wrapper"
            >
                <template v-for="(info) in data.info">
                    <view v-if="info.type === 'drug'" class="rp-card__info__drug c-gap-top">
                        <view
                            v-if="info.title"
                            class="rp-card__info__drug__title"
                        >
                            {{ info.title }}
                        </view>
                        <view
                            v-if="info.value"
                            class="rp-card__info__drug__name c-line-clamp1 c-font-13 c-color"
                        >
                            <text
                                v-for="(item, i) in info.value"
                                :key="i"
                                class="c-inline-block"
                            >
                                <text v-if="i !== 0" class="c-inline-block s-line">/</text>{{ item.titleName }}
                            </text>
                        </view>
                    </view>
                    <template v-else>
                        <view class="c-row rp-card__info__text c-font-13 c-gap-top-small">
                            <view v-if="info.title" class="flex-auto c-color-333 c-span1">{{ info.title }}：</view>
                            <view class="c-color">{{ info.value }}</view>
                        </view>
                    </template>
                </template>
            </view>
        </navigate>
        <!-- 底部信息 -->
        <view class="wrapper">
            <view class="rp-card__bottom c-gap-inner-top c-gap-inner-bottom-large">
                <view
                    v-if="data.op && data.op.length"
                    class="rp-card__bottom__btn__wrappe c-tar"
                >
                    <view
                        v-for="(btn, index) in data.op"
                        :key="index"
                        class="rp-card__bottom__btn"
                    >
                        <view
                            v-if="btn.hidden !== '1'"
                            :class="{
                                'c-gap-left-small': index !== 0
                            }"
                            class="rp-card__bottom__btn__inner"
                        >
                            <c-button
                                :height="28"
                                :font-size="12"
                                :primary-color="btn.color"
                                border-radius="20px"
                                @tap="orderBtnTap(btn)"
                            >
                                {{ btn.buttonText }}
                            </c-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 药品个人中心
 * @author zhangeryi@baidu.com
 * @author niulei06@baidu.com
 */
/* global getApp */
import Navigate from '@commonComponents/navigate';
import Button from '@baidu/med-ui/components/Button/Button';
export default {
    config: {
        component: true
    },
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        shopIndex: {
            type: Number
        },
        logkey: {
            type: String
        }
    },
    components: {
        'c-button': Button,
        'navigate': Navigate
    },
    data() {
        return {
            opFold: '',
            opFoldOpen: false
        };
    },
    methods: {
        orderBtnTap(btn) {
            if (btn.type === 'goBuy') {
                let drugData = this.data.info.filter(itm => itm.type === 'drug')[0]
                    && this.data.info.filter(itm => itm.type === 'drug')[0].value || [];
                getApp().globalData.gyToOrderConfirmDrugs = drugData;
                this.$api.setStorageSync('gyToOrderConfirmDrugs', drugData);
            }
            this.$emit('orderBtnTap', btn);
        }
    }
};
</script>
<style lang="less">
@border: 1px solid #f1f1f1;

.wrapper {
    padding-left: .17rem;
    padding-right: .17rem;
}

.z-red {
    color: #ff6050;
}

.z-black {
    color: #252525;
}

.flex-auto {
    flex: none;
    width: auto;
    white-space: nowrap;
}

.rp-card {
    border-radius: .08rem;
    background: #fff;

    &__title {
        border-bottom: @border;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;

        &__value {
            font-size: 15px;
            line-height: 15px;
            font-weight: bold;
        }
    }

    &__info {
        &__drug {
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
            align-items: center;
            background: #eaffff;
            padding: 6px 0;
            margin-bottom: .05em;
            border-radius: 4px;

            &__title {
                background: #00c8c8;
                color: #fff;
                text-align: center;
                border-radius: 3px;
                width: 17px;
                height: 17px;
                line-height: 17px;
                margin-left: 6px;
                font-size: 10px;
            }

            &__name {
                padding: 0 .1rem;

                .s-line {
                    padding: 0 3px;
                }
            }
        }

        &__text {
            justify-content: flex-start;
        }
    }

    &__bottom {
        &__btn {
            display: inline-block;

            &__inner {
                min-width: .66rem;
            }
        }
    }
}
</style>
