<!--
 * @Author: Fly
 * @Date: 2025-12-29 10:25:09
 * @LastEditTime: 2025-12-29 15:31:25
 * @Description: 平台订单列表
-->
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize"
            label-width="auto">
            <el-form-item label="订单号" prop="orderNo">
                <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" maxlength="30" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="收货人" prop="receiverName">
                <el-input v-model="queryParams.receiverName" placeholder="请输入收货人姓名" maxlength="30" clearable
                    @keyup.enter.native="handleQuery"></el-input>
            </el-form-item>
            <el-form-item label="收货人手机号" prop="receiverPhone">
                <el-input v-model="queryParams.receiverPhone" placeholder="请输入收货人手机号" maxlength="11" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="物流方式" prop="shippingMethod">
                <el-select v-model="queryParams.shippingMethod" clearable placeholder="请选择订单状态">
                    <el-option label="普通快递" :value="0"></el-option>
                    <el-option label="自提点自提" :value="10"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商家标识" prop="sellerMark">
                <el-select v-model="queryParams.sellerMark" clearable placeholder="请选择商家标识">
                    <el-option label="普通" :value="0"></el-option>
                    <el-option label="提醒" :value="10"></el-option>
                    <el-option label="特别" :value="20"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="下单时间" prop="createTime">
                <el-date-picker v-model="queryParams.createTime" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-radio-group :size="ELsize" v-model="queryParams.transactionStatus" style="margin-bottom: 30px;"
                    @input="handleQuery">
                    <el-radio-button v-for="(v, i) in queryStatusList" :key="i" :label="v.value">{{ v.label
                        }}</el-radio-button>
                </el-radio-group>
            </el-col>
        </el-row>
        <div class="table-data" v-loading="loading">
            <template v-if="dataList && dataList.length > 0">
                <div v-for="(item, index) in dataList" :key="index">
                    <div class="title-div">
                        <div class="flexcenter">
                            <el-tooltip v-if="item.sellerRemark" class="item" effect="light"
                                :content="item.sellerRemark" placement="top-start">
                                <i class="el-icon-s-flag"
                                    :class="{ warning: item.sellerMark == 10, danger: item.sellerMark == 20 }"></i>
                            </el-tooltip>
                            <span>订单号： {{ item.orderNo }}</span>
                            <!-- <span class="ml10">支付订单号：{{ item.pay_order_code }}</span> -->
                            <div class="ml10 text-1">店铺名称：{{ item.businessName }}</div>
                            <div class="ml10 text-1">物流方式：
                                <span v-if="item.shippingMethod == 0">普通快递</span>
                                <span v-if="item.shippingMethod == 10">自提点自提</span>
                            </div>

                            <label class="ml10 wechatpay" v-if="item.exchange"> 积分兑换</label>
                            <label class="ml10" v-if="item.exchange && item.actualPayment > 0">+</label>

                            <template v-if="item.actualPayment > 0">
                                <label class="ml10" :class="item.paymentMethod == 1
                                    ? 'wechatpay'
                                    : item.paymentMethod == 2
                                        ? 'alipay'
                                        : 'platformpay'
                                    ">
                                    <span v-if="item.paymentMethod == 0">余额支付</span>
                                    <span v-if="item.paymentMethod == 1">微信支付</span>
                                    <span v-if="item.paymentMethod == 2">支付宝支付</span>
                                    <span v-if="item.paymentMethod == 3">积分支付</span>
                                </label>
                            </template>
                        </div>
                        <div>
                            <el-button class="c-info" type="text" size="small" @click="viewHandle(item)">查看</el-button>

                        </div>
                    </div>
                    <div class="table-content" v-for="(v, i) in item.orderDetails" :key="i">
                        <div class="goods-info">
                            <div class="good-img-div">
                                <el-image class="table-img" :src="v.productCover" :preview-src-list="[v.productCover]">
                                </el-image>
                            </div>
                            <div class="info">
                                <div class="goods-title">{{ v.productTitle }}</div>
                                <div class="price" v-if="item.exchange">{{ v.singlePoint }}积分</div>
                                <div class="price" v-if="!item.exchange">￥{{ v.singlePaymentAmount }} <span
                                        v-if="v.singlePaymentAmount != v.realPrice">￥{{ v.realPrice }} </span></div>
                                <div class="remark">{{ v.skuSetName }}</div>
                            </div>
                        </div>
                        <div class="tc">
                            <div v-if="item.exchange">{{ v.totalPoint }}积分</div>
                            <div v-else>{{ v.paymentAmount }}</div>
                            <div>({{ v.productNum }})</div>
                        </div>
                        <div class="tc" v-if="item.orderAddress">
                            <div>{{ item.orderAddress.receiverName }}</div>
                            <div> {{ item.orderAddress.receiverPhone }}</div>
                        </div>
                        <div class="tc" v-if="item.orderSelfPickup">
                            <div>{{ item.orderSelfPickup.receiverName }}</div>
                            <div> {{ item.orderSelfPickup.receiverPhone }}</div>
                        </div>
                        <div class="tc">
                            <el-tag type="primary" v-if="v.transactionStatus == 0 && v.rightsMethod == 0">待支付</el-tag>
                            <el-tag type="warning" v-if="v.transactionStatus == 10 && v.rightsMethod == 0">
                                {{ shippingStatusHandle(item, v) }}
                            </el-tag>
                            <el-tag type="danger" v-if="v.transactionStatus == 20 && v.rightsMethod == 0">
                                {{ receivingStatusHandle(item, v) }}
                            </el-tag>
                            <el-tag type="success" v-if="v.transactionStatus == 30 && v.rightsMethod == 0">交易完成</el-tag>
                            <el-tag type="info" v-if="v.transactionStatus == 100 && v.rightsMethod == 0">订单取消</el-tag>
                            <el-tag type="info" v-if="v.rightsMethod > 0">{{ rightsStatusHandle(item, v) }}</el-tag>
                        </div>
                        <div class="tc">
                            {{ item.createTime }}
                        </div>
                    </div>
                    <div class="table-foot">
                        <label class="freight" v-if="item.totalReduced">总优惠<label>￥{{ item.totalReduced
                                }}</label></label>
                        <label class="freight" v-if="item.totalProductCouponSharing">优惠券优惠<label>￥{{
                            item.totalProductCouponSharing
                                }}</label></label>
                        <label class="ml10 freight">{{
                            item.shippingFee ? '运费：￥' + item.shippingFee : '免运费'
                            }}</label>
                        <label class="ml10">实付金额：<label class="price">￥ {{ item.actualPayment || 0 }}</label></label>
                        <label class="ml10">实付积分：<label> {{ item.paymentPoints || 0 }}</label></label>
                    </div>
                </div>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </template>

            <template v-else>
                <el-empty :image-size="100"></el-empty>
            </template>
        </div>


        <!-- 详情 -->
        <el-dialog :title="`订单[${info.orderNo}]的详情`" top="5vh" :visible.sync="dialogVisible" width="60%">
            <div v-loading="orderDetailLoading">
                <orderDetail ref="orderDetail"></orderDetail>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getPlatformShopOrderPageApi, shopOrderInfo } from "@/api/order";
import getListApi from "@/mixins/getListApi";
import OrderStatus from "./orderList/js/OrderStatus.js"
import orderDetail from './orderList/orderDetail.vue'
export default {
    name: '',
    mixins: [getListApi, OrderStatus],
    components: {
        orderDetail
    },
    data() {
        return {
            listURL: getPlatformShopOrderPageApi,
            info: {},
            dialogVisible: false,
            orderDetailLoading: false,

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderNo: undefined,
                receiverName: undefined,
                receiverPhone: undefined,
                shippingMethod: undefined,
                transactionStatus: undefined,
                createTime: undefined
            },

            // 日期范围字段映射配置
            dateRangeMapping: {
                // 日期范围字段名: { start: 开始时间字段名, end: 结束时间字段名 }
                createTime: { start: 'startTime', end: 'endTime' }
            },
        };
    },
    methods: {
        // 查看详情
        async viewHandle(item) {
            this.info = item
            this.dialogVisible = true;
            this.orderDetailLoading = true;
            try {
                await this.$nextTick()
                const { data } = await shopOrderInfo(item.orderId);
                console.log(data)
                if (data) {
                    this.$refs.orderDetail.init(data)
                } else {
                    throw new Error('订单详情获取失败')
                };
            } catch (error) {
                this.$refs.orderDetail.init({});
            } finally {
                this.orderDetailLoading = false
            };
        },
    },
};
</script>

<style lang='scss' scoped>
.mt30 {
    margin-top: 30px;
}

.flexcenter {
    display: flex;
    align-items: center;
}

.thirdColor {
    color: #fff;
}

.text-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
}

.good-img-div {
    img {
        width: 85px;
        height: 85px;
        display: flex;
    }
}

.flex_bet {
    display: flex;
    justify-content: space-between;
}

.title-div {
    padding: 0 30px;
    height: 40px;
    background-color: #e5e5e5;
    color: #333333;
    line-height: 40px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.tc {
    text-align: center;
}

.table-data {
    .alipay {
        color: #009fe8;
    }

    .wechatpay {
        color: #1aad19;
    }

    .platformpay {
        color: #17b3a3;
    }

    >div {
        border: 1px solid #f0f0f0;
    }

    .table-content {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;

        >div {
            min-width: 20%;
        }

        .goods-info {
            display: flex;
            align-items: center;
            width: 20%;

            .info {
                text-align: left;
                margin-left: 10px;
                width: 60%;
            }

            .goods-title {
                font-size: 14px;
                line-height: 17px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            .remark {
                font-size: 12px;
                color: #b1b1b1;
            }

            .price {
                font-size: 14px;
                color: #f3415f;
                margin-bottom: 10px;
                display: flex;
                align-items: center;

                i {
                    cursor: pointer;
                }

                span {
                    color: #b1b1b1;
                    text-decoration: line-through;
                }
            }

            .price>input {
                border: none;
                color: #f3415f;
                width: auto;
                width: 50%;
                padding: 5px;
                margin: 0 2px;
                box-sizing: border-box;
                // transition: all .3s;
            }

            input:focus {
                outline: unset;
            }
        }
    }

    .table-foot {
        height: 40px;
        text-align: right;
        color: #333333;
        line-height: 40px;
        font-size: 14px;
        padding: 0 15px;

        .price {
            color: #f3415f;
        }

        .freight {
            color: #b1b1b1;
            margin-right: 10px;
        }
    }
}

.ml10 {
    margin-left: 10px;
}

.can-input {
    border: 1px solid #dfdfdf !important;
    border-radius: 2px;
}

.table-img {
    width: 100px;
    height: 100px;
}

.warning {
    color: #e6a23c;
}

.danger {
    color: #f56c6c;
}

.el-icon-s-flag {
    font-size: 20px;
}
</style>