gold-vue/src/views/moneyManage/receiveDetail/receiveService.vue

<template>
    <div class="content">
        <!-- 搜索区域：仅保留客服相关筛选条件 -->
        <div class="div-card1">
            <el-card class="card1" style="margin-bottom: 0.5vh; min-height: 110px;">
                <div class="row">
                    <div class="rowItem">
                        <el-text style="width: 4vw;">精网号</el-text>
                        <el-input v-model="searchData.jwcode" placeholder="请输入精网号" style="width:10vw;"
                            clearable></el-input>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">客户姓名</el-text>
                        <el-input v-model="searchData.name" placeholder="请输入客户姓名" style="width:10vw;"
                            clearable></el-input>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">所属地区</el-text>
                        <el-cascader style="width: 9vw;" v-model="searchData.markets" :options="market"
                            placeholder="请选择所属地区" clearable @change="handleMarketChange" />
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">订单状态</el-text>
                        <el-select v-model="searchData.status" placeholder="请选择订单状态" style="width: 10vw;" clearable>
                            <el-option v-for="item in statusList" :key="item.name" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">支付方式</el-text>
                        <el-select v-model="searchData.payType" placeholder="请选择支付方式" style="width: 10vw;" clearable>
                            <el-option v-for="item in paytypeList" :key="item" :label="item" :value="item" />
                        </el-select>
                    </div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="rowItem">
                        <el-text style="width: 4vw;">活动名称</el-text>
                        <el-select v-model="searchData.activity" placeholder="请选择活动方式" style="width: 10vw;" clearable>
                            <el-option v-for="item in activityList" :key="item.id" :label="item.activityName"
                                :value="item.id" />
                        </el-select>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">产品名称</el-text>
                        <el-cascader v-model="searchData.goodsName" :options="productList" style="width: 10vw;"
                            clearable />
                    </div>
                    <div class="rowItem" style="width: 30vw">
                        <el-text style="width: 4vw; margin-left: 0.5vw;">付款时间</el-text>
                        <el-date-picker v-model="getTime" type="datetimerange" range-separator="至"
                            start-placeholder="起始时间" end-placeholder="结束时间" style="width: 22vw; "
                            @change="handleDatePickerChange" :default-time="defaultTime"
                            :disabled-date="disabledDate" />
                    </div>
                    <div class="buttons">
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button type="success" @click="reset">重置</el-button>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 表格区域：仅保留客服相关列和操作 -->
        <div class="div-card2">
            <el-card class="card2">
                <div class="btns">
                    <div class="btnAdd">
                        <el-button @click="openAddForm" type="success">添加收款</el-button>
                    </div>
                    <div class="info-tooltip">
                        <el-popover placement="top" title="数据说明" :width="260" trigger="hover"
                            content="收款的所有页面：订单记录默认按照付款时间降序排列" popper-class="custom-popover" :show-arrow="false">
                            <template #reference>
                                <el-icon class="service-icon">
                                    <Warning />
                                </el-icon>
                            </template>
                        </el-popover>
                    </div>
                </div>

                <div class="table">
                    <el-table :data="tableData" style="width: 80vw;height:64vh;" @sort-change="handleSortChange"
                        :row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }">
                        <el-table-column type="index" label="序号" width="100px" fixed="left">
                            <template #default="scope">
                                <span>{{ scope.$index + 1 + (pageInfo.pageNum - 1) * pageInfo.pageSize }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="left" prop="jwcode" label="Homily ID" width="110px" />
                        <el-table-column fixed="left" prop="name" label="姓名" width="110px" />
                        <el-table-column prop="marketName" label="所属地区" width="80px" />
                        <el-table-column prop="activity" label="活动名称" width="120px" show-overflow-tooltip />
                        <el-table-column prop="goodsName" label="产品名称" width="120px" />
                        <el-table-column prop="goodNum" label="产品数量" width="130px">
                            <template #default="scope">
                                <span v-if="scope.row.goodsName == '金币充值'">{{ scope.row.permanentGold }}</span>
                                <span v-else>{{ scope.row.goodNum }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="paymentCurrency" label="付款币种" width="100px" />
                        <el-table-column prop="paymentAmount" label="付款金额" width="120px" />
                        <el-table-column prop="payType" label="支付方式" width="130px" />
                        <el-table-column prop="payTime" label="付款时间" width="180px" />
                        <el-table-column prop="voucher" label="转账凭证" width="110px">
                            <template #default="scope">
                                <div v-if="scope.row.voucher"
                                    style="display: flex; justify-content: center; align-items: center; cursor: pointer;"
                                    @click="previewImage(scope.row.voucher)">
                                    <img :src="scope.row.voucher" alt="支付凭证" style="width: auto; height: 40px;">
                                </div>
                                <div v-else
                                    style="display: flex; justify-content: center; align-items: center; height: 40px;">
                                    ——
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="submitterName" label="提交人" width="150px" show-overflow-tooltip />
                        <el-table-column prop="remark" label="备注" width="150px" show-overflow-tooltip />
                        <!-- 客服专属的订单状态列 -->
                        <el-table-column fixed="right" prop="status" label="订单状态" width="100px">
                            <template #default="scope">
                                <span v-if="scope.row.status == 0">待审核</span>
                                <span v-else-if="scope.row.status == 1 || scope.row.status == 4">已通过</span>
                                <span v-else-if="scope.row.status == 2">已驳回</span>
                                <span v-else-if="scope.row.status == 5">已撤回</span>
                                <span v-else-if="scope.row.status == 6">退款</span>
                                <span v-else></span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120px">
                            <template #default=scope>
                                <el-link v-if="scope.row.status == 4" style="color: #FA5A1E;"
                                    @click="openConfirm('refund', scope.row)">退款</el-link>
                                <el-link v-else-if="scope.row.status == 1" style="color: #2741DE;">待填写手续费</el-link>
                                <el-link v-else-if="scope.row.status == 5" style="color: #2741DE;"
                                    @click="openAddForm(scope.row)">编辑</el-link>
                                <el-link v-else-if="scope.row.status == 0" style="color: #FA5A1E;"
                                    @click="openConfirm('recall', scope.row)">撤回</el-link>
                                <el-link v-else-if="scope.row.status == 2" style="color: #FA5A1E;"
                                    @click="openRejectReason(scope.row.rejectReason)">查看驳回理由</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="pagination">
                    <el-pagination background :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
                        :page-sizes="[5, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        :total="total" @size-change="handlePagination('size', $event)"
                        @current-change="handlePagination('page', $event)"></el-pagination>
                </div>
            </el-card>
        </div>

        <!-- 撤回确认弹窗 -->
        <div class="recallDialog" v-show="recallDialog">
            <div class="close">
                <button @click="closeRecall" class="Btn">关闭</button>
            </div>
            <div class="text">
                <text class="txt">{{ textContent }}</text>
            </div>
            <div class="cancle">
                <button @click="closeRecall" class="Btn">取消</button>
            </div>
            <div class="confirm">
                <button @click="handleRecall" class="Btn">确定</button>
            </div>
        </div>

        <!-- 退款确认弹窗 -->
        <div class="recallDialog" v-show="refundConfirmDialog">
            <div class="close">
                <button @click="closeConfirmRefund" class="Btn">关闭</button>
            </div>
            <div class="text">
                <text class="txt">{{ textContent }}</text>
            </div>
            <div class="cancle">
                <button @click="closeConfirmRefund" class="Btn">取消</button>
            </div>
            <div class="confirm">
                <button @click="openRefundDialog" class="Btn">确定</button>
            </div>
        </div>

        <!-- 客服新增/编辑收款弹窗 -->
        <el-dialog class="adddialog" v-model="addFormisible" width="20vw" :before-close="closeAddForm">
            <el-form class="addForm" ref="addFormRef" :rules="addFormRule" :model="addFormData" label-width="4vw"
                label-position="left">
                <el-form-item label="精网号" required prop="jwcode">
                    <el-input v-model="addFormData.jwcode" placeholder="请输入精网号" @blur="jwcodeSeachMarket" />
                </el-form-item>
                <el-form-item label="客户姓名" required prop="name">
                    <el-input disabled v-model="addFormData.name" placeholder="请输入客户姓名" />
                </el-form-item>
                <el-form-item label="所属地区" prop="market">
                    <el-input disabled v-model="addFormData.marketName" placeholder="请输入所属地区" />
                </el-form-item>
                <el-form-item label="活动名称" required prop="activity">
                    <el-select v-model="addFormData.activity" placeholder="请选择活动方式" clearable>
                        <el-option v-for="item in activityList" :key="item.id" :label="item.activityName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产品名称" required @change="ifGold" prop="goodsName">
                    <ProductSelect ref="productSelectRef" v-model="addFormData.goodsName"></ProductSelect>
                </el-form-item>
                <el-form-item v-show="!isGold" label="产品数量" required>
                    <div style="display: flex;">
                        <el-input style="padding-right: 30px; flex: 3;" v-model="addFormData.goodNum"
                            placeholder="请输入产品数量" />
                        <CurrencySelect v-model="addFormData.numUnit" :items="numUnitList" style="flex: 1.5;"
                            placeholder="单位" @change="handleCurrencyChange" />
                    </div>
                </el-form-item>
                <div v-show="isGold" style="margin-bottom: 15px;  display: flex;">
                    <div style=" display: flex; ">
                        <span
                            style="color: #999999; display: flex; white-space: nowrap;align-items: center;">永久金币：</span>
                        <el-input placeholder="0"
                            style="padding-right: 10px; padding-left: 10px; height: 30px; width: 110px;"
                            v-model="addFormData.permanentGold" />
                    </div>
                    <div style="padding-right: 5px; display: flex;">
                        <span
                            style="color: #999999; display: flex; white-space: nowrap;align-items: center;">免费金币：</span>
                        <el-input placeholder="0"
                            style="padding-right: 10px; padding-left: 10px; height: 30px; width: 110px;"
                            v-model="addFormData.freeGold" />
                    </div>
                </div>
                <el-form-item label="付款币种" required prop="paymentCurrency">
                    <CurrencySelect v-model="addFormData.paymentCurrency" :items="customOptions" placeholder="请选择付款币种"
                        @change="handleCurrencyChange" />
                </el-form-item>
                <el-form-item label="付款金额" required prop="paymentAmount">
                    <el-input v-model="addFormData.paymentAmount" placeholder="请输入付款金额" />
                </el-form-item>
                <el-form-item label="支付方式" required prop="payType">
                    <CurrencySelect v-model="addFormData.payType" :items="paytypeOptions" placeholder="请选择支付方式"
                        @change="ifGroup">
                    </CurrencySelect>
                </el-form-item>
                <el-form-item label="到账地区" prop="receivedMarket">
                    <CurrencySelect v-model="addFormData.receivedMarket" :items="MoneyAddressOptions"
                        :disabled="isGroup" placeholder="请选择到账地区">
                    </CurrencySelect>
                </el-form-item>
                <el-form-item label="付款时间" required prop="payTime">
                    <el-date-picker type="datetime" placement="right" v-model="addFormData.payTime"
                        placeholder="请选择付款时间" />
                </el-form-item>
                <el-form-item label="转账凭证" prop="voucher">
                    <div class="pic">
                        <el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card"
                            :auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr"
                            :on-change="handleImageChange" :http-request="customUpload">
                            <img v-if="addFormData.voucher" :src="addFormData.voucher" class="avatar"
                                style="height: 100%; width: 100%;  object-fit: cover;" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="addFormData.remark" type="textarea" :rows="4" placeholder="请输入备注" maxlength="100"
                        show-word-limit />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button>
                    <el-button v-if="addOrEdit == 1" style="background-color: #2741DE; margin-left: 2.5vw;"
                        type="primary" @click="throttledhandleAddForm" :disabled="ifAddDone">确定</el-button>
                    <el-button v-else-if="addOrEdit == 2" style="background-color: #2741DE; margin-left: 2.5vw;"
                        type="primary" @click="throttledhandleEditForm" :disabled="ifReAddDone">编辑</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 客服新增退款弹窗 -->
        <el-dialog v-model="refundDialog" title="退款" class="refundDialog" overflow draggable style="width: 40vw;"
            :before-close="closeRefundForm">
            <div style="display: flex;">
                <div class="left">
                    <div class="add-item">
                        <el-text style="width:4vw;">精网号</el-text>
                        <el-input v-model="refundFormData.jwcode" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">客户姓名</el-text>
                        <el-input v-model="refundFormData.name" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">所属地区</el-text>
                        <el-input v-model="refundFormData.marketName" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">活动名称</el-text>
                        <el-input v-model="refundFormData.activity" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">产品名称</el-text>
                        <el-input v-model="refundFormData.goodsName" style="width:10vw;" disabled />
                    </div>
                    <div v-show="!isRefundGold" class="add-item">
                        <el-text style="width:4vw;">产品数量</el-text>
                        <el-input style="padding-right: 10px; width:6.5vw;" v-model="refundFormData.goodNum"
                            placeholder="请输入产品数量" disabled />
                        <CurrencySelect disabled v-model="refundFormData.numUnit" :items="numUnitList"
                            style="width: 3.5vw;" placeholder="单位" @change="handleCurrencyChange" />
                    </div>
                    <div v-show="isRefundGold" style="margin-bottom: 15px; ">
                        <div style=" display: flex; ">
                            <span
                                style="color: #999999; display: flex; white-space: nowrap;align-items: center;width:4vw;">永久金币：</span>
                            <el-input style="padding-right: 10px;  height: 30px; width: 110px; margin-bottom: 10px"
                                v-model="refundFormData.permanentGold" disabled />
                        </div>
                        <div style="padding-right: 5px; display: flex;">
                            <span
                                style="color: #999999; display: flex; white-space: nowrap;align-items: center;width:4vw;">免费金币：</span>
                            <el-input style="padding-right: 10px;  height: 30px; width: 110px;"
                                v-model="refundFormData.freeGold" disabled />
                        </div>
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">付款币种</el-text>
                        <el-input v-model="refundFormData.paymentCurrency" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">付款金额</el-text>
                        <el-input v-model="refundFormData.paymentAmount" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">支付方式</el-text>
                        <el-input v-model="refundFormData.payType" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">付款时间</el-text>
                        <el-date-picker v-model="refundFormData.payTime" type="datetime" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;" size="small">转账凭证</el-text>
                        <el-form-item :rules="{ required: true, message: '请上传图片', trigger: 'change' }">
                            <el-upload ref="uploadRef" :auto-upload="false" list-type="picture-card"
                                :show-file-list="false">
                                <template #default>
                                    <img v-if="refundFormData.voucher" :src="refundFormData.voucher"
                                        style="width: 100%; height: 100%; object-fit: cover;">
                                    <el-icon v-else>
                                        <Plus />
                                    </el-icon>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">备注</el-text>
                        <el-input v-model="refundFormData.remark" style="width:10vw;" :rows="2" type="textarea"
                            maxLength="100" disabled show-word-limit />
                    </div>
                </div>
                <div class="right">
                    <div class="add-item">
                        <el-text style="width:4vw;">退款模式</el-text>
                        <el-radio-group v-model="refundFormData.refundModel">
                            <el-radio value="0">全部退款</el-radio>
                            <el-radio value="1">部分退款</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="add-item"
                        v-show="refundFormData.goodsName === '金币充值' && refundFormData.refundModel === '1'">
                        <el-text style="width:4vw;">永久金币</el-text>
                        <el-input v-model="refundFormData.partRefundGold" style="width:5vw;" />&nbsp;&nbsp;个
                    </div>
                    <div class="add-item"
                        v-show="refundFormData.goodsName === '金币充值' && refundFormData.refundModel === '1'">
                        <el-text style="width:4vw;">免费金币</el-text>
                        <el-input v-model="refundFormData.partRefundFree" style="width:5vw;" />&nbsp;&nbsp;个
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">退款理由</el-text>
                        <el-input v-model="refundFormData.refundReason" style="width:10vw;" :rows="5" maxlength="150"
                            show-word-limit type="textarea" />
                    </div>
                    <div>ps:请在退款理由表明用户的退款需求。</div>
                    <div style="display:flex;justify-content: center;margin-top: 5vh;">
                        <el-button type="default" @click="closeRefundForm">取消</el-button>
                        <el-button type="primary" @click="throttledsubmitRefund">提交</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 查看驳回理由 -->
        <el-dialog title="驳回理由" v-model="rejectReasonVisible" width="50%" top="30vh"
            style="min-width: 200px; max-width: 500px;" :before-close="closeRejectForm">
            <div class="reject-reason-box">
                {{ rejectReason }}
            </div>
            <div class="rejectBtn">
                <el-button type="primary" @click="closeRejectForm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { ElMessage, ElMessageBox } from 'element-plus'
import API from '@/util/http.js'
import CurrencySelect from '@/components/MoneyManage/CurrencySelect.vue'
import ProductSelect from '@/components/MoneyManage/ProductSelect.vue'
import { Plus } from '@element-plus/icons-vue'; // 补充图标导入（原代码遗漏）
import request from '@/util/http.js'
import moment from 'moment'
import { useAdminStore } from '@/store/index.js'
import { hasMenuPermission } from '@/utils/menuTreePermission.js'
import _ from 'lodash'
// 导入客服相关规则和静态数据
import { addFormRule } from './utils/recriveFormRules.js'
import { productList, MarketNameForId, CurrencyForId, marketList, statusList } from './utils/staticData.js'

// ===================== 基础状态管理（仅保留客服相关） =====================
const adminStore = useAdminStore();
const { menuTree } = storeToRefs(adminStore);
const adminData = ref({}) // 管理员信息
const tableData = ref([]) // 表格数据
const total = ref(0) // 总条数
const pageInfo = ref({ pageSize: 10, pageNum: 1 }) // 分页信息
const numUnitList = ref(['年', '月'])

// 筛选地区树
const market = ref([])

//防止重复点击状态管理
const ifAddDone = ref(false)
const ifReAddDone = ref(false)

// 角色标识：固定为客服（删除财务、总部财务、超级管理员标识）
const kefu = ref(true)
const caiwu = ref(false)
const HQcaiwu = ref(false)
const superAdmin = ref(false)

// ===================== 查询相关 =====================
const searchData = ref({}) // 搜索参数
const getTime = ref([]) // 时间范围
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)] // 默认时间

// 查询按钮
const search = () => {
    getlist()
    ElMessage.success('查询成功')
}

// 重置按钮
const reset = () => {
    searchData.value = {}
    getTime.value = []
    // 重置页码
    pageInfo.value.pageNum = 1
    getlist()
}

const rejectReasonVisible = ref(false)
const rejectReason = ref('')
const closeRejectForm = () => {
    rejectReasonVisible.value = false
}
const openRejectReason = (reason) => {
    rejectReason.value = reason
    rejectReasonVisible.value = true
}

// 时间选择器变更（原代码声明未实现，保留空函数避免报错）
const handleDatePickerChange = () => { }
// 日期禁用（原代码声明未实现，保留空函数避免报错）
const disabledDate = () => { }

// 表格排序（原代码声明未实现，保留空函数避免报错）
const handleSortChange = () => { }

// 获取表格数据（仅保留客服角色逻辑）
const getlist = async () => {
    try {
        let payCurrencySelect = ''
        let goodsName = ''
        // 处理时间范围
        if (getTime.value && getTime.value.length === 2) {
            searchData.value.startTime = moment(getTime.value[0]).format('YYYY-MM-DD HH:mm:ss')
            searchData.value.endTime = moment(getTime.value[1]).format('YYYY-MM-DD HH:mm:ss')
        } else {
            searchData.value.startTime = ''
            searchData.value.endTime = ''
        }
        // 处理产品名称（级联选择器取最后一级）
        if (searchData.value.goodsName) {
            goodsName = searchData.value.goodsName[searchData.value.goodsName.length - 1]
        }
        // 处理付款币种
        if (searchData.value.paymentCurrency) {
            payCurrencySelect = CurrencyForId(searchData.value.paymentCurrency)
        }
        // 客服角色固定参数：cashRoleId=0，无到账地区筛选
        const cashRoleId = '0'
        const receivedMarket = ''

        // 地区处理
        if (searchData.value.markets) {
            searchData.value.market = searchData.value.markets[searchData.value.markets.length - 1]
        } else {
            searchData.value.market = ''
        }

        const result = await request({
            url: '/cashCollection/selectCollection',
            data: {
                ...pageInfo.value,
                cashCollection: {
                    ...searchData.value,
                    ...getTime.value,
                    submitterId: adminData.value.id,
                    receivedMarket: MarketNameForId(receivedMarket),
                    cashRoleId: cashRoleId,
                    paymentCurrency: payCurrencySelect,
                    submitterMarket: adminData.value.markets,
                    goodsName: goodsName,
                    market: MarketNameForId(searchData.value.market)
                }
            }
        })
        if (result.code == 200) {
            tableData.value = result.data.list
            total.value = result.data.total
        } else {
            ElMessage.error('数据异常')
            console.log(result.msg);
        }
    } catch (error) {
        console.log(error);
    }
}

// ===================== 分页相关 =====================
const handlePagination = (type, val) => {
    if (type === 'size') {
        pageInfo.value.pageSize = val
    } else {
        pageInfo.value.pageNum = val
    }
    getlist()
}

// ===================== 客服新增/编辑收款弹窗 =====================
const addFormisible = ref(false) // 弹窗显隐
const addFormData = ref({ name: '', market: '', goodsName: '' }) // 表单数据
const addFormRef = ref(null) // 表单引用
const addOrEdit = ref(0) // 1=新增，2=编辑
const isGold = ref(false) // 是否为金币充值产品
const productSelectRef = ref(null) // 产品选择器引用
const uploadRef = ref(null) // 上传组件引用

// 产品选择变更：判断是否为金币充值
const ifGold = () => {
    if (addFormData.value.goodsName === '金币充值') {
        isGold.value = true
        addFormData.value.goodNum = 0
    } else {
        isGold.value = false
        numUnitList.value = ['个', '年', '月']
        const selectItems = ["AI机构追踪", "AI机构出击", "AI机构资金", "AI机构活跃度", "超级机构透视", "超级机构伏击", "超级机构猎杀", "超级机构脉搏", "超级机构罗盘", 'HC信息费', 'HC信息费', 'AI机构探测神器', '超级机构探测神器']
        if (selectItems.includes(addFormData.value.goodsName)) {
            if (addOrEdit.value == 1) {
                addFormData.value.numUnit = ''
            }
            numUnitList.value = ['年', '月']
        } else if (addFormData.value.goodsName == '静态信息费') {
            addFormData.value.numUnit = '年'
            numUnitList.value = ['年']
        } else {
            addFormData.value.numUnit = '个'
            numUnitList.value = ['个']
        }
    }
}

// 支付方式变更：判断是否为默认归属平台
const isGroup = ref(false)
const ifGroup = () => {
    if (addFormData.value.payType === 'Stripe-链接收款' || addFormData.value.payType === 'PaymentAsia-链接收款') {
        isGroup.value = true
        addFormData.value.receivedMarket = '香港'
    } else if (addFormData.value.payType === 'Ipay88-链接收款') {
        isGroup.value = true
        addFormData.value.receivedMarket = '马来西亚'
    } else if (addFormData.value.payType === 'E-Transfer') {
        isGroup.value = true
        addFormData.value.receivedMarket = '加拿大'
    } else if (addFormData.value.payType === 'Grabpay' || addFormData.value.payType === 'Nets' || addFormData.value.payType === 'Paypal') {
        isGroup.value = true
        addFormData.value.receivedMarket = '新加坡'
    } else {
        isGroup.value = false
    }
}

// 精网号失焦：查询客户姓名和地区
const jwcodeSeachMarket = async () => {
    try {
        const result = await request({
            url: '/cashCollection/getNameAndMarket',
            data: addFormData.value.jwcode
        })
        if (result.code == 200) {
            ElMessage.success('客户信息查询成功')
            addFormData.value.market = result.data.market
            addFormData.value.marketName = result.data.marketName
            addFormData.value.name = result.data.name
        } else {
            ElMessage.error('客户不存在')
        }
    } catch (error) {
        console.log(error);
    }
}

// 打开新增/编辑弹窗
const openAddForm = (row) => {
    productSelectRef.value?.resetSelect();
    if (row?.jwcode) {
        // 编辑模式
        addOrEdit.value = 2
        addFormData.value = {
            ...row,
        }
        jwcodeSeachMarket()
        ifGold()
    } else {
        // 新增模式
        addOrEdit.value = 1
        addFormData.value = { goodsName: '' }
    }
    addFormisible.value = true
}

// 关闭新增/编辑弹窗
const closeAddForm = () => {
    addFormisible.value = false
    addFormData.value = {}
    addOrEdit.value = 0
    isGold.value = false
    addFormRef.value?.resetFields();
}
const testGold = () => {
    // 转换为数字（处理字符串类型的数字）
    if (addFormData.value.goodsName == '金币充值') {
        if (addFormData.value.permanentGold == null) {
            addFormData.value.permanentGold = 0
        }
        if (addFormData.value.freeGold == null) {
            addFormData.value.freeGold = 0
        }
        const permanentGold = Number(addFormData.value.permanentGold);
        const freeNum = Number(addFormData.value.freeGold);
        // 正则：仅允许0-999999的正整数（包括0）
        const reg = /^[0-9]{1,6}$/;
        if (!reg.test(permanentGold) || permanentGold < 0) {
            return { valid: false, message: '请检查永久金币格式' };
        }
        if (!reg.test(freeNum) || freeNum < 0) {
            return { valid: false, message: '请检查免费金币格式' };
        }
        if (permanentGold == 0 && freeNum == 0) {
            return { valid: false, message: '永久金币或免费金币不能同为0' };
        }
    }
    return { valid: true };
}
// 客服新增收款
const handleAddForm = async () => {
    try {
        await addFormRef.value.validate();
        if (!testGold().valid) {
            ElMessage.error(testGold().message);
            return;
        }
        //单独校验产品数量
        if (!isGold.value) {
            if (!addFormData.value.goodNum) {
                ElMessage.error('请输入产品数量');
                return;
            }
            const positiveIntReg = /^[1-9]\d*$/;
            if (!positiveIntReg.test(addFormData.value.goodNum)) {
                ElMessage.error('产品数量必须为正整数');
                return;
            }
        }

        if (addFormData.value.numUnit == '') {
            ElMessage.error('请选择产品数量单位');
            return;
        }
        // 处理时间格式
        if (addFormData.value.payTime) {
            addFormData.value.payTime = moment(addFormData.value.payTime).format('YYYY-MM-DD HH:mm:ss')
        }
        ifAddDone.value = true
        const result = await request({
            url: '/cashCollection/add',
            data: {
                ...addFormData.value,
                submitterId: adminData.value.id,
                permanentGold: (addFormData.value.permanentGold || 0) * 100,
                freeGold: (addFormData.value.freeGold || 0) * 100,
                goodNum: addFormData.value.goodNum || addFormData.value.permanentGold || 0,
                paymentCurrency: CurrencyForId(addFormData.value.paymentCurrency) || '',
                receivedMarket: MarketNameForId(addFormData.value.receivedMarket) || '',
                paymentAmount: (addFormData.value.paymentAmount) * 100,
                submitterMarket: adminData.value.markets
            }
        })
        if (result.code == 200) {
            ElMessage.success('添加成功')
            getlist()
            closeAddForm()
        }
        ifAddDone.value = false
    } catch (error) {
        console.log('新增报错：', error);
        ElMessage.error('请完善表单信息后提交');
        ifAddDone.value = false
    }
}

// 客服编辑收款（撤回后重新提交）
const handleEditForm = async () => {
    try {
        await addFormRef.value.validate();
        if (!testGold().valid) {
            ElMessage.error(testGold().message);
            return;
        }
        if (typeof addFormData.value.activity == 'string') {
            console.log('转换前：', addFormData.value.activity);

            addFormData.value.activity = activityList.value.find(item => item.activityName === addFormData.value.activity).id
        }
        //单独校验产品数量
        if (!isGold.value) {
            if (!addFormData.value.goodNum) {
                ElMessage.error('请输入产品数量');
                return;
            }
            const positiveIntReg = /^[1-9]\d*$/;
            if (!positiveIntReg.test(addFormData.value.goodNum)) {
                ElMessage.error('产品数量必须为正整数');
                return;
            }
        }
        if (addFormData.value.numUnit == '') {
            ElMessage.error('请选择产品数量单位');
            return;
        }
        // 处理时间格式
        if (addFormData.value.payTime) {
            addFormData.value.payTime = moment(addFormData.value.payTime).format('YYYY-MM-DD HH:mm:ss')
        }
        ifReAddDone.value = true
        const result = await request({
            url: '/cashCollection/reSubmit',
            data: {
                ...addFormData.value,
                submitterId: adminData.value.id,
                permanentGold: (addFormData.value.permanentGold || 0) * 100,
                freeGold: (addFormData.value.freeGold || 0) * 100,
                goodNum: addFormData.value.goodNum || 0,
                paymentCurrency: CurrencyForId(addFormData.value.paymentCurrency) || '',
                receivedMarket: MarketNameForId(addFormData.value.receivedMarket) || '',
                paymentAmount: (addFormData.value.paymentAmount) * 100,
            }
        })
        if (result.code == 200) {
            ElMessage.success('编辑成功')
            getlist()
            closeAddForm()
        }
        ifReAddDone.value = false
    } catch (error) {
        console.log(error);
        ifReAddDone.value = false
    }
}

// 付款币种和支付方式选项（客服专用）
const customOptions = ref(['美元(USD)', '港币(HKD)', '新币(SGD)', '马币(MYR)', '泰铢(THB)', '加币(CAD)', '越南盾(VDN)', '韩元(KRW)'])
const paytypeOptions = ref(["Stripe-链接收款", "PaymentAsia-链接收款", "Ipay88-链接收款", "Grabpay", "Nets", "E-Transfer", "Paypal", "银行转账", "刷卡", "现金", "支票"])
const MoneyAddressOptions = ref(['马来西亚', '香港', '新加坡', '泰国', '越南HCM', '加拿大'])
const handleCurrencyChange = (option) => {
    console.log('选中的币种:', option);
};

// 图片上传相关
const handleImgSuccess = (response) => {
    try {
        addFormData.value.voucher = response.data.url
    } catch (error) {
        ElMessage.error(response.msg || '图片上传失败')
    }
}
const handelImgErr = (err) => {
    console.log(err);
    addFormData.value.imageUrl = null
    ElMessage.error("图片上传失败")
}
const beforeUpload = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
        ElMessage.error('图片必须是jpg或png类型!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
    }
    return true
}
const handleImageChange = (file) => {
    uploadRef.value.submit()
}
const customUpload = async (options) => {
    try {
        const formData = new FormData()
        formData.append('file', options.file)
        const response = await API({
            url: 'https://api.homilychart.com/hljw/api/aws/upload',
            method: 'POST',
            data: formData,
            headers: { 'Content-Type': 'multipart/form-data' }
        })
        if (response.code === 200 && response.data) {
            handleImgSuccess(response, options.file)
            ElMessage.success('上传成功')
        } else {
            options.onError(response)
            ElMessage.error(response.msg || '上传失败')
        }
    } catch (error) {
        console.error('上传错误:', error)
        ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
    }
}

// 图片预览
const previewImage = (imageUrl) => {
    const imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    imageElement.style.maxWidth = '80vw';
    imageElement.style.maxHeight = '80vh';
    const viewer = document.createElement('div');
    viewer.style.position = 'fixed';
    viewer.style.top = '0';
    viewer.style.left = '0';
    viewer.style.width = '100vw';
    viewer.style.height = '100vh';
    viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    viewer.style.display = 'flex';
    viewer.style.justifyContent = 'center';
    viewer.style.alignItems = 'center';
    viewer.style.zIndex = '9999';
    viewer.style.overflow = 'auto';
    viewer.appendChild(imageElement);
    document.body.appendChild(viewer);
    viewer.addEventListener('click', () => {
        document.body.removeChild(viewer);
    });
};

// ===================== 客服退款/撤回相关 =====================
// 撤回弹窗
const textContent = ref('')
const recallDialog = ref(false)
const RecallNum = ref('')

// 退款确认弹窗
const refundConfirmDialog = ref(false)
const refundDialog = ref(false) // 退款详情弹窗
const refundFormData = ref({}) // 退款表单数据
const isRefundGold = ref(false) // 退款产品是否为金币

// 判断退款产品类型
const ifRefundGold = () => {
    if (refundFormData.value.goodsName === '金币充值') {
        isRefundGold.value = true
        refundFormData.value.goodNum = 0
    } else {
        isRefundGold.value = false
    }
}

// 打开撤回/退款确认弹窗
const openConfirm = (val, row) => {
    if (val === 'refund') {
        textContent.value = '将要对该订单退款!'
        refundFormData.value = { ...row }
        ifRefundGold()
        refundConfirmDialog.value = true
    } else if (val === 'recall') {
        textContent.value = '将要撤回该信息!'
        recallDialog.value = true
        RecallNum.value = row.orderCode
    }
}

// 关闭撤回弹窗
const closeRecall = () => {
    recallDialog.value = false
    textContent.value = ''
    RecallNum.value = ''
}

// 执行撤回
const handleRecall = async () => {
    try {
        const result = await request({
            url: '/cashCollection/cancel',
            data: { orderCode: RecallNum.value }
        })
        if (result.code == 200) {
            ElMessage.success('撤回成功')
            getlist()
            closeRecall()
        }
    } catch (error) {
        console.log(error);
    }
}

// 关闭退款确认弹窗
const closeConfirmRefund = () => {
    refundConfirmDialog.value = false
    textContent.value = ''
}

// 打开退款详情弹窗
const openRefundDialog = () => {
    refundDialog.value = true
    closeConfirmRefund()
}

// 关闭退款详情弹窗
const closeRefundForm = () => {
    refundDialog.value = false
    refundFormData.value = {}
}

// 提交退款
const submitRefund = async () => {
    try {
        if (refundFormData.value.refundModel == 0) {
            refundFormData.value.partRefundGold = refundFormData.value.permanentGold,
                refundFormData.value.partRefundFree = refundFormData.value.freeGold
        } else if (refundFormData.value.refundModel == 1) {
            if (refundFormData.value.partRefundGold > refundFormData.value.permanentGold || refundFormData.value.partRefundFree > refundFormData.value.freeGold) {
                ElMessage.error('退款金额不能大于订单金额')
                return
            }
        }
        const result = await request({
            url: '/Money/add',
            data: {
                jwcode: refundFormData.value.jwcode,
                name: refundFormData.value.name,
                market: refundFormData.value.marketName,
                submitterId: adminData.value.id,
                submitterMarket: adminData.value.markets,
                remark: refundFormData.value.remark,
                refundReason: refundFormData.value.refundReason,
                refundModel: refundFormData.value.refundModel,
                originalOrderId: refundFormData.value.id,
                orderCode: refundFormData.value.orderCode,
                permanentGold: (refundFormData.value.permanentGold) * 100 || 0,
                freeGold: (refundFormData.value.freeGold) * 100 || 0,
                partRefundGold: (refundFormData.value.partRefundGold) * 100 || 0,
                partRefundFree: (refundFormData.value.partRefundFree) * 100 || 0,
                handlingCharge: (refundFormData.value.handlingCharge) * 100 || 0,
            }
        })
        if (result.code == 200) {
            ElMessage.success('新增退款成功')
            getlist()
            closeRefundForm()
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        console.log(error);
    }
}


// ===================== 初始化与节流 =====================
// 节流处理（防止重复提交）
const throttledhandleAddForm = _.throttle(handleAddForm, 5000, { trailing: false })
const throttledhandleEditForm = _.throttle(handleEditForm, 5000, { trailing: false })
const throttledsubmitRefund = _.throttle(submitRefund, 5000, { trailing: false })

// 活动列表（客服需要）
const activityList = ref([])
const getActivitys = async () => {
    try {
        const result = await API({ url: '/cashCollection/getActivityList', data: {} })
        if (result.code == 200) {
            activityList.value = result.data
        } else {
            ElMessage.error('活动列表获取失败')
        }
    } catch (error) {
        console.log('活动列表请求失败', error)
    }
}

// 获取管理员信息
const getAdminData = async () => {
    try {
        const result = await API({ url: '/admin/userinfo', data: {} })
        adminData.value = result
    } catch (error) {
        console.log('管理员信息请求失败', error)
    }
}

// 支付方式列表（表格筛选用）
const paytypeList = ["Stripe-链接收款", "PaymentAsia-链接收款", "Ipay88-链接收款", "银行转账", "刷卡", "现金", "支票", "Grabpay", "Nets", "E-Transfer", "Paypal"]
const getMarket = async function () {
    try {
        const result = await API({

            url: '/market/selectMarket',
        })
        console.log('看看地区树', result)

        const transformTree = (nodes) => {
            const allChildren = nodes.flatMap(node => node.children || []);

            return allChildren.map(child => {
                const grandchildren = child.children && child.children.length
                    ? transformTree([child])
                    : null;

                return {
                    value: child.id,
                    label: child.name,
                    children: grandchildren
                };
            });
        };
        market.value = transformTree(result.data)
        console.log('转换后的地区树==============', market.value)
    } catch (error) {
        console.log('请求失败', error)
    }
}
// 初始化
onMounted(async () => {
    await getAdminData()
    await getActivitys()
    // 客服角色默认加载列表
    getlist()
    await getMarket()
})
</script>

<style scoped lang="scss">
.content {
    height: 100%;
    width: 80vw;

    .card1 {
        width: 100%;
        background: #F3FAFE;

        .row {
            height: 4vh;
            width: 80vw;
            display: flex;
            min-height: 40px;

            .rowItem {
                display: flex;
                width: 15vw;
                align-items: center;
                justify-content: center;
                margin-right: 0.5vw;
            }

            .buttons {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 10px;
            }
        }
    }

    .div-card2 {
        width: 100%;
        margin-top: 2vh;

        .btns {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 10px;

            .btnAdd {
                padding-left: 10px;
            }

            .info-tooltip {
                display: flex;
                align-items: center;
            }

            .service-icon {
                color: #666;
                cursor: pointer;
                font-size: 18px;
                transition: all 0.3s ease;
                padding: 4px;
                border-radius: 50%;
            }
        }

        .table {
            margin: 10px;
            border-radius: 20px;

            .ellipsis-container {
                position: relative;
                width: 100%;

                .ellipsis-text {
                    display: inline-block;
                    width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    cursor: pointer;
                }

                .custom-tooltip {
                    position: fixed;
                    z-index: 9999;
                    padding: 8px 12px;
                    width: 200px;
                    background-color: #E4F0FC;
                    color: #333333;
                    border: 1px solid #e5e7eb;
                    border-radius: 4px;
                    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
                    min-height: 30px;
                    max-height: 300px;
                    overflow-y: auto;
                    font-size: 14px;
                    line-height: 1.5;
                }
            }
        }

        .pagination {
            margin-top: 10px;
            padding: 10px 10px;
        }
    }

    .recallDialog {
        height: 392px;
        width: 700px;
        background-image: url('/src/assets/receive-recall.png');
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;

        .close,
        .cancle,
        .confirm {
            opacity: 0;

            .Btn {
                height: 100%;
                width: 100%;
                border-radius: 10px;
            }
        }

        .close {
            position: absolute;
            left: 625px;
            top: 20px;
            height: 38px;
            width: 38px;
        }

        .text {
            position: absolute;
            left: 185px;
            top: 190px;
            height: 67px;
            width: 500px;

            .txt {
                height: 100%;
                width: 100%;
                color: #001a42;
                font-family: "PingFang SC";
                font-size: 48px;
                font-style: normal;
                font-weight: 900;
                line-height: normal;
            }
        }

        .cancle {
            position: absolute;
            left: 185px;
            top: 304px;
            height: 55px;
            width: 150px;
        }

        .confirm {
            position: absolute;
            left: 375px;
            top: 304px;
            height: 55px;
            width: 150px;
        }
    }

    :deep(.adddialog) {
        min-width: 500px;
        background-color: #F3FAFE !important;
        margin-top: 8vh;
        border-radius: 8px;

        .addForm {
            padding: 0 60px 1vh 60px;

            .el-date-editor {
                display: flex;
                flex: 1;
            }

            .pic {
                display: flex;
                align-items: center;

                .uploader {
                    height: 80px;
                    width: 80px;

                    .el-upload {
                        height: 100%;
                        width: 100%;
                    }
                }

                .picText {
                    color: #999999;
                    font-family: "PingFang SC";
                    font-size: 10px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 20px;
                    margin-left: 10px;
                }
            }
        }

        .dialog-footer {
            display: flex;
            justify-content: center;
            padding-bottom: 1.5vh;
        }
    }

    .refundDialog {
        .left {
            width: 50%;
            height: 70vh;
            min-height: 700px;
            padding: 0 2vw;

            .add-item {
                display: flex;
                align-items: center;
                margin-bottom: 1vh;
            }

            .image {
                width: 4vw !important;
                height: 4vw !important;
            }
        }

        .right {
            width: 50%;
            height: 50vh;

            .add-item {
                display: flex;
                align-items: center;
                margin-bottom: 1vh;
            }
        }
    }

    :deep(.adddialog .el-form-item__label) {
        min-width: 80px;
        width: auto;
        font-weight: 800;
        padding-bottom: 15px;
    }
}

// 表单卡片样式
.card2 {
    background: #E7F4FD;
}

// 表格样式
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__cell),
:deep(.el-table__body td) {
    background-color: #F3FAFE !important;
}

:deep(.el-table__header th) {
    background-color: #F3FAFE !important;
}

:deep(.el-table__row:hover > .el-table__cell) {
    background-color: #E5EBFE !important;
}

.reject-reason-box {
    width: 80%;
    padding: 20px;
}

.rejectBtn {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>