<!-- 订单卡片 -->
<template>
    <view class="jy-order-card">
        <!-- 商家上货看的 -->
        <template v-if="type == 'merchandise_control'">
            <!-- 商品信息 -->
            <JyCommodityInformation class="mb40" :showType="5"></JyCommodityInformation>
        </template>
        <!-- 用户订单 -->
        <template v-if="type == 'user_order'">
            <!-- 卖家头像 -->
            <JyShopInformation :showStatus="true"></JyShopInformation>
            <!-- 商品信息 -->
            <JyCommodityInformation :showType="1"></JyCommodityInformation>
            <!-- 支付价格 -->
            <uni-section>
                <template v-slot:right>
                    <view class="df aic">
                        <text class="c333 f28">应付：</text>
                        <text class="price f20">￥</text>
                        <text class="price f32">5.00</text>
                    </view>
                </template>
            </uni-section>
            <!-- 特俗情况状态 -->
            <uni-section v-if="orderInfo.order_status_text == 1">
                <template v-slot:right>
                    <view class="df aic">
                        <text> 支付剩余时间：</text>
                        <uni-countdown :show-day="false" :showHour="false" :minute="12" :second="12" />
                    </view>
                </template>
            </uni-section>
        </template>
        <!-- 商家订单 -->
        <template v-if="type == 'business_order'">
            <!-- 买家头像 -->
            <JyShopInformation :showStatus="true"></JyShopInformation>
            <!-- 商品信息 -->
            <JyCommodityInformation :showType="1"></JyCommodityInformation>
            <!-- 收款价格 -->
            <uni-section>
                <template v-slot:right>
                    <view class="df aic">
                        <text class="c333 f28">实收：</text>
                        <text class="price f20">￥</text>
                        <text class="price f32">5.00</text>
                    </view>
                </template>
            </uni-section>
            <!-- 特俗情况状态 -->
            <!-- 已发货 -->
            <template v-if="orderInfo.order_status_text == 4">
                <JyCommodityAddress :shopEdit="false"></JyCommodityAddress>
                <JyCommodityLogisticsCard></JyCommodityLogisticsCard>
            </template>
            <!-- 售后退款 -->
            <template v-if="orderInfo.order_status_text == 5">
                <view class="df mb40">
                    <view class="c333 f28 fw600 wsn">收货地址：</view>
                    <view class="df fdc">
                        <!-- 收获地址 -->
                        <view class="c333 f28">收货地址收货地址收货地址收货地址收货地址收货地址收货地址</view>
                        <!-- 姓名电话 -->
                        <view class="f24 c666">张三 123456789</view>
                    </view>
                </view>
                <view class="df mb40">
                    <view class="c333 f28 fw600 wsn">收货地址：</view>
                    <view class="c333 f28">
                        什么什么原因什么什么原因什么什么原因什么什么原因
                    </view>
                </view>
            </template>

        </template>
        <!-- 各个情况状态按钮 -->
        <view class="btn-group" v-if="btnG['merchandise_control'].length > 0">
            <view class="btn-for" v-for="(item, index) in btnG[type]" :key="index"
                @click="btnFn[type][item.value](item)">
                <!-- 数组中是否存在某个直 存在true不在false -->
                <view class="btn-item" :class="[item.type, {
                    'btn-item4': item.name.length == 4,
                    'btn-item3': item.name.length == 3,
                    'btn-item2': item.name.length == 2
                }]" v-if="item.status.includes(orderInfo.order_status_text)">
                    <text>{{ item.name }}</text>
                </view>
            </view>
        </view>
        <delivery ref="deliveryRef" @savePost="savePost"></delivery>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue'
// 商品信息
import JyCommodityInformation from '@/components/public/jy-commodity-information'
// 店铺信息
import JyShopInformation from '@/components/public/jy-shop-information'
// 商品物流卡片
import JyCommodityLogisticsCard from '@/components/public/jy-commodity-logistics-card'
// 收货地址
import JyCommodityAddress from '@/components/public/jy-commodity-address'

import delivery from './delivery.vue'
import {
    btnG
} from './btnGroup.js'
const deliveryRef = ref(null)
const popupState = ref(null)
const savePost = () => {
    console.log('保存');
}
const props = defineProps({
    // 订单信息
    orderInfo: {
        type: Object,
        default: () => {
            return {
                shop_logo: '',
                shop_name: '123',
                order_status_text: 3,
            }
        },
    },
    // type 类型只能是 user_order | business_order | merchandise_control
    type: {
        type: String,
        required: true,
    }

})
// const type = 'business_order'
// 初始化 按钮 数据
const btnGroup = ref(btnG[props.type])
// 同意管理按钮方法
const btnFn = {
    merchandise_control: {

    },
    business_order: {
        // 发货模块
        delivery: () => {
            deliveryRef.value.open();
        }
    },
    user_order: {
        cancel_order: () => {
            // 显示模态弹窗
            uni.showModal({
                title: '提示',
                content: '确定要取消订单吗？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        // 在这里执行取消订单的操作
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        continue_paying: () => {
            uni.showModal({
                title: '提示',
                content: '确定要继续支付吗？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        // 在这里执行继续支付的操作
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        refund: () => {
            // 跳转退款页面
            uni.navigateTo({
                url: '/pages/shop/order/refund/index'
            });
        },
        // 钱还去向
        money_whereabouts: () => {
            uni.navigateTo({
                url: '/pages/shop/order/money_whereabouts/index'
            });
        }
    }
}
</script>
<style scoped lang="scss">
.jy-order-card {
    background-color: #ffffff;
    padding: 16rpx 24rpx;
    border-radius: 25rpx;
    margin-bottom: 40rpx;

    .price {
        font-size: 36rpx;
        color: #FF7F37;
    }

    .btn-group {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;

        .btn-item {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            margin-left: 20rpx;
            border-radius: 1282rpx;
        }

        .btn-item4 {
            padding: 12rpx 24rpx;
        }

        .btn-item3 {
            padding: 12rpx 36rpx;
        }

        .btn-item2 {
            padding: 12rpx 48rpx;
        }

        .black {
            color: #333333;
            border: 2rpx solid #999999;
        }

        .orange {
            color: #F59957;
            border: 2rpx solid #F59957;
        }
    }
}
</style>