<template>
    <view class="content">
        <block v-if="array.length > 0">
        
           
            
            <!-- 订单列表 -->
            <view class="order--content" :class="[true ? 'chunk': 'broad']" v-for="(item, arrayIndex) in array"
                :key="arrayIndex">
                <view class="order--group--header"  @click=" $Router.push({ name: 'ShopDetail', params: {ShopId: item.shop.shop_id}})">
                    <image class="logo" v-if="item.shop.cover != ''" :src="item.shop.cover" mode="aspectFill"></image>
                    <view class="store">
                        {{item.shop.name}}
                        <uni-icons type="right" size="16" color="#666" />
                    </view>
                    <view class="stateText">
                        <image v-if="item.type.state  == 1" src="/static/icon/icon-money.png" mode="aspectFill" />
                        <image v-if="item.type.state  == 2" src="/static/icon/icon-back.png" mode="aspectFill" />
                        <image v-if="item.type.state  == 3" src="/static/icon/icon-exchange.png" mode="aspectFill" />
                        {{item.type.text}}
                    </view>
                </view>

                <view class="order--flex" @click="$Router.push({ name: 'StoreGoods', params: {id: item.items[0].goods_id}})">
                    <image class="order--cover" :src="item.items[0].cover" mode="aspectFill"></image>
                    <view class="order--title">
                        {{item.items[0].goods_name}}
                        <view class="unit" v-if="item.items[0].sku.unit">
                            {{item.items[0].sku.unit}}
                        </view>
                    </view>
                   
                    <view class="order--count">
                        <view class="order--price">{{item.items[0].price}}<text>DT积分</text></view>
                        <view class="order--sum">共{{item.items[0].qty}}件</view>
                    </view>
                </view>

                <view class="order-state">
                    {{item.state.text}}
                    <view class="order-des">{{item.state.remark}}</view>
                </view>
                <view class="order--btns">
                    <view class="item item--cancle"
                        @click="$Router.push({name:'OrderRefundDetail',params:{id:item.refund_no}})">查看详情</view>
                </view>
            </view>

            <!-- 加载更多 -->
            <view class="pages-load">
                <u-loadmore :status="status" />
            </view>
        </block>
        <block v-else>
            <view class="vertical order-null">
                <u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无相关订单"
                    textColor="#999"></u-empty>
            </view>
        </block>
    </view>
</template>

<script>
    import {
        refunds
    } from '@/apis/interfaces/order.js'
    export default {
        data() {
            return {
                status: "loading",
                array: [],
                page: 1
            };
        },
        onShow() {
            if (this.$store.getters.getRefresh == 1) {
                this.$store.commit('setRefresh', 0)
                this.array = []
                this.page = 1
                this.getOrder()
            }
        },
        mounted() {
            this.getOrder()
        },
        onPullDownRefresh() {
            this.page = 1;
            this.getOrder();
        },
        methods: {
            getOrder() {
                refunds({
                    page: this.page
                }).then(res => {
                    if (res.page.current === 1) {
                        this.array = []
                    }
                    uni.stopPullDownRefresh();
                    this.array = this.array.concat(res.data);
                    this.status = res.page.has_more ? 'loadmore' : 'nomore';
                })
            },
        },
        onReachBottom() {
            if (this.status === 'loadmore') {
                this.page += 1
                this.status = 'loading'
                this.getOrder()
            }
        }
    }
</script>

<style lang="scss">
    .content {
        background: $window-color;
        min-height: 100vh;
    }

    .tabs {
        background: white;
    }

    // 数据列表空
    .order-null {
        height: 80vh;
    }

    // 加载分页
    .pages-load {
        padding-bottom: $padding;
    }

    .text-nowrap {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .order--content {
        background: white;

        &.chunk {
            margin: $margin $margin;
            border-radius: $radius;
            padding: $margin;
        }

        &.broad {
            padding: $margin;
            border-bottom: solid 1rpx #ddd;
        }

        .order--group--header {
            padding-bottom: $margin;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &>.logo {
                width: 38rpx;
                height: 38rpx;
                vertical-align: middle;
                margin-right: $margin/2;
            }

            &>.store {
                @extend .text-nowrap;
                flex: 1;
                margin-right: $margin;
                font-size: 28rpx;
                line-height: 40rpx;
                color: #555;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                box-sizing: border-box;
            }

            &>.stateText {
                font-size: 28rpx;
                display: flex;
                color: #444;
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
                box-sizing: border-box;

                image {
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 10rpx;
                }
            }
        }

        .order--group--flex {
            @extend .order--flex;
            margin-bottom: $margin - 10;

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

        .order--header {
            display: flex;
            justify-content: space-between;
            padding-bottom: $margin;
            align-items: center;

            &>.order--no {
                flex: 1;
                margin-right: $margin;
                font-size: 26rpx;
                line-height: 40rpx;
                color: #555;
                @extend .text-nowrap;
            }

            &>.stateText {
                font-size: 26rpx;
            }
        }

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

            .order--cover {
                vertical-align: top;
                width: 128rpx;
                height: 128rpx;
            }

            .order--title {
                text-align: left;
                flex: 1;
                padding-left: $margin;
                font-size: 28rpx;
                line-height: 40rpx;
            }
            .unit{
                color:#999;
                font-size: 26rpx;
                padding-top: 10rpx;
            }

            .order--count {
                text-align: right;
                padding-left: $margin;
                line-height: 40rpx;

                // color: $text-price;
                .order--price {
                    font-size: 30rpx;
                    font-weight: bold;

                    &>text {
                        font-size: 24rpx;
                        font-weight: normal;
                        padding-left: 10rpx;
                    }
                }

                .order--sum {
                    font-size: 26rpx;
                    color: #777;
                }
            }


        }

        .order-state {
            text-align: left;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            font-size: 26rpx;
            padding: $padding $padding / 2 $padding 0;

            .order-des {
                padding-left: $padding - 10;
                color: #777;
            }
        }

        .order--btns {
            border-top: solid 1rpx #f9f9f9;
            display: flex;
            justify-content: flex-end;
            padding-top: $margin - 10;

            &>.item {
                font-size: 26rpx;
                margin-left: $margin/2;
                color: #333;
                line-height: 56rpx;
                border: solid 1rpx #ddd;
                padding: 0 $padding;
                border-radius: 10rpx;

                &--cancel,
                &--delete,
                &--logistic {
                    color: #666;

                }

                &--pay,
                &--sign {
                    color: #34CE98;
                    border-color: #34CE98;
                }
            }
        }
    }
</style>
