<template>
    <view class="refund-item__container">
        <view v-if="!isLast" class="refund-item__container__line"/>
        <view class="refund-item__container__header">
            <view class="refund-item__container__header--wrapper">
                <view
                    :style="{backgroundColor: isFirst ? '#FD503E' : '#e0e0e0'}"
                    class="refund-item__container__header__dot"
                />
                <view
                    :style="{color: isFirst ? '#FD503E' : '1f1f1f'}"
                    class="refund-item__container__header__status c-font-medium"
                >
                    {{ status }}
                </view>
            </view>
            <view class="refund-item__container__header__date c-font-normal">
                {{ time }}
            </view>
        </view>
        <view class="refund-item__container__content c-font-medium-less">
            {{ comment }}
        </view>
        <!-- 气泡 -->
        <view v-if="popover" class="refund-item__container__popover">
            <bubble-item>
                <template v-if="popover.deliveryId">
                    <view class="refund-item__container__popover--wrapper">
                        <view class="refund-item__container__popover__deliveryInfo c-font-medium-less">
                            <view class="refund-item__container__popover__deliverInfo__id">
                                {{ popover.deliveryId.title }} {{ popover.deliveryId.value }}
                            </view>
                            <view class="refund-item__container__popover__deliverInfo__company">
                                {{ popover.deliveryCompany.title }} {{ popover.deliveryCompany.value }}
                            </view>
                        </view>
                        <view
                            class="refund-item__container__popover__button c-font-normal"
                            @tap="onJump(popover.button.url)"
                        >
                            {{ popover.button.title }}
                        </view>
                    </view>
                </template>
                <template v-else>
                    <view class="refund-item__container__popover__storeName">
                        <c-image
                            class="refund-item__container__popover__storeName__img"
                            has-compress
                            :src="popover.imgUrl"
                            width="0.24rem"
                            height="0.24rem"
                            :hack-white-stroke="false"
                            :extra="{column: 1}"
                        />
                        <view
                            class="refund-item__container__popover__storeName__title c-font-medium-less"
                        >{{ popover.storeName }}</view>
                    </view>
                    <view class="refund-item__container__popover__content c-font-medium-less">
                        {{ popover.content }}
                    </view>
                </template>
            </bubble-item>
        </view>
    </view>
</template>

<script>
/**
 * @file 基因检测
 * @author fujinghua
 * @categories 业务组件
 * @tags [component]
 */
import BubbleItem from './BubbleItem';
import CImage from '@components/common/image';
import {navigate} from '@utils/navigate';

export default {
    config: {
        component: true,
    },
    options: {
        addGlobalClass: true
    },
    components: {
        BubbleItem,
        CImage
    },
    props: {
        status: {
            type: String,
            default: ''
        },
        time: {
            type: String,
            default: '',
        },
        comment: {
            type: String,
            default: '',
        },
        popover: {
            type: Object,
            default: null
        },
        isFirst: {
            type: Boolean,
            default: false
        },
        isLast: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    },
    methods: {
        onJump(url) {
            navigate({
                url
            });
        }
    }
};
</script>

<style lang="less" scoped>
    .refund-item__container {
        position: relative;
        margin: 0.1rem 0.12rem 0.17rem;
        color: #858585;
        font-weight: 400;

        &__line {
            position: absolute;
            left: 0.045rem;
            top: 0.13rem;
            height: calc(100% + 0.1rem);
            border-right: 1px dashed #e0e0e0;
        }

        &__header {
            display: flex;
            justify-content: space-between;

            &--wrapper {
                display: flex;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 0.07rem;
            }

            &__dot {
                width: 0.1rem;
                height: 0.1rem;
                background-color: #e0e0e0;
                border-radius: 50%;
                margin-top: -0.03rem;
                margin-right: 0.08rem;
                position: relative;
                z-index: 10;
            }

            &__status {
                font-weight: bold;
                color: #1f1f1f;
            }
        }

        &__content {
            margin-left: 0.18rem;
            color: #525252;
        }

        &__popover {
            padding-left: 0.1rem;
            //slot 商家校验
            &__storeName {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 0.08rem;

                &__img {
                    @imgRadius: 0.24rem;
                    width: @imgRadius;
                    height: @imgRadius;
                    border-radius: 50%;
                    background-color: #e0e0e0;
                    vertical-align: middle;
                }

                &__title {
                    margin-left: 0.08rem;
                    color: #1f1f1f;
                    font-weight: bold;
                }
            }

            &__content {
                color: #525252;
            }
            //slot 物流信息
            &--wrapper {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #1f1f1f;
            }

            &__button {
                color: #525252;
                padding: 0.02rem 0.1rem;
                border: 0.0033rem solid #979797;
                border-radius: 0.145rem;
            }
        }
    }
</style>
