<template>
    <div class="orderlist" v-if="orderList.length">
        <div class="o_item" v-for="(i,s) in orderList" :key="s" @click="entrance(i)">
            <div class="p1 flex_r flex_jb">
                <span class="name_tit ellipsis">{{ i.restaurant_name }}</span>
                <span class="status">{{ typeto(i.status) }}</span>
            </div>
            <div class="p2 flex_r flex_jb" v-if="i.type == 0">
                <div class="goods ellipsis">
                    <div class="imgs" v-for="(a,b) in i.orderGoods" :key="b">
                        <img :src="a.product_img" alt="" class="g_img">
                        <div class="na ellipsis">{{ a.product_name }}</div>
                    </div>
                </div>
                <div class="g_amount"><span class="amount dinB">{{ i.pay_amount }}</span></div>
            </div>
            <div class="p2 flex_r flex_jb" v-else-if="i.type == 1">
                <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
                    <div class="info flex_c flex_jb">
                        <p class="pt">{{ a.product_name }}</p>
                        <p class="p">{{ a.number }}张</p>
                        <p class="p">实付 ￥{{ i.pay_amount }}</p>
                        <p class="p">{{ neaten1(i.product_detail,i.type) }}</p>
                    </div>
                    <image class="poster" mode="aspectFill" :src="a.product_img" />
                </div>
            </div>
            <div class="p2 flex_r flex_jb" v-else-if="[2,3].includes(i.type)">
                <div class="goods good2 ellipsis">
                    <div class="p" v-for="(a,b) in i.orderGoods" :key="b">{{ a.product_name }}</div>
                </div>
                <div class="g_amount"><span class="amount dinB">{{ i.pay_amount }}</span></div>
            </div>
            <div class="p2 flex_r flex_jb" v-else-if="i.type == 4">
                <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
                    <div class="info flex_c flex_jb">
                        <p class="pt">{{ a.product_name }}</p>
                        <p class="p">{{ a.number }}间</p>
                        <p class="p">实付 ￥{{ i.pay_amount }}</p>
                        <p class="p" v-if="a.attachment">{{ neaten2(a.attachment,i.type) }}</p>
                    </div>
                    <image class="poster" mode="aspectFill" :src="a.product_img" />
                </div>
            </div>
            <div class="p2 flex_r flex_jb" v-else-if="i.type == 5">
                <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
                    <image class="poster" mode="aspectFill" :src="a.product_img" />
                    <div class="info flex_c flex_jb">
                        <p class="pt">{{ a.product_name }}</p>
                        <p class="p">{{ a.number }}张</p>
                        <p class="p">实付 ￥{{ i.pay_amount }}</p>
                    </div>
                </div>
            </div>
            <div class="p3">下单时间：{{ i.create_time }}</div>
        </div>
    </div>
    <div class="zanwu" v-else>
        <img src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/5a3c6b1e2d098aa6695394c927c38586545188b8png" alt="" class="zanwuimg">
        <view class="zanwutxt">暂无订单信息</view>
    </div>
</template>
<script>
import { post } from "@/request/api.js";
export default {
    name: "orderlist",
    props: {},
    components: {},
    data() {
        return {
            orderList: [],
        };
    },
    methods: {
        getorderList() {
            post("local/orderList").then(res => {
                if (res.code == 0) {
                    this.orderList = res.data
                }
            })
        },
        typeto(va) {
            switch (va) {
                case 0: return "待支付";
                case 1: return "已下单";
                case 2: return "已完成";
                case 3: return "下单失败";
                case 4: return "失败";
                default: return ""
            }
        },
        entrance(i) {
            if (i.type == 0) this.goto('/pagesB/orderingfood/detail', { trade_no: i.trade_no, brand_id: i.brand_id })
            else if (i.type == 1) this.goto('/pagesB/cinema/cinemaTicket', { tradeNo: i.trade_no })
            else if ([2,3].includes(i.type)) this.goto('/pagesB/directCharge/orderDetail', { trade_no: i.trade_no })
            else if (i.type == 4) this.goto('/pagesB/hotel/orderDetail', { trade_no: i.trade_no })
            else if (i.type == 5) this.goto('/pagesB/scenicSpotTicket/orderDetail', { trade_no: i.trade_no })
        },
        neaten1(va,type){
            if(va && type == 1){
                let arr = JSON.parse(va)
                return arr.map(item => item.seatName).join("，")
            }
        },
        neaten2(va,type){
            if(type == 4){
                let da = JSON.parse(va)
                return `${da.windowType}，${da.breakfast}，${da.bedType}，${da.useableArea}`
            }
        }
    },
    onLoad(da) {
        this.getorderList()
    },
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.orderlist {
    padding: 28rpx 32rpx;
}

.o_item {
    background-color: #fff;
    padding: 25rpx 30rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;

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

    .p1 {
        .name_tit {
            font-size: 36rpx;
            margin-bottom: 16rpx;
            width: calc(100% - 110rpx);
        }

        .status {
            font-size: 26rpx;
            color: #666;
            width: 110rpx;
            text-align: right;
        }
    }

    .p2 {
        background-color: rgba($color: #000, $alpha: 0.06);
        border-radius: 10rpx;
        padding: 20rpx;
        margin-bottom: 16rpx;
    }

    .goods {
        width: calc(100% - 160rpx);

        .imgs {
            width: 150rpx;
            margin-right: 16rpx;
            display: inline-block;

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

            .g_img {
                width: 150rpx;
                height: 100rpx;
                border-radius: 8rpx;
                object-fit: cover;
            }

            .g_img1 {
                height: 220rpx;
            }

            .na {
                font-size: 24rpx;
                text-align: center;
            }
        }
    }

    .good2{
        .p{
            font-size: 28rpx;
        }
    }

    .Movie {
        // padding: 25rpx 28rpx;
        width: 100%;
        .info,.poster{
            vertical-align: text-top;
        }
        .info{
            width: calc(100% - 180rpx);
            min-height: 220rpx;
            p{
                font-size: 26rpx;
                color: #666;
                margin-bottom: 8rpx;
            }
            .pt{
                font-weight: bold;
                color: #000;
                font-size: 30rpx;
                margin-bottom: 8rpx;
            }
            .p{
                color: #000;
            }
        }
        .poster{
            width: 150rpx;
            height: 220rpx;
            border-radius: 12rpx;
        }
    }

    .g_amount {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .amount {
        font-size: 32rpx;
        width: 160rpx;
        text-align: right;

        &::before {
            content: "￥";
            font-size: 24rpx;
        }
    }

    .p3 {
        font-size: 24rpx;
        color: #999;
    }
}
</style>