﻿<template>
    <div class="NCC-common-layout">
        <div class="NCC-common-layout-center">
            <!-- 搜索区域 -->
            <el-card class="search-card" shadow="never">
                <div slot="header" class="search-header">
                    <i class="el-icon-search"></i>
                    <span>搜索条件</span>
                </div>
                <el-form :model="query" size="small" label-width="80px" class="search-form">
                    <el-row :gutter="15" type="flex" align="top">
                        <el-col :span="4">
                            <el-form-item label="订单编号">
                                <el-input v-model="query.orderNo" placeholder="请输入订单编号" clearable prefix-icon="el-icon-document" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="用户ID">
                                <el-input v-model="query.userId" placeholder="请输入用户ID" clearable prefix-icon="el-icon-user" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="用户电话">
                                <el-input v-model="query.userPhone" placeholder="请输入用户电话" clearable prefix-icon="el-icon-phone" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" class="button-group">
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="search()" :loading="listLoading">查询</el-button>
                                <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <div class="NCC-common-layout-main NCC-flex-main">
                <div class="NCC-common-head">
                    <div class="NCC-common-head-left">
                        <h3 class="page-title">退款申请管理</h3>
                    </div>
                    <div class="NCC-common-head-right">
                        <el-tooltip effect="dark" content="刷新" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
                        </el-tooltip>
                        <screenfull isContainer />
                    </div>
                </div>
                <NCC-table v-loading="listLoading" :data="list" :table-layout="'auto'" stripe @sort-change="handleSortChange">
                    <el-table-column prop="refundStatus" label="状态" align="center" width="100" sortable="custom">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.refundStatus === 0" type="warning" size="small">
                                <i class="el-icon-time"></i> 待处理
                            </el-tag>
                            <el-tag v-else-if="scope.row.refundStatus === 1" type="success" size="small">
                                <i class="el-icon-check"></i> 已同意
                            </el-tag>
                            <el-tag v-else-if="scope.row.refundStatus === 2" type="danger" size="small">
                                <i class="el-icon-close"></i> 已拒绝
                            </el-tag>
                            <el-tag v-else-if="scope.row.refundStatus === 3" type="info" size="small">
                                <i class="el-icon-success"></i> 已退款
                            </el-tag>
                            <el-tag v-else type="info" size="small">未知</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="applyTime" label="申请时间" align="center" width="160" sortable="custom">
                        <template slot-scope="scope">
                            <span v-if="scope.row.applyTime">{{ formatDateTime(scope.row.applyTime) }}</span>
                            <span v-else class="text-muted">-</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderNo" label="订单编号" align="left" min-width="180" show-overflow-tooltip sortable="custom">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="viewDetail(scope.row.id)">{{ scope.row.orderNo }}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="applyAmount" label="申请金额" align="right" width="120" sortable="custom">
                        <template slot-scope="scope">
                            <span class="amount-text">¥{{ scope.row.applyAmount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userId" label="用户ID" align="left" min-width="120" show-overflow-tooltip sortable="custom" />
                    <el-table-column prop="userPhone" label="用户电话" align="left" width="130" show-overflow-tooltip sortable="custom">
                        <template slot-scope="scope">
                            <span class="phone-text">{{ scope.row.userPhone }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="refundReason" label="退款原因" align="left" min-width="150" show-overflow-tooltip />
                    <el-table-column prop="remark" label="备注" align="left" min-width="120" show-overflow-tooltip />
                    <el-table-column label="操作" fixed="right" width="140">
                        <template slot-scope="scope">
                            <el-button type="text" @click="viewDetail(scope.row.id)" size="mini" icon="el-icon-view">详情</el-button>
                            <el-button v-if="scope.row.refundStatus === 0" type="text" @click="addOrUpdateHandle(scope.row.id)" size="mini" icon="el-icon-edit" class="process-btn">处理</el-button>
                        </template>
                    </el-table-column>
                </NCC-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
            </div>
        </div>
        <NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
        <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
    </div>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import NCCForm from './Form'
import ExportBox from './ExportBox'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
    components: { NCCForm, ExportBox },
    data() {
        return {
            showAll: false,
            query: {
                orderNo: undefined,
                userId: undefined,
                userPhone: undefined,
            },
            list: [],
            listLoading: true,
            multipleSelection: [], total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            },
            formVisible: false,
            exportBoxVisible: false,
            columnList: [
                { prop: 'applyTime', label: '申请时间' },
                { prop: 'orderNo', label: '订单编号' },
                { prop: 'applyAmount', label: '申请金额' },
                { prop: 'userId', label: '用户ID' },
                { prop: 'userPhone', label: '用户电话' },
            ],
        }
    },
    computed: {},
    created() {
        this.initData()
    },
    methods: {
        initData() {
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query
            };
            let query = {}
            for (let key in _query) {
                if (Array.isArray(_query[key])) {
                    query[key] = _query[key].join()
                } else {
                    query[key] = _query[key]
                }
            }
            request({
                url: `/api/Extend/UavRefundApplication`,
                method: 'GET',
                data: query
            }).then(res => {
                this.list = res.data.list
                this.total = res.data.pagination.total
                this.listLoading = false
            })
        },
        handleDel(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                type: 'warning'
            }).then(() => {
                request({
                    url: `/api/Extend/UavRefundApplication/${id}`,
                    method: 'DELETE'
                }).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: () => {
                            this.initData()
                        }
                    });
                })
            }).catch(() => {
            });
        },
        addOrUpdateHandle(id, isDetail) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.NCCForm.init(id, isDetail)
            })
        },
        viewDetail(id) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.NCCForm.init(id, true)
            })
        },
        formatDateTime(dateTime) {
            if (!dateTime) return '-'
            const date = new Date(dateTime)
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            })
        },
        handleSortChange({ column, prop, order }) {
            if (prop) {
                // 确保排序字段名称与后端一致
                this.listQuery.sidx = prop
                this.listQuery.sort = order === 'ascending' ? 'asc' : 'desc'
                this.initData()
            }
        },
        search() {
            this.listQuery.currentPage = 1
            this.initData()
        },
        refresh(isrRefresh) {
            this.formVisible = false
            if (isrRefresh) this.reset()
        },
        reset() {
            for (let key in this.query) {
                this.query[key] = undefined
            }
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        }
    }
}
</script>

<style scoped>
/* 搜索卡片样式 */
.search-card {
    margin-bottom: 20px;
    border-radius: 8px;
}

.search-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #303133;
}

.search-header i {
    margin-right: 8px;
    color: #409EFF;
    font-size: 16px;
}

/* 搜索表单样式 */
.search-form {
    margin-bottom: 0;
}

.search-form .el-form-item {
    margin-bottom: 0;
}

.search-form .el-form-item__label {
    font-size: 13px;
    color: #606266;
    font-weight: 500;
}

.search-form .el-input__inner {
    font-size: 13px;
}

.search-form .el-button {
    margin-left: 8px;
    font-size: 13px;
}

.search-form .el-button:first-child {
    margin-left: 0;
}

/* 按钮组样式 */
.button-group .el-form-item {
    margin-bottom: 0;
    text-align: right;
}

.button-group .el-form-item__content {
    display: flex;
    justify-content: flex-end;
}

.button-group .el-button {
    margin-left: 8px;
}

.button-group .el-button:first-child {
    margin-left: 0;
}

/* 页面标题样式 */
.page-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

/* 表格样式优化 */
.amount-text {
    color: #f56c6c;
    font-weight: bold;
    font-size: 14px;
}

.phone-text {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #606266;
}

.text-muted {
    color: #c0c4cc;
}

/* 操作按钮样式 */
.process-btn {
    color: #409EFF !important;
}

.process-btn:hover {
    color: #66b1ff !important;
}

/* 响应式优化 */
@media (max-width: 1200px) {
    .search-form .el-col {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .search-form .el-row {
        flex-direction: column;
    }
    
    .search-form .el-col {
        width: 100% !important;
        margin-bottom: 10px;
    }
    
    .search-form .el-col:last-child {
        text-align: left !important;
    }
}
</style>