<template>
    <div class="exchange-container">
        <Tabs :tabs="tabs" @change-tabs="changeTabs"></Tabs>
        <NavTitle :more="tabObj[curTabs].more">
            <template slot="title">{{tabObj[curTabs].title}}</template>
        </NavTitle>
        <Modal v-for="(item, index) in tabObj[curTabs].data" :key="index" class="list-cont">
            <template slot="label">
                <div class="original-order-code" v-if="curTabs === '换货'">原订单号：{{item.sourceOrderCode}}</div>
                <div class="order-code" :class="{lg: curTabs === '退货'}">订单号：{{item.orderCode}}</div>
            </template>
            <template slot="cont">
                <div class="order-cont" >
                    <div v-for="(goods, key) in item.goodsList" :key="key" class="goods-info">
                        <img :src="fomartImg(goods.goodsImage, 77, 104)">
                        <div class="right">
                            <div class="goods-name">{{goods.productName}}</div>
                            <div class="number">
                                <span class="skn">SKN：{{goods.productSkn}}</span>
                                <span class="sku">SKU：{{goods.productSku}}</span>
                            </div>
                            <div class="remark">备注：{{goods.remark}}</div>
                        </div>
                    </div>
                    <div class="user-info">
                        <template v-if="curTabs === '退货'">
                            <div class="item"><span class="item-label">退款金额：</span>¥{{item.returnAmountText}}</div>
                            <div class="item"><span class="item-label">退款方式：</span>{{item.returnAmountModeName}}</div>
                        </template>
                        <template v-if="curTabs === '换货'">
                            <div class="item"><span class="item-label">收货人：</span>{{item.deliveryAddressBO.consignee}}</div>
                            <div class="item"><span class="item-label">手机号：</span>{{item.deliveryAddressBO.mobile}}</div>
                        </template>
                        <div class="item"><span class="item-label">申请类型：</span>{{item.refundChangeModeName}}</div>
                        <div class="item"><span class="item-label">申请人：</span>{{item.applicant}}</div>
                        <div class="item"><span class="item-label">当前状态：</span>{{item.statusName}}</div>
                        <div class="item address" v-if="curTabs === '换货'"><span class="item-label">地址：</span>{{item.deliveryAddressBO.address}}</div>
                    </div>
                </div>
            </template>
        </Modal>
        <dataNull v-if="tabObj[curTabs].haveData">
            <template slot="cont">暂无{{curTabs}}信息</template>
        </dataNull>
    </div>
</template>

<script>
import Tabs from './tabs';
import Modal from './modal';
import NavTitle from './nav-title';
import dataNull from './data-null';
import homeModel from '../../../models/home';
import {image} from '../../../common/helpers';

export default {
    name: 'exchange',
    props: ['uid'],
    data() {
        return {
            curTabs: '换货',
            tabObj: {
                '换货': {
                    title: '最近10笔换货订单',
                    haveData: true,
                    data: [],
                    more: 'http://erp.yohobuy.com/customer/exchange/index'
                },
                '退货': {
                    title: '最近10笔退货订单',
                    haveData: true,
                    data: [],
                    more: 'http://erp.yohobuy.com/customer/returned/index'
                }
            }
        };
    },
    mounted() {
        this.getChangeList();
    },
    computed: {
        tabs() {
            return Object.keys(this.tabObj);
        }
    },
    methods: {
        fomartImg(url, width, height) {
            return image(url, width, height);
        },
        changeTabs(item) {
            this.curTabs = item;

            if (item === '换货' && !this.tabObj[item].haveData) {
                this.getChangeList();
            }

            if (item === '退货' && !this.tabObj[item].haveData) {
                this.getRefundList();
            }
        },
        getChangeList() {
            homeModel.getChangeList({
                uid: this.uid,
                page: 1,
                limit: 10
            }).then(ret => {
                if (ret && ret.code === 200) {
                    this.tabObj['换货'].data = ret.data && ret.data.list || [];
                    this.tabObj['换货'].haveData = ret.data && ret.data.list && ret.data.list.length === 0;
                }
            });
        },
        getRefundList() {
            homeModel.getRefundList({
                uid: this.uid,
                page: 1,
                limit: 10
            }).then(ret => {
                if (ret && ret.code === 200) {
                    this.tabObj['退货'].data = ret.data && ret.data.list || [];
                    this.tabObj['退货'].haveData = ret.data && ret.data.list && ret.data.list.length === 0;
                }
            });
        }
    },
    components: {
        Tabs,
        Modal,
        NavTitle,
        dataNull
    }
}
</script>

<style lang="scss" scoped>
.exchange-container {
    .original-order-code {
        float: left;
        font-size: 14px;
    }

    .order-code {
        float: right;
        font-size: 14px;
    }

    .lg {
        float: left;
    }

    .list-cont {
        padding-bottom: 20px;
        margin-bottom: 15px;
        background: #fff;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .goods-info {
        display: flex;
        padding: 15px 20px;

        img {
            width: 77px;
            height: 104px;
        }

        .right {
            flex: 1;
            margin-left: 10px;
        }

        .goods-name {
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-weight: 500;
            font-size: 18px;
            min-height: 50px;
            font-weight: bold;
        }

        .number {
            margin-top: 9px;
            height: auto;
            overflow: hidden;

            span {
                width: 50%;
                text-align: left;
                float: left;
                font-size: 14px;
                color: #979797;
                line-height: 20px;
            }
        }

        .remark {
            width: 100%;
            font-size: 14px;
            color: #979797;
            margin-top: 5px;
            line-height: 20px;
        }
    }

    .user-info {
        height: auto;
        overflow: hidden;
        font-size: 15px;
        width: 100%;
        border-top: 1px solid #EAEBEB;
        padding: 0 20px;
        box-sizing: border-box;

        .item {
            width: 50%;
            float: left;
            line-height: 30px;
            line-height: 25px;
            margin-top: 15px;
        }

        .item-label {
            color: #979797;
        }

        .address {
            width: 100%;
        }
    }
}
</style>