<template>
    <view class="returnCont">
        <block v-if="list.length > 0">
            <view class="returnList" v-for="(item, index) in list" :key="index">
                <view class="MallRefundsTemplate">
                	<view class="top">
                		<view class="company">
                			<view class="company-logo" v-if="item.shop">
                				<image :src="item.shop.cover" mode="aspectFill" />
                				<view class="company-name nowrap">{{item.shop.name}}</view>
                			</view>
                			<view class="no nowrap" v-if="listType == 'deliver'">退货单号： {{item.shipment_no}}</view>
                            <view class="no nowrap" v-else>退货单号： {{item.refund_no}}</view>
                		</view>
                        <view class="status" style="color:#ff5500;" v-if="listType == 'deliver'">{{item.state_text}}</view>
                		<view class="status" style="color:#ff5500;" v-else>{{item.state.text}}</view>
                	</view>
                	<view class="goods-info" @click="goDetail(item.goods_sku.goods_id)" v-if="item.goods_sku">
                		<image class="goods-img" :src="item.goods_sku.cover" mode="aspectFill" />
                		<view class="goods">
                			<view class="name nowrap">{{item.goods_sku.goods_name}}</view>
                			<view class="sku">数权个数 <span>x {{item.qty}}</span> </view>
                		</view>
                	</view>
                </view>
                <view class="actions">
                    <view v-if="item.can">
                        <view v-if="item.can.audit" @click="$Router.push({name: 'Examine', params: {id: item.refund_id}})" class="nowPay actions-color">订单审核</view>
                        <view v-if="item.can.sign" @click="goSign(item.refund_id, index)" class="nowPay actions-color">订单签收</view>
                        <view v-if="item.can.reToken" @click="goReToken(item.refund_id, index)" class="nowPay actions-color">确认退货</view>
                        <view v-if="item.can.logistic" @click="$Router.push({name: 'Logistic', params: {id: item.shipment_no}})" class="nowPay actions-color">查看物流</view>
                        <view v-if="item.can.deliver" @click="$Router.push({name: 'DeliverForm', params: {id: item.shipment_no}})" class="nowPay actions-color">我要发货</view>
                    </view>
                    <view v-if="listType == 'deliver'" class="nowPay" @click="$Router.push({name: 'storeOrderDetails', params: {id: item.shipment_no, type: listType}})">查看详情</view>
                    <view v-else class="nowPay" @click="$Router.push({name: 'storeOrderDetails', params: {id: item.refund_id, type: 'return'}})">查看详情</view>
                </view>
            </view>
        </block>
        <view v-else class="pack-center">
            <image src="/static/icons/order-null.png"></image>
            <view>{{toast}}</view>
        </view>
    </view>
</template>

<script>
    export default {
    	name:"goodsList",
    	props:{
    		// 数据列表
    		list: {
    			type	: Array,
    			default	: () => {
    				return new Array
    			}
    		},
            listType: '',
            // 列表空提示
            toast	: {
            	type	: String,
            	default	: '暂无订单数据 -_-!'
            }
    	},
        created() {}
    }
</script>

<style lang="scss" scoped>
    // 列表
    .returnList {
        background-color: #FFFFFF;
        padding: $padding;
        box-sizing: border-box;
        margin-top: $margin;
    }
    
    .MallRefundsTemplate{
    	position: relative;
    	z-index: 0;
    }
    // 顶部信息
    .top {
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: space-between;
    	box-sizing: border-box;
    	padding-bottom: 20rpx;
    	border-bottom: solid 1rpx #f7f7f7;
    	position: relative;
    	z-index: 0;
    	.company-logo {
    		display: flex;
            width: 90%;
    		image {
    			width: 40rpx;
    			height: 40rpx;
    			border-radius: 50%;
    			margin-right: 20rpx;
    		}
    		.company-name {
    			font-size: 30rpx;
    			color: #484848;
    			font-weight: bold;
                width: calc(100% - 40rpx);
                padding: 0 20rpx;
                box-sizing: border-box;
    		}
    	}
    	.no {
    		margin-top: 10rpx;
    		font-size: $title-size*0.8;
    		color: #999;
    	}
    	.status {
    		color: #999;
    		font-size: $title-size*.9;
    		position: absolute;
    		top: 0;
    		right: 0;
    	}
    }
    
    // 商品信息
    .goods-info {
    	display: flex;
    	flex-direction: row;
    	align-items: flex-start;
    	justify-content: flex-start;
    	box-sizing: border-box;
    	margin-top: 36rpx;
    
    	.goods-img {
    		width: 120rpx;
    		height: 120rpx;
    		border-radius: 10rpx;
    	}
    	.goods {
    		flex: 1;
            width: calc(100% - 120rpx);
            padding: 0 20rpx;
            box-sizing: border-box;
    		margin-bottom: 10rpx;
    		.name {
    			width: 100%;
    			font-size: 30rpx;
    			span {
    				font-size: 32rpx;
    				font-weight: normal;
    			}
    		}
    
    		.sku {
    			flex: 1;
    			display: flex;
    			flex-direction: row;
    			align-items: center;
    			justify-content: space-between;
    			box-sizing: border-box;
    			margin-top: 10rpx;
    			font-size: 28rpx;
    			color: #999;
    		}
    	}
    }
    
    .flexrow {
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: space-between;
    	box-sizing: border-box;
    	width: 100%;
    
    	.copy {
    		color: $main-color;
    		font-size: $title-size*0.8;
    		font-weight: 400;
    		padding: 0 30rpx;
    	}
    }
    
    // 操作按钮
    .actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        box-sizing: border-box;
        flex-wrap: wrap;
        flex: 1;
        font-size: 28rpx;
        color: #fff;
        border-top: solid 1rpx #EFF4F2;
        margin-top: $margin;
        .nowPay {
            padding: 4rpx 20rpx;
            border-radius: 40rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;
            color: #999;
            border:solid 1rpx #cacaca;
            &.actions-color {
                color: #e1293f;
                border-color: #ec96a0;
            }
        }
        .cancelOrder {
            padding: 10rpx 30rpx;
            border-radius: 40rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;
            background-color: #DD524D;
        }
        .logistics {
            background-color: $main-color;
            padding: 10rpx 30rpx;
            border-radius: 40rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;
        }
        .sign {
            background-color: #DD524D;
            padding: 10rpx 30rpx;
            border-radius: 40rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;
        }
        .evaluate {
            background-color: $main-color;
            padding: 10rpx 30rpx;
            border-radius: 40rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;
        }
    }
    
    // 暂无订单
    .pack-center {
        text-align: center;
        font-size: $title-size-sm;
        color: $text-gray;
        padding-top: 50%;
        image {
            width: $uni-img-size-lg * 2;
            height:$uni-img-size-lg * 2;
            border-radius: $uni-border-radius-circle;
            margin-bottom: $margin;
        }
    }
</style>
