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

<template>
    <div class="content">
        <div class="div-card1">
            <el-card class="card1" style="margin-bottom: 0.5vh; min-height: 110px;">
                <div class="row1">
                    <div class="rowItem">
                        <el-text style="width: 4vw;">{{ t('common.jwcode') }}</el-text>
                        <el-input v-model="searchData.jwcode" :placeholder="t('common.jwcodePlaceholder')"
                            style="width:10vw;" clearable></el-input>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">{{ t('common.customerName') }}</el-text>
                        <el-input v-model="searchData.name" :placeholder="t('common.customerNamePlaceholder')"
                            style="width:10vw;" clearable></el-input>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">{{ t('common.market') }}</el-text>
                        <!-- <el-select v-model="searchData.market" placeholder="请选择所属地区" style="width:10vw;" clearable>
                            <el-option v-for="item in market" :key="item" :label="item" :value="item" />
                        </el-select> -->
                        <el-cascader style="width: 9vw;" v-model="searchData.markets" :options="market"
                            :placeholder="t('common.marketPlaceholder')" clearable @change="handleMarketChange" />
                    </div>
                    <!-- 地区财务固定显示付款币种，删除客服的订单状态 -->
                    <div class="rowItem">
                        <el-text style="width: 4vw;">{{ t('common.payCurrency') }}</el-text>
                        <el-select v-model="searchData.paymentCurrency"
                            :placeholder="t('common.payCurrencyPlaceholder')" style="width: 10vw;" clearable>
                            <el-option v-for="item in customOptions" :key="item" :label="item" :value="item" />
                        </el-select>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">{{ t('common.payModel') }}</el-text>
                        <el-select v-model="searchData.payType" :placeholder="t('common.payModelPlaceholder')"
                            style="width: 10vw;" clearable>
                            <el-option v-for="item in paytypeList" :key="item" :label="item" :value="item" />
                        </el-select>
                    </div>
                </div>
                <div class="row2" style="margin-top: 10px;">
                    <div class="left">
                        <div class="rowItem">
                            <el-text style="width: 4vw;">{{ t('common.activityName') }}</el-text>
                            <el-select v-model="searchData.activity" :placeholder="t('common.activityNameChoose')"
                                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;">{{ t('common.productName') }}</el-text>
                            <el-cascader v-model="searchData.goodsName" :options="productList" style="width: 10vw;"
                                clearable />
                        </div>
                        <div class="rowItem" style="width: 25vw">
                            <el-text style="width: 4vw; margin-left: 0.5vw;">{{ t('common.payTime') }}</el-text>
                            <el-date-picker v-model="getTime" type="datetimerange" :range-separator="t('common.to')"
                                :start-placeholder="t('common.startTime')" :end-placeholder="t('common.endTime')"
                                style="width: 22vw; " @change="handleDatePickerChange" :default-time="defaultTime"
                                :disabled-date="disabledDate" />
                        </div>
                    </div>
                    <el-button style="width: 3vw;" type="primary" @click="search">{{ t('common.search') }}</el-button>
                    <el-button style="width: 3vw;" type="success" @click="reset">{{ t('common.reset') }}</el-button>
                    <el-button v-if="activeTab == 'done'" style="width: 5vw;" type="warning" @click="exportExcel()">{{
                        t('common.exportExcel') }}</el-button>
                    <el-button v-if="activeTab == 'done'" style="width: 6vw;" type="primary" @click="openExportList">{{
                        t('common.viewExportList') }}</el-button>
                </div>
            </el-card>
        </div>


        <div class="div-card2">
            <el-card class="card2">
                <div class="btns">
                    <div class="tabs">
                        <el-button-group>
                            <el-button class="btnItem"
                                :style="{ backgroundColor: activeTab === 'pass' ? '#2741DE' : '#E5EBFE', color: activeTab === 'pass' ? 'white' : '#666' }"
                                @click="navigateTo('pass')">
                                {{ t('common.passed') }}
                            </el-button>
                            <el-button class="btnItem"
                                :style="{ backgroundColor: activeTab === 'done' ? '#2741DE' : '#E5EBFE', color: activeTab === 'done' ? 'white' : '#666' }"
                                @click="navigateTo('done')">
                                {{ t('common.completed') }}
                            </el-button>
                        </el-button-group>
                    </div>
                    <div class="info-tooltip">
                        <el-popover placement="top" :title="t('cash.receiveCashDataTitle')" :width="260" trigger="hover"
                            :content="t('cash.receiveCashDataContent')" 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 ref="tableRef" :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="t('common_list.id')" 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="t('common_list.name')" width="110px" />
                        <el-table-column prop="marketName" :label="t('common_list.market')" width="80px" />
                        <el-table-column prop="activity" :label="t('common_list.activity')" width="120px"
                            show-overflow-tooltip />
                        <el-table-column prop="goodsName" :label="t('common_list.productName')" width="120px" />
                        <el-table-column prop="goodNum" :label="t('common_list.productNum')" width="130px">
                            <template #default="scope">
                                <span v-if="scope.row.goodsName == t('cash.coinRecharge')">{{ scope.row.permanentGold
                                    }}</span>
                                <span v-else>{{ scope.row.goodNum }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="paymentCurrency" :label="t('common_list.payCurrency')" width="100px" />
                        <el-table-column prop="paymentAmount" :label="t('common_list.payAmount')" width="120px" />
                        <!-- 总部财务显示到账币种/金额/手续费（已通过/已完成标签页） -->
                        <el-table-column prop="receivedCurrency" :label="t('common_list.receiveCurrency')"
                            v-if="activeTab == 'pass' || activeTab == 'done'" width="150px"></el-table-column>
                        <el-table-column prop="receivedAmount" :label="t('common_list.receiveAmount')"
                            v-if="activeTab == 'pass' || activeTab == 'done'" width="150px">
                            <template #default="scope">
                                <div v-if="!scope.row.receivedAmount">
                                    <text style="color: #FA5A1E;">{{ t('common_list.toSupply') }}</text>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="handlingCharge" :label="t('common_list.fee')"
                            v-if="activeTab == 'pass' || activeTab == 'done'" width="150px">
                            <template #default="scope">
                                <div v-if="scope.row.handlingCharge == null">
                                    <text style="color: #FA5A1E;">{{ t('common_list.toSupply') }}</text>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="payType" :label="t('common_list.payModel')" width="130px" />
                        <el-table-column prop="payTime" :label="t('common_list.payTime')" width="180px" />
                        <el-table-column prop="voucher" :label="t('common_list.transferVoucher')" 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="t('common_list.payVoucher')"
                                        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="t('common_list.submitter')" width="150px"
                            show-overflow-tooltip></el-table-column>
                        <!-- 总部财务显示审核人（已通过/已驳回/已完成标签页） -->
                        <el-table-column prop="auditName" :label="t('common_list.approver')"
                            v-if="activeTab == 'pass' || activeTab == 'reject' || activeTab == 'done'" width="150px"
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="receivedTime" :label="t('common_list.receiveTime')"
                            v-if="activeTab == 'pass' || activeTab == 'done'" width="180px" />
                        <el-table-column prop="remark" :label="t('common_list.remark')" v-if="activeTab != 'reject'"
                            width="150px" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="status" fixed="right" :label="t('common_list.orderStatus')"
                            v-if="activeTab == 'done'" width="150px" show-overflow-tooltip>
                            <template #default="scope">
                                <span style="color: rgb(242, 84, 83);" v-if="scope.row.status == 6">{{
                                    t('common_list.refund') }}</span>
                                <span style="color: rgb(127,204,133);" v-else>{{ t('common_list.normal') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="auditTime" :label="t('common_list.rejectTime')"
                            v-if="activeTab == 'reject'" width="180px" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rejectReason" :label="t('common_list.rejectReason')"
                            v-if="activeTab == 'reject'" width="150px">
                            <template #default="scope">
                                <div class="ellipsis-container"
                                    @mouseenter="handleMouseEnter($event, scope.row.rejectReason)"
                                    @mouseleave="handleMouseLeave" @mousemove="handleMouseMove($event)">
                                    <span class="ellipsis-text">
                                        {{ scope.row.rejectReason || '—' }}
                                    </span>
                                    <!-- 自定义提示框 -->
                                    <div v-if="showTooltip && tooltipContent" class="custom-tooltip" :style="{
                                        left: `${tooltipLeft}px`,
                                        top: `${tooltipTop}px`
                                    }">
                                        {{ tooltipContent }}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <!-- 总部财务表格操作（待审核→审核，已通过→编辑） -->
                        <el-table-column fixed="right" :label="t('common_list.operation')" width="120px"
                            v-if="activeTab != 'reject'">
                            <template #default=scope>
                                <el-link v-if="activeTab == 'wait'" style="color: #2741DE;"
                                    @click="openAuditForm(scope.row)">{{ t('common.audit') }}</el-link>
                                <el-link
                                    v-else-if="activeTab == 'pass' && !(scope.row.status == 6 || scope.row.status == 4)"
                                    style="color: #2741DE;" @click="openEditForm(scope.row)">{{ t('common.edit')
                                    }}</el-link>
                                <el-link
                                    v-else-if="activeTab == 'done' && scope.row.status == 4 && startsWith(scope.row.orderCode, 'GOLDCOIN')"
                                    style="color: rgb(242, 84, 83);" @click="openRefundConfirm(scope.row)">{{
                                    t('common.refund') }}</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="refundConfirmDialog">
            <div class="close">
                <button @click="closeConfirmRefund" class="Btn">{{ t('common.close') }}</button>
            </div>
            <div class="text">
                <text class="txt">{{ textContent }}</text>
            </div>
            <div class="cancle">
                <button @click="closeConfirmRefund" class="Btn">{{ t('common.cancel') }}</button>
            </div>
            <div class="confirm">
                <button @click="openRefundDialog" class="Btn">{{ t('common.confirm') }}</button>
            </div>
        </div>

        <!-- 编辑填手续费弹窗（总部财务核心编辑功能） -->
        <el-dialog class="editdialog" v-model="editFormisible" width="28vw" :before-close="closeEditForm">
            <div class="content">
                <div class="left">
                    <el-form class="editForm" label-width="6vw" label-position="left">
                        <el-form-item :label="t('common_add.jwcode')">
                            <el-input disabled="true" v-model="editFormData.jwcode"
                                :placeholder="t('common_add.jwcode')" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.customerName')">
                            <el-input disabled="true" v-model="editFormData.name"
                                :placeholder="t('common_add.customerName')" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.market')">
                            <el-input disabled="true" v-model="editFormData.marketName"
                                :placeholder="t('common_add.market')" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.activity')">
                            <el-input disabled="true" v-model="editFormData.activity"
                                :placeholder="t('common_add.activity')" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.productName')">
                            <el-select disabled="true" v-model="editFormData.goodsName"
                                :placeholder="t('common_add.productName')" clearable></el-select>
                        </el-form-item>
                        <!-- 金币产品特殊显示 -->
                        <el-form-item v-show="!isEditGold" :label="t('common_add.productNum')">
                            <div style="display: flex;">
                                <el-input disabled="true" style="padding-right: 30px; flex: 3;"
                                    v-model="editFormData.goodNum"
                                    :placeholder="t('common_add.productNumPlaceholder')" />
                                <CurrencySelect disabled="true" v-model="editFormData.numUnit" :items="numUnitList"
                                    style="flex: 1.5;" :placeholder="t('common_add.numUnit')" />
                            </div>
                        </el-form-item>
                        <div v-show="isEditGold" style="margin-bottom: 15px;  display: flex;">
                            <div style=" display: flex; margin-right: 10px;">
                                <span style="color: #999999; display: flex; white-space: nowrap;align-items: center;">{{
                                    t('common_add.permanentGold') }}：</span>
                                <el-input disabled="true"
                                    style="padding-right: 10px; padding-left: 10px; height: 30px; width: 110px;"
                                    v-model="editFormData.permanentGold" />
                            </div>
                            <div style="padding-right: 5px; display: flex;">
                                <span style="color: #999999; display: flex; white-space: nowrap;align-items: center;">{{
                                    t('common_add.freeGold') }}：</span>
                                <el-input disabled="true"
                                    style="padding-right: 10px; padding-left: 10px; height: 30px; width: 110px;"
                                    v-model="editFormData.freeGold" />
                            </div>
                        </div>
                        <el-form-item :label="t('common_add.payCurrency')">
                            <CurrencySelect :disabled="!ifOnline" v-model="editFormData.paymentCurrency"
                                :items="customOptions" :placeholder="t('common_add.payCurrencyPlaceholder')" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.payAmount')">
                            <el-input :disabled="!ifOnline" v-model="editFormData.paymentAmount"
                                :placeholder="t('common_add.payAmountPlaceholder')" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.payMethod')">
                            <el-select disabled="true" v-model="editFormData.payType"
                                :placeholder="t('common_add.payMethodPlaceholder')" clearable></el-select>
                        </el-form-item>
                        <el-form-item :label="t('common_add.receiveArea')">
                            <el-select disabled="true" v-model="editFormData.receivedMarket"
                                :placeholder="t('common_add.receiveAreaPlaceholder')" clearable></el-select>
                        </el-form-item>
                        <el-form-item :label="t('common_add.payTime')">
                            <el-date-picker disabled="true" type="datetime" v-model="editFormData.payTime"
                                :placeholder="t('common_add.payTimePlaceholder')" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.transferVoucher')">
                            <div class="pic">
                                <el-upload disabled="true" 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="editFormData.voucher" :src="editFormData.voucher" class="avatar"
                                        style="height: 100%; width: 100%;  object-fit: cover;" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                                <el-text class="picText">{{ t('common_add.transferVoucherPlaceholder') }}</el-text>
                            </div>
                        </el-form-item>
                        <el-form-item :label="t('common_add.remark')">
                            <el-input disabled="true" v-model="editFormData.remark" type="textarea" :rows="4"
                                :placeholder="t('common_add.remark')" maxlength="100" show-word-limit />
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right">
                    <!-- 总部财务可编辑项：仅到账相关信息 -->
                    <el-form ref="editFormRef" :rules="editFormRule" :model="editFormData" class="editFormRighrt"
                        label-width="6vw" label-position="left">
                        <el-form-item :label="t('common_add.receiveCurrency')" required>
                            <CurrencySelect v-model="editFormData.receivedCurrency" :items="customOptions"
                                :placeholder="t('common_add.receiveCurrencyPlaceholder')" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.receiveAmount')" prop="receivedAmount">
                            <el-input v-model="editFormData.receivedAmount"
                                :placeholder="t('common_add.receiveAmountPlaceholder')" type="number" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.fee')" prop="handlingCharge">
                            <el-input v-model="editFormData.handlingCharge"
                                :placeholder="t('common_add.feePlaceholder')" type="number" />
                        </el-form-item>
                        <el-form-item :label="t('common_add.receiveTime')" required>
                            <el-date-picker type="datetime" v-model="editFormData.receivedTime"
                                :placeholder="t('common_add.receiveTimePlaceholder')" />
                        </el-form-item>
                    </el-form>
                    <span class="editBtns">
                        <button class="editBtn1" @click="closeEditForm">
                            <text class="txt">{{ t('common.cancel') }}</text>
                        </button>
                        <button class="editBtn2" @click="throttledsubmitEditForm">
                            <text class="txt">{{ t('common.submit') }}</text>
                        </button>
                    </span>
                </div>
            </div>
        </el-dialog>

        <!-- 新增退款 -->
        <el-dialog v-model="refundDialog" :title="t('common_add.refund')" class="refundDialog" overflow draggable
            style="width: 880px; max-width: 90vw;" :before-close="closeRefundForm">
            <div class="refund-dialog-body">
                <div class="left">
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.jwcode') }}</el-text>
                        <el-input v-model="refundFormData.jwcode" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.customerName') }}</el-text>
                        <el-input v-model="refundFormData.name" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.market') }}</el-text>
                        <el-input v-model="refundFormData.marketName" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.activity') }}</el-text>
                        <el-input v-model="refundFormData.activity" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.productName') }}</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;">{{ t('common_add.productNum') }}</el-text>
                        <div class="product-num-row refund-product-num-row">
                            <el-input class="product-num-input refund-product-num-input" v-model="refundFormData.goodNum"
                                :placeholder="t('common_add.productNumPlaceholder')" disabled />
                            <CurrencySelect disabled v-model="refundFormData.numUnit" :items="numUnitList"
                                class="product-unit-select refund-product-unit-select" :placeholder="t('common_add.numUnit')" />
                        </div>
                    </div>
                    <div v-show="isRefundGold" style="display: flex; margin-bottom: 10px;">
                        <div style=" display: flex; align-items: center;justify-content: center; ">
                            <span style="color: #999999;  white-space: nowrap;">{{ t('common_add.permanentGold')
                                }}：</span>
                            <el-input style="padding-right: 10px;  height: 30px; width: 70px;"
                                v-model="refundFormData.permanentGold" disabled />
                        </div>
                        <div style=" display: flex; align-items: center;justify-content: center; ">
                            <span style="color: #999999;  white-space: nowrap;">{{ t('common_add.freeGold') }}：</span>
                            <el-input style="padding-right: 10px;  height: 30px; width: 70px;"
                                v-model="refundFormData.freeGold" disabled />
                        </div>
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.payCurrency') }}</el-text>
                        <el-input v-model="refundFormData.paymentCurrency" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.payAmount') }}</el-text>
                        <el-input v-model="refundFormData.paymentAmount" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.payMethod') }}</el-text>
                        <el-input v-model="refundFormData.payType" style="width:10vw;" disabled />
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.payTime') }}</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">{{ t('common_add.transferVoucher') }}</el-text>
                        <el-form-item
                            :rules="{ required: true, message: t('common_add.uploadPhoto'), 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;">{{ t('common_add.remark') }}</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;">{{ t('common_add.refundModel') }}</el-text>
                        <el-radio-group v-model="refundFormData.refundModel">
                            <el-radio value="0">{{ t('common_add.refundModelAll') }}</el-radio>
                            <el-radio value="1">{{ t('common_add.refundModelPart') }}</el-radio>
                        </el-radio-group>
                    </div>
                    <div v-show="refundFormData.refundModel == '1'" style="display: flex; margin-bottom: 10px;">
                        <div style=" display: flex; align-items: center;justify-content: center; ">
                            <span style="color: #999999;  white-space: nowrap;">{{ t('common_add.permanentGold')
                                }}：</span>
                            <el-input style="padding-right: 10px;  height: 30px; width: 70px;"
                                v-model="refundFormData.partRefundGold" disabled />
                        </div>
                        <div style=" display: flex; align-items: center;justify-content: center; ">
                            <span style="color: #999999;  white-space: nowrap;">{{ t('common_add.freeGold') }}：</span>
                            <el-input style="padding-right: 10px;  height: 30px; width: 70px;"
                                v-model="refundFormData.partRefundFree" />
                        </div>
                    </div>
                    <div class="add-item">
                        <el-text style="width:4vw;">{{ t('common_add.refundReason') }}</el-text>
                        <el-input v-model="refundFormData.refundReason" style="width:10vw;" :rows="5" maxlength="150"
                            show-word-limit type="textarea" />
                    </div>
                    <div>{{ t('common_add.tip') }}</div>
                    <div style="display:flex;justify-content: center;margin-top: 5vh;">
                        <el-button type="default" @click="resetRefund">{{ t('common.reset') }}</el-button>
                        <el-button type="primary" @click="throttledsubmitRefund">{{ t('common.submit') }}</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>


        <!-- 导出列表 -->
        <el-dialog v-model="exportListVisible" :title="t('common_export.exportList')" width="60vw">
            <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
                <el-table-column prop="fileName" :label="t('common_export.fileName')" />
                <el-table-column prop="state" :label="t('common_export.status')">
                    <template #default="scope">
                        <el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'">
                            {{ getTagText(scope.row.state) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" :label="t('common_export.createTime')">
                    <template #default="scope">
                        {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column :label="t('common_export.operation')">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="downloadExportFile(scope.row)"
                            :disabled="scope.row.state !== 2">
                            {{ t('common_export.download') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button text @click="exportListVisible = false">{{ t('common_export.close') }}</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
// 仅导入总部财务所需依赖
import { ref, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
import { storeToRefs } from 'pinia';
import { ElMessage, ElMessageBox } from 'element-plus';
import API from '@/util/http.js';
import request from '@/util/http.js';
import moment from 'moment';
import _ from 'lodash';
import { Plus } from '@element-plus/icons-vue';
import { startsWith } from './utils/util.js'
import { isNumber } from 'lodash'
// 筛选地区树
const market = ref([])

// 总部财务专属组件
import CurrencySelect from '@/components/MoneyManage/CurrencySelect.vue';

// 静态数据与规则（仅保留必要项）
import { editFormRule } from './utils/recriveFormRules.js';
import { productList, MarketNameForId, CurrencyForId, marketList, normalizeSubmitterMarket } from './utils/staticData.js';
import { useAdminStore } from '@/store/index.js';
import { hasMenuPermission } from '@/utils/menuTreePermission.js';

// 国际化
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

// ===================== 1. 核心状态管理（仅总部财务） =====================
const adminStore = useAdminStore();
const { menuTree } = storeToRefs(adminStore);



// 表格与分页数据
const tableData = ref([]);
const total = ref(0);
const pageInfo = ref({ pageSize: 10, pageNum: 1 });
const tableRef = ref(null)
const scrollTableTop = () => {
    tableRef.value?.setScrollTop?.(0)
}

// 搜索条件
const searchData = ref({});
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)];
const getTime = ref([]);

// 标签页
const activeTab = ref('pass');



// 编辑弹窗状态
const editFormisible = ref(false);
const editFormData = ref({});
const editFormRef = ref(null);
const isEditGold = ref(false); // 金币产品标记
const ifOnline = ref(false); // 在线支付标记

// 辅助状态：图片上传、悬浮提示
const uploadRef = ref(null);
const showTooltip = ref(false);
const tooltipContent = ref('');
const tooltipLeft = ref(0);
const tooltipTop = ref(0);

// 退款确认弹窗
const refundConfirmDialog = ref(false)
const textContent = ref('')


//退款弹窗
const refundDialog = ref(false)
const refundFormData = ref({})

const openRefundDialog = () => {
    refundDialog.value = true
    closeConfirmRefund()

}
const closeRefundForm = () => {
    refundDialog.value = false
    refundFormData.value = {}
}

const isRefundGold = ref(false)
const ifRefundGold = () => {
    if (refundFormData.value.goodsName === t('cash.coinRecharge')) {
        isRefundGold.value = true
        refundFormData.value.goodNum = 0
    } else {
        isRefundGold.value = false
    }
}


//导出相关
const exportListVisible = ref(false)
const EXPORT_LIST_POLL_INTERVAL = 3000
let exportListPollingTimer = null
const exportList = ref([])
const exportListLoading = ref(false)
const exportListRequesting = ref(false)

const sortExportList = (list = []) => {
  return [...list].sort((a, b) => {
    return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
  })
}

const hasPendingExportTask = (list = []) => {
  const latestTask = sortExportList(list)[0]
  return latestTask ? latestTask.state === 0 || latestTask.state === 1 : false
}

const stopExportListPolling = () => {
  if (exportListPollingTimer) {
    clearInterval(exportListPollingTimer)
    exportListPollingTimer = null
  }
}

const startExportListPolling = () => {
  if (exportListPollingTimer) {
    return
  }
  exportListPollingTimer = setInterval(() => {
    if (!exportListVisible.value) {
      stopExportListPolling()
      return
    }
    getExportList({ showLoading: false, silentError: true })
  }, EXPORT_LIST_POLL_INTERVAL)
}
const exportExcel = async function () {

    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];
    }

    // 处理付款币种（转ID）
    if (searchData.value.paymentCurrency) {
        payCurrencySelect = CurrencyForId(searchData.value.paymentCurrency);
    }

    // if (searchData.value.jwcode && !isNumber(searchData.value.jwcode)) {
    //     ElMessage.error('精网号只能是数字')
    //     return
    // }

    const cashRoleId = '2';
    const submitterMarket = normalizeSubmitterMarket(adminData.value.markets);
    searchData.value.status = 46;
    const params = {
        ...pageInfo.value,
        cashCollection: {
            ...searchData.value,
            submitterId: adminData.value.id,
            receivedMarket: MarketNameForId(submitterMarket),
            cashRoleId: cashRoleId,
            paymentCurrency: payCurrencySelect,
            submitterMarket: submitterMarket,
            goodsName: goodsName,
            market: MarketNameForId(searchData.value.market)
        }
    }

    const res = await API({ url: '/export/exportCash', data: params })
    if (res.code === 200) {
        ElMessage.success(t('elmessage.exportSuccess'))
    } else {
        ElMessage.error(res.msg || t('elmessage.exportFailed'))
    }
}

const openExportList = () => {
  exportListVisible.value = true
}
//获取导出列表
const getExportList = async ({ showLoading = true, silentError = false } = {}) => {
        if (exportListRequesting.value) {
          return
        }
        if (showLoading) {
          exportListLoading.value = true
        }
        exportListRequesting.value = true
        try {
          const result = await API({ url: '/export/export' })
          if (result.code === 200) {
            const filteredData = result.data.filter(item => {
                return item.type === 13
            })
            exportList.value = sortExportList(filteredData)
            if (exportListVisible.value && hasPendingExportTask(exportList.value)) {
              startExportListPolling()
            } else {
              stopExportListPolling()
            }
          } else {
            stopExportListPolling()
            if (!silentError) {
              ElMessage.error(result.msg || t('elmessage.getExportListError'))
            }
          }
        } catch (error) {
          console.error('获取导出列表出错:', error)
          stopExportListPolling()
          if (!silentError) {
            ElMessage.error(t('elmessage.getExportListError'))
          }
        } finally {
          exportListRequesting.value = false
          if (showLoading) {
            exportListLoading.value = false
          }
        }
}
const downloadExportFile = (item) => {
    if (item.state === 2) {
        const link = document.createElement('a')
        link.href = item.url
        link.download = item.fileName
        link.click()
    } else {
        ElMessage.warning(t('elmessage.exportingInProgress'))
    }
}
//根据状态返回对应的标签类型
const getTagType = (state) => {
    switch (state) {
        case 0:
            return 'info';
        case 1:
            return 'primary';
        case 2:
            return 'success';
        case 3:
            return 'danger';
        default:
            return 'info';
    }
}
//根据状态返回对应的标签文案
const getTagText = (state) => {
    switch (state) {
        case 0:
            return t('elmessage.pendingExecution');
        case 1:
            return t('elmessage.executing');
        case 2:
            return t('elmessage.executed');
        case 3:
            return t('elmessage.errorExecution');
        default:
            return t('elmessage.unknownStatus');
    }
}


// 基础数据
const adminData = ref({});
const activityList = ref([]);
// 付款币种和支付方式选项（客服专用）
const customOptions = ref([
    t('cash.currency.usd'),   // 美元(USD)
    t('cash.currency.hkd'),   // 港币(HKD)
    t('cash.currency.sgd'),   // 新币(SGD)
    t('cash.currency.myr'),   // 马币(MYR)
    t('cash.currency.thb'),   // 泰铢(THB)
    t('cash.currency.cad'),   // 加币(CAD)
    t('cash.currency.vnd'),   // 越南盾(VND)
    t('cash.currency.krw')    // 韩元(KRW)
])
// 支付类型选项 - 使用cash.payMethods下的键名
const paytypeList = ref([
    t('cash.payMethods.stripe'),      // Stripe
    t('cash.payMethods.paymentAsia'), // PaymentAsia
    t('cash.payMethods.ipay88'),      // Ipay88
    t('cash.payMethods.grabpay'),     // Grabpay
    t('cash.payMethods.nets'),        // Nets
    t('cash.payMethods.transfer'),    // E-Transfer
    t('cash.payMethods.iotPay'),      // IOT Pay
    t('cash.payMethods.stripe3'),     // Stripe3
    t('cash.payMethods.paypal'),      // PayPal
    t('cash.payMethods.bankTransfer'),// 银行转账
    t('cash.payMethods.card'),        // 刷卡
    t('cash.payMethods.cash'),        // 现金
    t('cash.payMethods.check')        // 支票
])
const paytypeOptions = ref([...paytypeList.value]);

// ===================== 2. 核心功能函数（仅总部财务） =====================

//确认退款弹窗
const openRefundConfirm = (row) => {
    textContent.value = t('common.willRefundOrder')
    refundConfirmDialog.value = true
    refundFormData.value = { ...row }
    ifRefundGold()
    console.log(row);

}

const closeConfirmRefund = () => {
    refundConfirmDialog.value = false
    textContent.value = ''
}


// 2.1 数据加载：获取总部财务订单列表
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];
        }

        // 处理付款币种（转ID）
        if (searchData.value.paymentCurrency) {
            payCurrencySelect = CurrencyForId(searchData.value.paymentCurrency);
        }

        // 总部财务固定参数：角色ID=1，按标签页筛选状态
        const cashRoleId = '2';
        const receivedMarket = adminData.value.markets;
        if (activeTab.value === 'pass') searchData.value.status = 13;
        else if (activeTab.value === 'done') searchData.value.status = 46;

        // 地区处理
        const markets = ref(null)
        if (searchData.value.markets) {
            markets.value = searchData.value.markets[searchData.value.markets.length - 1]
            console.log('地区转换', markets.value)
        }
        if (searchData.value.jwcode) {
            const isPositiveInteger = /^[1-9]\d*$/.test(searchData.value.jwcode);
            if (!isPositiveInteger) {
                ElMessage.error(t('elmessage.checkJwcodeFormat'))
                return;
            }
            // 添加长度验证，超过8位提示错误
            if (searchData.value.jwcode.length > 8) {
                ElMessage.error(t('elmessage.limitJwcodeLength'))
                return;
            }
        }

        // if (searchData.value.jwcode && !isNumber(searchData.value.jwcode)) {
        //     ElMessage.error('精网号只能是数字')
        //     return
        // }

        const result = await request({
            url: '/cashCollection/selectCollection',
            data: {
                ...pageInfo.value,
                cashCollection: {
                    ...searchData.value,
                    submitterId: adminData.value.id,
                    receivedMarket: MarketNameForId(receivedMarket),
                    cashRoleId: cashRoleId,
                    paymentCurrency: payCurrencySelect,
                    submitterMarket: normalizeSubmitterMarket(receivedMarket),
                    goodsName: goodsName,
                    //market: MarketNameForId(searchData.value.market)
                    market: markets.value
                }
            }
        });

        if (result.code === 200) {
            tableData.value = result.data.list;
            await nextTick()
            scrollTableTop()
            total.value = result.data.total;
        } else {
            ElMessage.error(t('elmessage.orderDataLoadFailed'));
        }
    } catch (error) {
        console.error('总部财务订单列表请求异常：', error);
        ElMessage.error(t('elmessage.inNetworkError'));
    }
};

//重置退款
const resetRefund = () => {
    refundFormData.value.refundModel = ''
    refundFormData.value.refundReason = ''
}
//提交退款
const submitRefund = async () => {
    try {
        if (refundFormData.value.goodsName != t('cash.coinRecharge')) {
            return ElMessage.error(t('elmessage.onlineDataSupport'));
        }
        if (!refundFormData.value.refundModel) {
            return ElMessage.error(t('elmessage.selectRefundModel'));
        }
        if (!refundFormData.value.refundReason) {
            return ElMessage.error(t('elmessage.refundReasonPlaceholder'));
        }
        // 添加精网号验证
        if (refundFormData.value.jwcode) {
            const isPositiveInteger = /^[1-9]\d*$/.test(refundFormData.value.jwcode);
            if (!isPositiveInteger) {
                return ElMessage.error(t('elmessage.jwcodePositiveError'));
            }
            if (refundFormData.value.jwcode.length > 8) {
                return ElMessage.error(t('elmessage.limitJwcodeLength'));
            }
        }
        if (refundFormData.value.refundModel == 0) {
            refundFormData.value.partRefundGold = refundFormData.value.permanentGold,
                refundFormData.value.partRefundFree = refundFormData.value.freeGold
        }
        const result = await request({
            url: '/Money/addOnline',
            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,
                id: 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,
            }
        })
        if (result.code == 200) {
            ElMessage.success(t('elmessage.addRefundSuccess'))
            getlist()
            closeRefundForm()
        } else {
            ElMessage.error(result.msg)
            getlist()
        }
        console.log('返回参数：', result);
    } catch (error) {
        console.log(error);
    }
}

// 2.2 搜索与重置
const search = () => {
    getlist();
};

const reset = () => {
    searchData.value = {};
    // 重置页码
    pageInfo.value.pageNum = 1;
    getlist();
};

// 2.3 标签页切换
const navigateTo = async (tab) => {
    activeTab.value = tab;
    await getlist();
};

// 2.4 审核功能
// 打开审核弹窗
const openAuditForm = (row) => {
    auditFormData.value = { ...row, market: row.marketName };
    ifGold(auditFormData.value)
    console.log('isGold', isGold.value);

    auditFormisible.value = true;
};

// 关闭审核弹窗
const closeAuditForm = () => {
    ifReject.value = false;
    auditFormisible.value = false;
    auditFormData.value = {};
};

// 审核通过
const handelAudit = async () => {
    try {
        const result = await request({
            url: '/cashAudit/collectionAudit',
            data: {
                orderCode: auditFormData.value.orderCode,
                action: 1,
                auditId: adminData.value.id
            }
        });

        if (result.code === 200) {
            ElMessage.success(t('elmessage.approveSuccess'));
            getlist();
            closeAuditForm();
        } else {
            ElMessage.error(result.msg || t('elmessage.approveFailed'));
        }
    } catch (error) {
        console.error('审核通过请求异常：', error);
        ElMessage.error(t('elmessage.inNetworkError'));
    }
};

//判断产品类型
const isGold = ref(false)
const ifGold = (data) => {
    console.log('data', data);
    if (data.goodsName === t('cash.coinRecharge')) {
        isGold.value = true
    } else {
        isGold.value = false
    }
}

// 2.5 编辑手续费功能
// 打开编辑弹窗
const openEditForm = (row) => {
    editFormData.value = { ...row };
    // 区分金币产品与普通产品
    if (row.goodsName === t('cash.coinRecharge')) isEditGold.value = true;
    else isEditGold.value = false;
    // 在线支付订单允许修改付款信息
    if (row.status === 3) ifOnline.value = true;
    else ifOnline.value = false;

    editFormisible.value = true;
};

// 关闭编辑弹窗
const closeEditForm = () => {
    editFormisible.value = false;
    editFormData.value = {};
    editFormRef.value.resetFields();
};

// 提交编辑（补充手续费）
const submitEditForm = async () => {
    try {
        await editFormRef.value.validate();

        if (editFormData.value.paymentCurrency != editFormData.value.receivedCurrency) {
            ElMessage.error(t('elmessage.currencyMismatch'))
            return
        }

        // 处理时间格式
        if (editFormData.value.receivedTime) {
            editFormData.value.receivedTime = moment(editFormData.value.receivedTime).format('YYYY-MM-DD HH:mm:ss');
        }

        const result = await request({
            url: '/cashCollection/complete',
            data: {
                orderCode: editFormData.value.orderCode,
                handlingCharge: editFormData.value.handlingCharge * 100 || null, // 转为分单位
                paymentCurrency: CurrencyForId(editFormData.value.paymentCurrency),
                paymentAmount: editFormData.value.paymentAmount * 100, // 转为分单位
                receivedCurrency: CurrencyForId(editFormData.value.receivedCurrency),
                receivedAmount: editFormData.value.receivedAmount * 100 || null, // 转为分单位
                receivedTime: editFormData.value.receivedTime,
                receivedRemark: editFormData.value.receivedRemark || ''
            }
        });

        if (result.code === 200) {
            ElMessage.success(t('elmessage.editSuccess'));
            getlist();
            closeEditForm();
        } else {
            ElMessage.error(result.msg || t('elmessage.editFailed'));
        }
    } catch (error) {
        console.error('编辑提交请求异常：', error);
        ElMessage.error(t('elmessage.formValidationFailed'));
    }
};

// 2.6 辅助功能
// 图片预览
const previewImage = (imageUrl) => {
    if (!imageUrl) return;

    const imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    imageElement.style.maxWidth = '80vw';
    imageElement.style.maxHeight = '80vh';
    imageElement.style.objectFit = 'contain';

    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.appendChild(imageElement);

    // 点击关闭预览
    viewer.addEventListener('click', () => {
        document.body.removeChild(viewer);
    });

    document.body.appendChild(viewer);
};
// 2.7 基础数据加载（初始化）
// 获取管理员信息
const getAdminData = async () => {
    try {
        const result = await API({ url: '/admin/userinfo', data: {} });
        adminData.value = result;

        // 超级管理员判断（仅用于角色切换权限）
        // if (adminData.value.roleId === 2) {
        //     // 管理员所属地区提示
        //     if (adminData.value.markets === '总部' || adminData.value.markets === '研发部') {
        //         ElMessageBox.alert(
        //             '管理员账号仅显示所属地区的财务数据，请确认地区设置',
        //             '温馨提示',
        //             { type: 'warning' }
        //         );
        //     }
        // }
    } catch (error) {
        console.error('管理员信息获取失败：', error);
        ElMessage.error(t('elmessage.adminInfoLoadFailed'));
    }
};

// 获取活动列表
const getActivitys = async () => {
    try {
        const result = await API({ url: '/cashCollection/getActivityList', data: {} });
        if (result.code === 200) {
            activityList.value = result.data;
        } else {
            ElMessage.error(t('elmessage.activityLoadFailed'));
        }
    } catch (error) {
        console.error('活动列表获取失败：', error);
        ElMessage.error(t('elmessage.activityDataLoadFailed'));
    }
};

// 2.8 节流函数（防止重复提交）
const throttledsubmitEditForm = _.throttle(submitEditForm, 3000, { trailing: false });
const throttledsubmitRefund = _.throttle(submitRefund, 5000, {
    trailing: false
})
// 2.9 页面初始化
onMounted(async () => {
    await getAdminData();
    await getActivitys();
    // 初始化加载总部财务订单数据
    await getlist();

    // 菜单权限校验（确保总部财务权限）
    if (!hasMenuPermission(menuTree.value, 91)) {
        ElMessageBox.alert(
            t('elmessage.noPermissionText'),
            t('elmessage.permissionPrompt'),
            { type: 'error' }
        ).then(() => {
            window.history.back();
        });
    }
    //背景预加载
    const bgImg = new Image();
    bgImg.src = '/src/assets/receive-recall.png';
    getMarket()
});

// 2.10 未使用函数占位（避免报错）
const beforeUpload = () => true;
const handelImgErr = () => { };
const handleImageChange = () => { };
const customUpload = () => { };
const handleDatePickerChange = () => { };
const disabledDate = () => false;
const handleSortChange = () => { };
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)
    }
}
const handlePagination = (type, val) => {
    if (type === 'size') pageInfo.value.pageSize = val;
    else pageInfo.value.pageNum = val;
    getlist();
};
watch(exportListVisible, (visible) => {
  if (visible) {
    getExportList()
  } else {
    stopExportListPolling()
  }
})

onBeforeUnmount(() => {
  stopExportListPolling()
})

</script>

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

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

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

        el-button {
            margin-left: 10px;
        }

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

        .row2 {
            height: 4vh;
            width: 80vw;
            display: flex;
            align-items: center;

            min-height: 40px;

            .left {
                height: 4vh;
                width: 58vw;
                display: flex;
                min-height: 40px;
            }
        }
    }


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

        .card2 {
            background: #E7F4FD;
        }

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

            .tabs {
                min-width: 300px;

                .btnItem {
                    margin-left: 10px;
                    border-radius: 5px;
                }
            }

            .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;
        }
    }

    :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;
        }
    }

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

        .editForm {
            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;
                }
            }
        }

        .content {
            display: flex;
            height: 100%;
            width: 100%;

            .left {
                min-width: 500px;
            }

            .right {
                flex: 1;

                .editFormRighrt {
                    padding: 0 60px 0 40px;

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

                .editBtns {
                    display: flex;
                    justify-content: center;
                    margin-top: 60px;

                    .txt {
                        color: #f3fafe;
                        text-align: center;
                        font-family: "PingFang SC";
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 22px;
                    }

                    .editBtn1 {
                        min-width: 80px;
                        padding: 5px 12px;
                        justify-content: center;
                        align-items: center;
                        gap: 4px;
                        border-radius: 4px;
                        background: #7E91FF;
                        border: none;
                        box-shadow: 0 0 4px 0 #00000040;
                    }

                    .editBtn2 {
                        display: flex;
                        width: 80px;
                        min-width: 80px;
                        padding: 5px 12px;
                        justify-content: center;
                        align-items: center;
                        gap: 4px;
                        border-radius: 4px;
                        background: #2741DE;
                        border: none;
                        box-shadow: 0 0 4px 0 #00000040;
                        margin-left: 60px;
                    }
                }
            }
        }
    }

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

    .refundDialog {
        .refund-dialog-body {
            display: flex;
            gap: 24px;
        }

        .left {
            flex: 1;
            min-width: 0;
            height: 70vh;
            min-height: 700px;
            padding: 0 12px 0 0;

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

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

        .right {
            flex: 1;
            min-width: 0;
            height: 50vh;

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

        .add-item>span,
        .add-item>.el-text {
            width: 110px !important;
            min-width: 110px;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .add-item>.el-input,
        .add-item>.el-date-editor,
        .add-item>.el-form-item,
        .add-item>.el-radio-group {
            flex: 1;
            min-width: 0;
        }
    }

    .product-num-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .product-num-input {
        flex: 1;
        min-width: 0;
        padding-right: 0;
    }

    .product-unit-select {
        width: 92px;
        min-width: 92px;
        flex: 0 0 92px;
    }

    .refund-product-num-row {
        width: 100%;
        max-width: 260px;
        min-width: 220px;
    }

    .refund-product-num-input {
        min-width: 0;
    }

    .refund-product-unit-select {
        width: 96px;
        min-width: 96px;
        flex: 0 0 96px;
    }
}

// 表格样式统一
: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 {
    --el-message-box-height: 500px;
}

.reject-reason-box .el-message-box__content {
    max-height: 350px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.recallDialog {
    //撤回弹窗提示
    height: 392px;
    width: 700px;
    background-image: url('/src/assets/receive-recall.png');
    position: fixed; // 固定定位，相对于浏览器窗口
    top: 50%; // 距离顶部50%
    left: 50%; // 距离左侧50%
    transform: translate(-50%, -50%); // 向左、向上平移自身宽高的50%，实现居中
    z-index: 1000; // 确保在其他元素上层显示

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

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

    .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;
        opacity: 0;

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

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

        .Btn {
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
    }
}
</style>