<!--
 * @Author: Fly
 * @Date: 2025-12-29 10:25:09
 * @LastEditTime: 2025-12-29 11:05:47
 * @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="rightsCode">
                <el-input v-model="queryParams.rightsCode" placeholder="请输入维权单号" clearable></el-input>
            </el-form-item>
            <el-form-item label="订单编号" prop="orderNo">
                <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable></el-input>
            </el-form-item>
            <el-form-item label="售后类型" prop="rightsType">
                <el-select v-model="queryParams.rightsType" clearable placeholder="请选择售后类型">
                    <el-option v-for="item in rightsTypeOptions" :label="item.label" :value="item.value"
                        :key="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户手机号" prop="receiverMobile">
                <el-input v-model="queryParams.receiverMobile" placeholder="请输入客户手机号" clearable></el-input>
            </el-form-item>
            <el-form-item label="售后操作" prop="rightsOperateStatus">
                <el-select v-model="queryParams.rightsOperateStatus" clearable placeholder="请选择售后操作">
                    <el-option v-for="item in rightsOperateStatusOptions" :label="item.label" :value="item.value"
                        :key="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="售后状态" prop="rightsRefundStatus">
                <el-select v-model="queryParams.rightsRefundStatus" clearable placeholder="请选择售后状态">
                    <el-option v-for="item in rightsRefundStatusOptions" :label="item.label" :value="item.value"
                        :key="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单时间" prop="createTime">
                <el-date-picker value-format="yyyy-MM-dd" v-model="queryParams.createTime" 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-button type="primary" plain @click="handleExport">导出订单</el-button>
            </el-form-item>
        </el-form>
        <el-table  v-loading="loading" :data="dataList" :border="TableBorder" :size="ELTableSize">
            <el-table-column width="55" label="序号" align="center">
                <template slot-scope="{$index}">
                    {{ $getTableIndex(queryParams, $index + 1) }}
                </template>
            </el-table-column>
            <el-table-column prop="rightsCode" align="center" label="维权单号" width="150">
                <template slot-scope="{ row }">
                    {{ row.rightsCode | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column prop="orderNo" align="center" label="订单编号" width="130">
                <template slot-scope="{ row }">
                    {{ row.orderNo | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column prop="businessName" align="center" label="所属店铺" min-width="140">
                <template slot-scope="{ row }">
                    {{ row.businessName | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column prop="rightsType" align="center" label="售后类型" width="100">
                <template slot-scope="{ row }">
                    <el-tag effect="plain" type="warning" v-if="row.rightsType == 5">仅退款</el-tag>
                    <el-tag effect="plain" type="success" v-if="row.rightsType == 10">退货退款</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="practicalSales" align="center" label="客户信息">
                <template slot-scope="scope">
                    <div>
                        <div>{{ scope.row.receiver }}</div>
                        <div>{{ scope.row.receiverMobile }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="refundMoney" align="center" label="退款金额">
                <template slot-scope="{ row }">
                    {{ row.refundMoney | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column prop="refundPoint" align="center" label="退款积分">
                <template slot-scope="{ row }">
                    {{ row.refundPoint | TableItemEmpty }}
                </template>
            </el-table-column>

            <el-table-column prop="price" label="证明图片" align="center" width="100">
                <template slot-scope="{row}">
                    <template v-if="row.voucherImages && row.voucherImages.length">
                        <el-image :src="row.voucherImages[0]" style="width: 80px; height: 80px"
                            :preview-src-list="row.voucherImages">
                        </el-image>
                    </template>
                    <template v-else>--</template>
                </template>
            </el-table-column>
            <el-table-column align="center" label="售后操作" width="152">
                <template slot-scope="{row}">
                    <el-tag v-if="row.rightsOperateStatus == 0">申请</el-tag>
                    <el-tag type="success" v-if="row.rightsOperateStatus == 1">同意</el-tag>
                    <el-tag type="warning" v-if="row.rightsOperateStatus == 2">买家已发货</el-tag>
                    <el-tag type="success" v-if="row.rightsOperateStatus == 3">商家已收到退货商品</el-tag>
                    <el-tag type="warning" v-if="row.rightsOperateStatus == 4">商家发起退款支付</el-tag>
                    <el-tag type="success" v-if="row.rightsOperateStatus == 5">已支付退款</el-tag>
                    <el-tag type="danger" v-if="row.rightsOperateStatus == 6">拒绝</el-tag>
                    <el-tag type="info" v-if="row.rightsOperateStatus == 7">自动关闭</el-tag>
                    <el-tag type="info" v-if="row.rightsOperateStatus == 8">主动撤消</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="售后状态">
                <template slot-scope="{row}">
                    <el-tag type="warning" v-if="row.rightsRefundStatus == 0">待退款</el-tag>
                    <el-tag type="success" v-if="row.rightsRefundStatus == 1">退款成功</el-tag>
                    <el-tag type="danger" v-if="row.rightsRefundStatus == 2">退款失败</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" align="center" label="创建时间" width="160">
                <template slot-scope="{row}">
                    {{ row.createTime | TableItemEmpty }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" label="操作" width="100">
                <template slot-scope="{row}">
                    <el-button type="text" :size="ELTableSize"
                        @click="$refs.AfterSaleDetailsRef.init(row.id, 'view')">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <AfterSaleDetails ref="AfterSaleDetailsRef" />
    </div>
</template>

<script>
import getListApi from "@/mixins/getListApi";
import Status from "./afterSale/status"
import AfterSaleDetails from "./afterSale/after-sale-details.vue";
import { getPlatformAfterSalePageApi, exportPlatformAfterSaleApi } from "@/api/order";

export default {
    name: '',
    mixins: [getListApi, Status],
    components: {
        AfterSaleDetails
    },
    data() {
        return {
            listURL: getPlatformAfterSalePageApi,
            queryParams: {
                orderNo: undefined,
                userMobile: undefined,
                userName: undefined,
                subsidyStatus: undefined,
                consumeTime: undefined,
                queueTime: undefined,
                createTime: undefined,
            },
            // 日期范围字段映射配置
            dateRangeMapping: {
                // 日期范围字段名: { start: 开始时间字段名, end: 结束时间字段名 }
                createTime: { start: 'createStartTime', end: 'createEndTime' }
            },
            exportObj: {
                url: exportPlatformAfterSaleApi,
                name: '平台订单售后列表'
            }
        };
    },
};
</script>

<style lang='scss' scoped></style>