<template>
    <div class="">
        <div class="info" v-if="info">
            <my-image class="info__img" :src="info.productInfo.image"></my-image>
            <div class="info__content">
                <div class="info__row">
                    <div class="info__text">退款编号：</div>
                    <div class="info__text">{{ info.refundNo }}</div>
                    <img class="info__copy" src="/static/icon/copy.png" @click="copyNumber(info.refundNo)" alt="">
                </div>
                <div class="info__row">
                    <div class="info__text">退款明细：</div>
                    <div class="info__text">现金¥{{ cash | minuteToRmb }}（含运费¥{{ postage | minuteToRmb }}）</div>
                </div>
                <div class="info__bottom">
                    <div class="info__title">{{ afterSaleStatus[info.status] }}</div>
                    <div class="jump" @click="jump({path: '/pages/order/afterSaleDetail', query: {orderItemId: orderItemId}})">
                        <div class="jump__text">查看明细</div>
                        <i class="iconfont iconarrow jump__icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="button" v-if="info">
            <div v-if="info.rejectCount < 2 && (info.status === 4 || info.status === 6 || info.status === 10)" class="button__btn" @click="jumpApply()">申请退款</div>
            <div v-if="info.status === 1 || info.status === 5 || info.status === 8" class="button__btn" @click="jumpApply('update')">修改申请</div>
            <div v-if="info.status === 1 || info.status === 5 || info.status === 8" class="button__btn" @click="cancel">取消退款</div>
            <!-- <div  class="button__btn active-btn" @click="jumpLogistics">填写物流信息</div> -->
            <div v-if="info.status === 8" class="button__btn active-btn" @click="jumpLogistics">填写退货单号</div>
        </div>
        <ul class="list">
            <li class="list__item" v-if="!info">
                <img class="list__icon" src="/static/generalize/service_icon.jpg" alt="">
                <div class="list__content">
                    <div class="list__title">{{ siteTitle || '' }} {{ now | timestampToDate('yyyy-MM-dd hh:mm:ss') }}</div>
                    <div class="list__box">
                        <span class="list__text">您好，我是{{ siteTitle || '' }}售后客服。很抱歉给您带来不便，我将竭诚为您提供售后服务哦~您若对商品不满意，可在退款服务时间内</span>
                        <span class="list__link" @click="jumpApply()">提交退款申请</span>
                    </div>
                </div>
            </li>
            <li class="list__item" v-for="(item, index) in fullTimelineLogList" :key="index">
                <div class="list__type" v-if="item.contentType === 'text'">
                    <img class="list__icon" src="/static/generalize/service_icon.jpg" alt="">
                    <div class="list__content">
                        <div class="list__title">{{ siteTitle || '' }} {{ item.created | timestampToDate('yyyy-MM-dd hh:mm:ss') }}</div>
                        <div class="list__box">
                            <span class="list__text">{{ item.showContent }}</span>
                            <span class="list__link list__link--disable">{{ item.linkText || '' }}</span>
                        </div>
                    </div>
                </div>
                <div class="list__type" v-if="item.contentType === 'card'">
                    <img class="list__icon" src="/static/generalize/service_icon.jpg" alt="">
                    <div class="list__content">
                        <div class="list__title">{{ siteTitle || '' }} {{ item.created | timestampToDate('yyyy-MM-dd hh:mm:ss') }}</div>
                        <div class="list__box list__box--info refund">
                            <div class="refund__nav">{{ item.actionName || '' }}</div>
                            <ul class="refund__list">
                                <li class="refund__item" v-for="(value, key) in item.showContent" :key="key">{{ value }}</li>
                            </ul>
                            <ul class="images">
                                <li class="images__item" v-for="(value, key) in item.images" :key="key">
                                    <img class="images__img" :src="value" alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="submit-black"></div>
        <button class="submit" open-type="contact">
            <i class="iconfont iconkefu navigation__icon"></i>
            <div class="submit__btn" @click="submit">在线客服</div>
        </button>
    </div>
</template>

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

    export default {
        name: '',
        components: {MyImage},
        // 数据
        data() {
            return {
                orderId: '',
                orderItemId: '',
                orderStatus: '',
                price: '',
                now: '',
                info: '',
                fullTimelineLogList: [],
                afterSaleStatus: {
                    '1': '退款审核中',
                    '2': '等待商家退款',
                    '3': '退款完成',
                    '4': '退款取消',
                    '5': '退货审核中',
                    '6': '退货取消',
                    '7': '退货完成',
                    '8': '等待买家退货',
                    '9': '等待确认收货',
                    '10': '已拒绝',
                },
                cash: '',
                postage: '',
            }
        },

        onShow() {
            const self = this

            self.orderId = self.$mp.query.orderId
            self.orderItemId = self.$mp.query.orderItemId
            self.orderStatus = self.$mp.query.orderStatus
            self.price = self.$mp.query.price
            self.now = Date.parse(new Date())
            self.getInfo()
        },

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

                self.api.get('/AfterSale/GetDetailByOrderItemId', {
                    orderItemId: self.orderItemId,
                }).then(res => {
                    self.info = res.data
                    self.fullTimelineLogList = self.info ? self.info.fullTimelineLogList : []
                    self.cash = self.info ? self.info.refundAmount : 0
                    self.postage = self.info ? self.info.orderInfo.postage : 0
                })
            },

            // 跳转到申请页面
            jumpApply(type) {
                const self = this
                let applyId = ''

                if (self.info) {
                    applyId = self.info.id
                }

                self.router.push({
                    path: '/pages/order/afterSaleApply',
                    query: {
                        orderId: self.orderId,
                        orderItemId: self.orderItemId,
                        orderStatus: self.orderStatus,
                        price: self.price,
                        applyId: applyId,
                        type: type,
                    },
                })
            },

            // 跳转到填写物流信息
            jumpLogistics() {
                const self = this

                self.router.push({
                    path: '/pages/order/afterSaleLogistics',
                    query: {
                        applyId: self.info.id,
                    },
                })
            },

            // 取消退款
            cancel() {
                const self = this

                self.fn.showModal({
                    content: '您确定要取消退款吗？',
                }).then(res => {
                    if (res.confirm) {
                        self.api.post('/AfterSale/CancelRefund', {
                            id: self.info.id,
                        }).then(() => {
                            self.router.back()
                        })
                    }
                })
            },

            // 复制编号
            copyNumber(val) {
                const self = this

                uni.setClipboardData({
                    data: val,
                    success: () => {
                        self.fn.showToast('复制成功')
                    },
                })
            },
        },

        // 数据计算
        computed: {},

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

<style lang="scss" scoped>
    .info {
        display: flex;
        align-items: center;
        padding: px(30) px(55);
        background-color: #fff;

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

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

        &__row {
            display: flex;
            align-items: center;
            margin-bottom: px(20);
        }

        &__text {
            font-size: px(36);
            color: #999;
        }

        &__copy {
            width: px(40);
            height: px(40);
            margin-left: px(30);
        }

        &__bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

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

    .jump {
        display: flex;
        align-items: center;

        &__text {
            font-size: px(36);
            color: #999;
        }

        &__icon {
            margin-top: px(5);
            margin-left: px(10);
            font-size: px(36);
            color: #999;
        }
    }

    .button {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: px(25) px(55);
        background-color: #fff;
        border-top: solid px(3) #eaeaea;

        &__btn {
            display: flex;
            justify-content: center;
            align-items: center;
            height: px(70);
            padding: 0 px(30);
            margin-left: px(30);
            font-size: px(38);
            color: #666;
            border: solid px(3) #eaeaea;
        }
    }

    .list {
        padding: px(40);

        &__item {
            display: flex;
            margin-top: px(40);

            &:first-child {
                margin-top: 0;
            }
        }

        &__type {
            display: flex;
        }

        &__icon {
            width: px(115);
            height: px(115);
            border-radius: 50%;
        }

        &__content {
            margin-left: px(40);
        }

        &__title {
            font-size: px(36);
            color: #999;
        }

        &__box {
            position: relative;
            width: px(690);
            padding: px(20) px(50) px(20) px(40);
            margin-top: px(20);
            border-radius: px(15);
            background-color: #fff;

            &:before {
                content: '';
                position: absolute;
                top: px(15);
                left: 0;
                z-index: 1;
                display: block;
                width: 0;
                height: 0;
                transform: translateX(-50%);
                border-width: px(20);
                border-style: solid;
                border-color: #fff transparent transparent transparent;
            }

            &--info {
                width: auto;
                max-width: px(690);
            }
        }

        &__text {
            font-size: px(36);
            color: #333;
        }

        &__link {
            padding-left: px(10);
            font-size: px(36);
            color: #333;
            text-decoration: underline;

            &--disable {
                color: #999;
            }
        }
    }

    .refund {

        &__nav {
            padding: px(20) 0;
            font-size: px(36);
            color: #333;
            border-bottom: solid px(3) #eaeaea;
        }

        &__list {
            margin-top: px(20);
        }

        &__item {
            margin-top: px(30);
            font-size: px(36);
            color: #333;

            &:first-child {
                margin-top: 0;
            }
        }
    }

    .images {
        display: flex;
        flex-wrap: wrap;
        margin-top: px(20);

        &__item {
            width: px(135);
            height: px(140);
            margin: 0 0 px(30) px(20);

            &:nth-child(4n+1) {
                margin-left: 0;
            }
        }

        &__img {
            width: 100%;
            height: 100%;
        }
    }
    .submit-black{
        height: px(110);
    }
.submit{
    position: fixed;
    height: px(110);
    line-height: px(110);
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: px(44);
    .submit__btn{
        margin-left: px(20)
    }
}
.active-btn{
    color: #27a34f;
    border-color: #27a34f;
}
</style>