<template>
    <div class="page">
        <div class="goods">
            <my-image class="goods__img" :src="info.productInfo.image"></my-image>
            <div class="goods__content">
                <div class="goods__title">{{ info.productInfo.name }}</div>
                <div class="goods__price">现金¥{{ cash | minuteToRmb }}</div>
            </div>
        </div>
        <div class="progress">
            <div class="progress__nav">售后进度</div>
            <ul class="progress__list">
                <li class="progress__item" v-if="info.createdTime">
                    <div class="progress__title">提交申请</div>
                    <div class="progress__time">{{ info.createdTime | timestampToDate('yyyy-MM-dd hh:mm:ss') }}</div>
                </li>
                <li class="progress__item" v-if="info.sellerDealTime ">
                    <div class="progress__title">官方客服处理</div>
                    <div class="progress__time">{{ info.sellerDealTime | timestampToDate('yyyy-MM-dd hh:mm:ss') }}</div>
                </li>
                <li class="progress__item" v-if="info.buyerRefundTime ">
                    <div class="progress__title">买家退货</div>
                    <div class="progress__time">{{ info.buyerRefundTime | timestampToDate('yyyy-MM-dd hh:mm:ss') }}</div>
                </li>
                <li class="progress__item" v-if="info.refundTime ">
                    <div class="progress__title">退款完成</div>
                    <div class="progress__time">{{ info.refundTime | timestampToDate('yyyy-MM-dd hh:mm:ss') }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import MyImage from '../../components/image/index'

    export default {
        name: '',
        components: {MyImage},
        // 数据
        data() {
            return {
                orderItemId: '',
                info: '',
                cash: '',
            }
        },

        onShow() {
            const self = this

            self.orderItemId = self.$mp.query.orderItemId
            self.getInfo()
        },

        // 函数
        methods: {
            getInfo() {
                const self = this

                self.api.get('/AfterSale/GetDetailByOrderItemId', {
                    orderItemId: self.orderItemId,
                }).then(res => {
                    self.info = res.data
                    self.cash = self.info.refundAmount || 0
                })
            },
        },

        // 数据计算
        computed: {},

        // 数据监听
        watch: {},
    }
</script>

<style>
    page {
        background-color: #fff;
    }
</style>

<style lang="scss" scoped>
    .goods {
        display: flex;
        align-items: center;
        height: px(225);
        padding: 0 px(55);

        &__img /deep/ img {
            width: px(175);
            height: px(175);
            border-radius: px(10);
        }

        &__content {
            flex: 1;
            margin-left: px(30);
        }

        &__title {
            @include omits(2);
            height: px(100);
            font-size: px(36);
            color: #333;
        }

        &__price {
            margin-top: px(30);
            font-size: px(36);
            color: #666;
        }
    }

    .progress {
        border-top: solid px(25) #ececec;

        &__nav {
            display: flex;
            align-items: center;
            height: px(100);
            padding: 0 px(55);
            font-size: px(36);
            color: #333;
            border-bottom: solid px(3) #eaeaea;
        }

        &__list {
            margin: px(40) px(70);
            border-left: dashed px(3) #ccc;
        }

        &__item {
            padding: 0 px(70) px(20);
        }

        &__title {
            position: relative;
            font-size: px(36);
            color: #333;

            &:before {
                content: '';
                position: absolute;
                top: 50%;
                left: px(-70);
                z-index: 1;
                display: block;
                width: px(30);
                height: px(30);
                transform: translate(-50%, -50%);
                border-radius: 50%;
                background-color: #000;
            }
        }

        &__time {
            margin-top: px(15);
            font-size: px(36);
            color: #333;
        }
    }
</style>