<template>
    <view class="content">
        <view class="orderData">
            <view class="While">
                <view class="orderData-cont-label">
                    <image class="orderData-cont-img" src="/static/icons/orderIcon_01.png" mode="aspectFill"></image>
                    <view class="orderData-cont-text">
                        <view class="orderData-cont-name">订单编号</view>
                        <view class="orderData-cont-copy">
                            <text class="nowrap">{{ goodsData.order_no }}</text>
                            <view @tap="copyUrl(goodsData.order_no)">复制</view>
                        </view>
                    </view>
                </view>
                <view class="orderData-cont-label">
                    <image class="orderData-cont-img" src="/static/icons/orderIcon_00.png" mode="aspectFill"></image>
                    <view class="orderData-cont-text" v-if="goodsData.express">
                        <view class="orderData-cont-name">{{ goodsData.express.name }} <text>{{ goodsData.express.mobile }}</text></view>
                        <view class="orderData-cont-copy">
                            {{ goodsData.express.full_address }}
                        </view>
                    </view>
                </view>
            </view>
            
            <view class="While orderGoods">
                <view class="orderGoods-wares" v-for="(item, index) in goodsData.items" :key="index">
                    <image class="orderGoods-img" :src="item.sku.cover" mode="aspectFill"></image>
                    <view class="orderGoods-cont">
                        <view class="nowrap orderGoods-name">{{ item.sku.goods_name }}</view>
                        <view class="orderGoods-price">
                            <text>￥{{ item.sku.price }}</text>
                            x{{ item.qty }}
                        </view>
                    </view>
                </view>
                <view class="orderGoods-brief">
                    <view>商品总价</view>
                    <text>￥{{ goodsData.amount }}</text>
                </view>
            </view>
            
            <view class="While reserveCont">
                <view class="reserveCont-title">订单信息</view>
                <view class="reserve-label">
                    <view class="reserve-name">交易时间</view>
                    <view class="reserve-text">{{ goodsData.created_at }}</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">运费</view>
                    <view class="reserve-text">{{ goodsData.freight == 0 ? '免邮' : goodsData.freight }}</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">交易状态</view>
                    <view class="reserve-text green">{{ goodsData.state }}</view>
                </view>
                <view class="reserve-label">
                    <view class="reserve-name">实际金额</view>
                    <view class="reserve-text reserve-price">￥{{ goodsData.total }}.00</view>
                </view>
            </view>
        </view>
        <view class="order-data-footer">
            <view class="order-btn" open-type="navigateBack" @click="$Router.push({name: 'OrderIndex', params: { listType: $Route.query.listType}})">返回订单</view>
        </view>
    </view>
</template>

<script>
    import { goodsDet } from '@/apis/interfaces/user'
    import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy.js'
	export default {
		data() {
			return {
				goodsData: '', //详情
			}
		},
		onLoad() {
            // 商品详情
            this.goodsInfo();
		},
		methods: {
            // 获取商品详情
            goodsInfo() {
                goodsDet(this.$Route.query.orderNo).then(res => {
                    this.goodsData = res
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            },
            
            // 复制订单号
            copyUrl(val) {
                const result = h5Copy(val)
                    if (result === false) {
                        uni.showToast({
                            title:'不支持',
                        })
                    } else {
                    uni.showToast({
                       title:'复制成功',
                       icon:'none'
                    })
                }
            }
		}
	}
</script>

<style lang="scss" scoped>
    page {
        background-color: #f3f4f6;
    }
    
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
        padding: 30rpx;
        box-sizing: border-box;
    }
    
    .While {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
    }
    
    .orderData {
        border-bottom: 100rpx transparent solid;
    }
        
    // 订单
    .orderData-cont-label {
        padding: 40rpx 30rpx;
        box-sizing: border-box;
        position: relative;
        border-bottom: #f2f2f2 2rpx solid;
        .orderData-cont-img {
            width: 48rpx;
            height: 48rpx;
            vertical-align: middle;
        }
        .orderData-cont-text {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: 25rpx 30rpx 0 120rpx;
            box-sizing: border-box;
            .orderData-cont-name {
                margin-bottom: 10rpx;
                text {
                    color: #999;
                    padding-left: 20rpx;
                }
            }
            .orderData-cont-copy {
                display: flex;
                font-size: 28rpx;
                color: #999;
                text {
                    flex: 1;
                    display: inline-block;
                    margin-right: 20rpx;
                }
                view {
                    color: #edb25f;
                }
            }
        }
    }
    
    // 产品
    .orderGoods {
        padding: 30rpx;
        box-sizing: border-box;
        .orderGoods-wares {
            position: relative;
            margin-bottom: 10rpx;
            .orderGoods-img {
                width: 100rpx;
                height: 100rpx;
                border: 2rpx solid #dddddd;
                border-radius: 10rpx;
            }
            .orderGoods-cont {
                position: absolute;
                width: calc(100% - 130rpx);
                left: 130rpx;
                top: 0;
                .orderGoods-text {
                    margin: 20rpx 0 30rpx;
                    color: #666666;
                    font-size: 26rpx;
                }
                .orderGoods-price {
                    display: flex;
                    color: #555555;
                    margin-top: 15rpx;
                    text {
                        flex: 1;
                        color: #000;
                    }
                }
            }
        }
        .orderGoods-brief {
            display: flex;
            padding-top: 30rpx;
            view {
                flex: 1;
                color: #333333;
            }
            text {
                font-weight: 600;
            }
        }
    }
    
    // 规格
    .reserveCont {
        .reserveCont-title {
            font-weight: 600;
            padding: 30rpx;
        }
        .reserve-label {
            display: flex;
            padding: 0 30rpx 30rpx;
            box-sizing: border-box;
            .reserve-name {
                flex: 1;
                width: 200rpx;
                margin-right: 20rpx;
                color: #7e7e7e;
            }
            .reserve-text {
                width: calc(100% - 240rpx);
                text-align: right;
                line-height: 50rpx;
                &.reserve-price {
                    font-weight: 600;
                    color: #6d79ec;
                }
            }
        }
    }
    
    // 底部菜单
    .order-data-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: solid 1rpx #f2f2f2;
        padding-top: 17rpx;
        padding-right: 30rpx;
        padding-left: 30rpx;
        height: 83rpx;
        background: white;
        display: flex;
        flex-wrap: wrap;
        flex-direction:row-reverse;
        .order-btn{
            margin-left: 20rpx;
            height: 58rpx;
            line-height: 58rpx;
            box-sizing: border-box;
            border:solid 1rpx #747788;
            padding: 0 20rpx;
            font-size: 26rpx;
            border-radius: 10rpx;
            margin-top: 5rpx;
        }
    }
</style>
