<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 placeholder="请输入精网号" style="width:10vw;" clearable></el-input>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">客户姓名</el-text>
                        <el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">所属地区</el-text>
                        <el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">订单状态</el-text>
                        <el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">支付方式</el-text>
                        <el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select>
                    </div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="rowItem">
                        <el-text style="width: 4vw;">活动名称</el-text>
                        <el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">产品名称</el-text>
                        <el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select>
                    </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>
                <div class="row" style="margin-top: 10px;">
                    <div class="buttons">
                        <el-button type="primary">查询</el-button>
                        <el-button type="success">重置</el-button>
                        <el-button type="primary">导出excel</el-button>
                        <el-button type="primary" style="background-color: #5870FF;">导出列表</el-button>
                        <el-button type="primary" @click="checkKefu">切换客服</el-button>
                        <el-button type="success" @click="checkCaiwu">切换财务</el-button>
                    </div>
                </div>
            </el-card>
        </div>


        <div class="div-card2">
            <el-card class="card2">
                <div class="btns">
                    <div class="tabs" v-if="caiwu">
                        <el-button-group>
                            <el-button class="btnItem"
                                :style="{ backgroundColor: activeTab === 'wait' ? '#2741DE' : '#E5EBFE', color: activeTab === 'wait' ? 'white' : '#666' }"
                                @click="navigateTo('wait')">
                                待审核
                            </el-button>
                            <el-button class="btnItem"
                                :style="{ backgroundColor: activeTab === 'pass' ? '#2741DE' : '#E5EBFE', color: activeTab === 'pass' ? 'white' : '#666' }"
                                @click="navigateTo('pass')">
                                已通过
                            </el-button>
                            <el-button class="btnItem"
                                :style="{ backgroundColor: activeTab === 'reject' ? '#2741DE' : '#E5EBFE', color: activeTab === 'reject' ? 'white' : '#666' }"
                                @click="navigateTo('reject')">
                                已驳回
                            </el-button>
                        </el-button-group>
                    </div>
                    <div class="btnAdd">
                        <el-button @click="openAddForm" type="success" v-if="kefu">添加收款</el-button>
                    </div>
                </div>

                <div class="table">
                    <el-table :data="tableData" style="width: 80vw;height:54vh;" @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="market" label="所属地区" width="80px" />
                        <el-table-column prop="activity" label="活动名称" width="120px" />
                        <el-table-column prop="rateName" label="产品名称" width="120px" />
                        <el-table-column prop="rateNum" label="产品数量" width="120px" />
                        <el-table-column prop="moneyType" label="付款币种" width="100px">
                        </el-table-column>
                        <el-table-column prop="permanentGold" label="付款金额" width="120px">
                        </el-table-column>
                        <el-table-column prop="getMoneyType" label="到账币种" v-if="caiwu && activeTab == 'pass'"
                            width="150px"></el-table-column>
                        <el-table-column prop="getMoney" label="到账金额" v-if="caiwu && activeTab == 'pass'" width="150px">
                            <template #default="scope">
                                <div v-if="!scope.row.getMoney">
                                    <text style="color: #FA5A1E;">待补充</text>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="shouxufei" label="手续费" v-if="caiwu && activeTab == 'pass'" width="150px">
                            <template #default="scope">
                                <div v-if="!scope.row.shouxufei">
                                    <text style="color: #FA5A1E;">待补充</text>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pastType" label="支付方式" width="110px">
                        </el-table-column>
                        <el-table-column prop="remark" label="付款时间" width="100px" />
                        <el-table-column prop="payModel" 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.payModel" 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="bankOrder" label="银行流水订单号" v-if="caiwu && activeTab == 'pass'"
                            width="150px" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="submiter" label="提交人" width="150px"
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="auditor" label="审核人" v-if="caiwu && activeTab == 'pass' || 'reject'"
                            width="150px" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="mask" label="备注" v-if="activeTab != 'reject'" width="150px"
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rejectTime" label="驳回时间" v-if="activeTab == 'reject' && !kefu"
                            width="150px" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rejectReason" label="驳回理由" v-if="activeTab == 'reject' && !kefu"
                            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 prop="getMoneyTime" label="到账时间" v-if="caiwu && activeTab == 'pass'"
                            width="150px">
                        </el-table-column>
                        <el-table-column v-if="kefu" fixed="right" prop="orderStatus" label="订单状态" width="100px" />
                        <el-table-column fixed="right" label="操作" width="100px" v-if="activeTab != 'reject'">
                            <template #default=scope>
                                <span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;"
                                    @click="openRecall('refund')">退款</span>
                                <span v-else-if="kefu && scope.row.orderStatus == '已撤回'" style="color: #2741DE;"
                                    @click="openAddForm(scope.row)">编辑</span>
                                <span v-else-if="kefu && scope.row.orderStatus == '待审核'" style="color: #FA5A1E;"
                                    @click="openRecall('recall')">撤回</span>
                                <span v-else-if="activeTab == 'wait' && !kefu" style="color: #2741DE;"
                                    @click="openAuditForm">审核</span>
                                <span v-else-if="activeTab == 'pass' && !kefu" style="color: #2741DE;"
                                    @click="openEditForm(scope.row)">编辑</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination">
                    <el-pagination :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 class="Btn">确定</button>
            </div>
        </div>
        <el-dialog class="adddialog" v-model="addFormisible" width="20vw" :before-close="closeAddForm">
            <el-form class="addForm" label-width="4vw" label-position="left">
                <el-form-item label="精网号" required>
                    <el-input v-model="addFormData.jwcode" placeholder="请输入精网号" />
                </el-form-item>
                <el-form-item label="客户姓名" required>
                    <el-input v-model="addFormData.userName" placeholder="请输入客户姓名" />
                </el-form-item>
                <el-form-item label="所属地区" required>
                    <el-input disabled="true" v-model="addFormData.market" placeholder="请输入所属地区" />
                </el-form-item>
                <el-form-item label="活动名称" required>
                    <el-input v-model="addFormData.jwcode" placeholder="请输入活动名称" />
                </el-form-item>
                <el-form-item label="产品名称" required>
                   <ProductSelect></ProductSelect>
                </el-form-item>
                <el-form-item label="产品数量" required>
                    <div style="padding-right: 50px; display: flex;">
                        <el-input style="padding-right: 10px;" v-model="addFormData.rateNum" placeholder="请输入产品数量" />
                        <span style="color: #999999;">个</span>
                    </div>
                </el-form-item>
                <el-form-item label="付款币种" required>
                    <CurrencySelect v-model="addFormData.moneytype" :items="customOptions" placeholder="请选择付款币种"
                        @change="handleCurrencyChange" />
                </el-form-item>
                <el-form-item label="付款金额" required>
                    <el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" />
                </el-form-item>
                <el-form-item label="支付方式" required>
                    <CurrencySelect v-model="addFormData.paytype" :items="paytypeOptions" placeholder="请选择支付方式">
                    </CurrencySelect>
                </el-form-item>
                <el-form-item label="到账地区" required>
                    <CurrencySelect v-model="addFormData.MoneyAddress" :items="MoneyAddressOptions" placeholder="请选择支付方式">
                    </CurrencySelect>
                </el-form-item>
                <el-form-item label="付款时间" required>
                    <el-date-picker type="datetime" placement="right" v-model="addFormData.time"
                        placeholder="请选择付款时间" />
                </el-form-item>
                <el-form-item label="转账凭证" required>
                    <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.imageUrl" :src="addFormData.imageUrl" 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="备注" required>
                    <el-input v-model="addFormData.mask" 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 style="background-color: #2741DE; margin-left: 2.5vw;" type="primary"
                        @click="handleAddForm">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 审核弹窗 -->
        <el-dialog class="adddialog" v-model="auditFormisible" width="20vw" :before-close="closeAuditForm">
            <el-form class="addForm" label-width="4vw" label-position="left">
                <el-form-item label="精网号">
                    <el-input v-model="auditFormData.jwcode" placeholder="请输入驳回理由" />
                </el-form-item>
                <el-form-item label="客户姓名">
                    <el-input v-model="auditFormData.userName" placeholder="请输入客户姓名" />
                </el-form-item>
                <el-form-item label="所属地区">
                    <el-input disabled="true" v-model="auditFormData.market" />
                </el-form-item>
                <el-form-item label="活动名称">
                    <el-input v-model="auditFormData.jwcode" placeholder="请输入活动名称" />
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-select placeholder="请选择产品名称" clearable></el-select>
                </el-form-item>
                <el-form-item label="付款币种">
                    <el-select placeholder="请选择付款币种" v-model="auditFormData.moneyType" clearable>
                        <el-option v-for="item in payModel" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="付款金额">
                    <el-input v-model="auditFormData.jwcode" placeholder="请输入付款金额" />
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-select placeholder="请选择支付方式" clearable></el-select>
                </el-form-item>
                <el-form-item label="付款时间">
                    <el-date-picker type="datetime" v-model="auditFormData.time" placeholder="请选择付款时间" />
                </el-form-item>
                <el-form-item label="转账凭证">
                    <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="auditFormData.imageUrl" :src="auditFormData.imageUrl" 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">
                            仅支持.jpg .png格式文件≤ 1 MB
                        </el-text>
                    </div>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="auditFormData.mask" type="textarea" :rows="3" placeholder="请输入备注" maxlength="100"
                        show-word-limit />
                </el-form-item>
                <el-form-item label="驳回理由" v-if="ifReject" required>
                    <el-input v-model="auditFormData.mask" type="textarea" :rows="3" placeholder="请输入驳回理由"
                        maxlength="100" show-word-limit />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer" v-if="!ifReject">
                    <el-button style="background-color: #7E91FF;" @click="ifReject = true">驳回</el-button>
                    <el-button :style="{
                        backgroundColor: isBtnDisabled ? '#E5E5E5FF' : '#2741DEFF',
                        marginLeft: '60px',
                        color: isBtnDisabled ? '#8A8A8A' : '#F3FAFE'
                    }" @click="handleReject" :disabled="isBtnDisabled">{{ btnText }}</el-button>
                </span>
                <span class="dialog-footer" v-if="ifReject">
                    <el-button style="background-color: #7E91FF;" @click="closeAuditForm">取消</el-button>
                    <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary"
                        @click="handleReject">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑弹窗 -->
        <el-dialog class="editdialog" v-model="editFormisible" width="20vw" :before-close="closeEditForm">
            <div class="content">
                <div class="left">
                    <el-form class="editForm" label-width="4.5vw" label-position="left">
                        <el-form-item label="精网号">
                            <el-input v-model="editFormData.jwcode" placeholder="请输入驳回理由" />
                        </el-form-item>
                        <el-form-item label="客户姓名">
                            <el-input v-model="editFormData.userName" placeholder="请输入客户姓名" />
                        </el-form-item>
                        <el-form-item label="所属地区">
                            <el-input disabled="true" v-model="editFormData.market" placeholder="请输入所属地区" />
                        </el-form-item>
                        <el-form-item label="活动名称">
                            <el-input v-model="editFormData.jwcode" placeholder="请输入活动名称" />
                        </el-form-item>
                        <el-form-item label="产品名称">
                            <el-select placeholder="请选择产品名称" clearable></el-select>
                        </el-form-item>
                        <el-form-item label="付款币种">
                            <el-select placeholder="请选择付款币种" clearable>
                                <el-option v-for="item in payModel" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="付款金额">
                            <el-input v-model="editFormData.jwcode" placeholder="请输入付款金额" />
                        </el-form-item>
                        <el-form-item label="支付方式">
                            <el-select placeholder="请选择支付方式" clearable></el-select>
                        </el-form-item>
                        <el-form-item label="付款时间">
                            <el-date-picker type="datetime" v-model="editFormData.time" placeholder="请选择付款时间" />
                        </el-form-item>
                        <el-form-item label="转账凭证">
                            <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="editFormData.imageUrl" :src="editFormData.imageUrl" 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">
                                    仅支持.jpg .png格式文件≤ 1 MB
                                </el-text>
                            </div>
                        </el-form-item>
                        <el-form-item label="驳回理由">
                            <el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入驳回理由"
                                maxlength="100" show-word-limit />
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right">
                    <el-form class="editFormRighrt" label-width="4.5vw" label-position="left">
                        <el-form-item label="到账货币">
                            <el-select placeholder="请选择产品名称" clearable></el-select>
                        </el-form-item>
                        <el-form-item label="到账金额">
                            <el-input v-model="addFormData.userName" placeholder="请输入到账金额" />
                        </el-form-item>
                        <el-form-item label="手续费">
                            <el-input disabled="true" v-model="addFormData.market" placeholder="请输入手续费" />
                        </el-form-item>
                        <el-form-item label="银行流水订单号">
                            <el-input v-model="addFormData.jwcode" placeholder="请输入银行流水订单号" />
                        </el-form-item>
                        <el-form-item label="到账时间">
                            <el-input v-model="addFormData.jwcode" placeholder="请输入到账时间" />
                        </el-form-item>
                    </el-form>
                    <span class="editBtns">
                        <button class="editBtn1" @click="closeEditForm">
                            <text class="txt">
                                取消
                            </text>
                        </button>
                        <button class="editBtn2" @click="submitEditForm">
                            <text class="txt">
                                提交
                            </text>
                        </button>
                    </span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
import { color } from 'echarts';
import { template } from 'lodash';
import CurrencySelect from '@/components/MoneyManage/CurrencySelect.vue'
import ProductSelect from '@/components/MoneyManage/ProductSelect.vue'
//====================   标签切换  =========================
const activeTab = ref('wait')

const navigateTo = (tab) => {
    if (tab === 'wait') {
        activeTab.value = 'wait'
    } else if (tab === 'pass') {
        activeTab.value = 'pass'
    }
    else if (tab === 'reject') {
        activeTab.value = 'reject'
    }
}

const kefu = ref(true)
const caiwu = ref(true)
const checkKefu = () => {
    kefu.value = true
    caiwu.value = false
}
const checkCaiwu = () => {
    kefu.value = false
    caiwu.value = true
}
//=================  客服新增弹窗   ==================
const addFormData = ref({
})
const addFormisible = ref(false)


const uploadRef = ref()
const openAddForm = (row) => {
    if (row) {
        addFormData.value = { ...row };
    } else {
        addFormData.value = {}
    }
    addFormisible.value = true
}
const closeAddForm = () => {
    addFormisible.value = false
    addFormData.value = {}
}

const handleAddForm = () => {
    console.log('客服新增的数据', addFormData.value);

}

//付款币种
const selectedCurrency = ref('');
const customOptions = ref(['新币', '马币', '港币', '美元', '英镑', '越南盾']);


//支付方式
const paytypeOptions = ref(["银行转账", "刷卡", "现金", "支票", "Grabpay", "Nets", "E-Transfer", "Paypal", "Stripe-链接收款", "PaymentAsia-链接收款", "Ipay88-链接收款"])
const MoneyAddressOptions = ref(['马来西亚','香港','新加坡'])
const handleCurrencyChange = (option) => {
    console.log('选中的币种:', option);
};
//撤回弹窗
const textContent = ref('')
const recallDialog = ref(false)
const openRecall = (val) => {
    console.log('打开弹窗', val);

    if (val == 'refund') {
        textContent.value = '将要对该订单退款!'
    }
    if (val == 'recall') {
        textContent.value = '将要撤回该信息!'
    }
    recallDialog.value = true
}
const closeRecall = () => {
    recallDialog.value = false
    textContent.value = ''
}
//图片上传
const handleImgSuccess = (response, uploadFile) => {
    try {
        console.log('11', response)
        addFormData.value.imageUrl = response.data.url
        console.log('22', response.data.url)
    } catch (error) {
        console.log('报错信息', 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 > 1) {
        ElMessage.error('图片大小不能超过 1MB!')
        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 === 100 && response.data) {
            handleImgSuccess(response, options.file)
            ElMessage.success(response.msg || '上传成功')
        } else {
            options.onError(response)
            ElMessage.error(response.msg || '上传失败')
        }
    } catch (error) {
        console.error('上传错误:', error)
        ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
    }
}

//==================  财务编辑相关     =========================
const editFormData = ref({

})
const editFormisible = ref(false)
const openEditForm = (row) => {
    console.log('编辑时该行数据：', row);
    editFormData.value = row
    editFormisible.value = true
}
const closeEditForm = () => {
    editFormisible.value = false
    editFormData.value = {}
}
//提交编辑
const submitEditForm = () => {

}
//==================  审核相关     =========================
const auditFormData = ref({

})
const auditFormisible = ref(false)
//判断弹窗中是否展示驳回
const ifReject = ref(false)
const openAuditForm = () => {
    auditFormisible.value = true
}
const countdown = ref(0);          // 倒计时秒数（示例设为 5 秒）
const isBtnDisabled = ref(false);  // 按钮是否禁用
const btnText = ref('通过(3)');    // 按钮显示的文字（含倒计时）
const closeAuditForm = () => {
    ifReject.value = false
    auditFormisible.value = false
    auditFormData.value = {}
}
//倒计时控制通过按钮
watch(auditFormisible, (val) => {
    if (val) {
        countdown.value = 3
        isBtnDisabled.value = true
        btnText.value = `通过(${countdown.value})`

        const timer = setInterval(() => {
            countdown.value--
            btnText.value = `通过(${countdown.value})`
            console.log(btnText.value);

            if (countdown.value <= 0) {
                isBtnDisabled.value = false
                clearInterval(timer)
                btnText.value = '通过'
            }
        }, 1000);
    }

})
//========================分页相关==================
const pageInfo = ref({
    pageSize: 10,
    pageNum: 1
})
const total = ref(0)

// ============   已驳回相关      ===========================
// 提示框状态管理
const showTooltip = ref(false);
const tooltipContent = ref('');
const tooltipLeft = ref(0);
const tooltipTop = ref(0);
const tooltipWidth = 200;
// 鼠标进入时显示提示框
const handleMouseEnter = (e, content) => {
    if (content) {
        showTooltip.value = true;
        tooltipContent.value = content;
        handleMouseMove(e);
    }
};

// 鼠标离开时隐藏提示框
const handleMouseLeave = () => {
    showTooltip.value = false;
    tooltipContent.value = '';
};

// 鼠标移动时更新提示框位置（显示在鼠标左侧）
const handleMouseMove = (e) => {
    // 左侧显示：鼠标X坐标 - 提示框宽度 - 偏移量
    tooltipLeft.value = e.clientX - tooltipWidth - 10;
    // Y坐标与鼠标保持一致（垂直居中对齐）
    tooltipTop.value = e.clientY - 10;
};
const tableData = [
    {
        "jwcode": "HM20240601",
        "name": "张三",
        "market": "华东区",
        "activity": "2024年中促销",
        "rateName": "年度会员套餐A",
        "moneyType": "人民币",
        "permanentGold": 2980.00,
        "getMoneyType": "人民币",
        "getMoney": 2980.00,
        "shouxufei": 59.60,
        "pastType": "支付宝转账",
        "remark": "2024-06-01 09:30",
        "voucher": "https://mock-img.com/voucher/2024060101.jpg",
        "payModel": "https://mock-img.com/icon/alipay.png",
        "bankOrder": "ALIPAY202406010001",
        "submiter": "李四（运营部）",
        "auditor": "王五（财务部）",
        "mask": "客户主动购买，无特殊需求",
        "rejectTime": null,
        "rejectReason": null,
        "getMoneyTime": "2024-06-01 10:15",
        "orderStatus": "已撤回"
    },
    {
        "jwcode": "HM20240602",
        "name": "李四",
        "market": "华北区",
        "activity": "新客首单优惠",
        "rateName": "季度体验套餐B",
        "moneyType": "美元",
        "permanentGold": 99.00,
        "getMoneyType": "人民币",
        "getMoney": 712.50,
        "shouxufei": 14.25,
        "pastType": "PayPal",
        "remark": "2024-06-02 14:15",
        "voucher": "https://mock-img.com/voucher/2024060201.jpg",
        "payModel": "https://mock-img.com/icon/paypal.png",
        "bankOrder": "PAYPAL202406020001",
        "submiter": "赵六（国际部）",
        "auditor": "孙七（财务部）",
        "mask": "跨境支付，汇率按当日中间价计算",
        "rejectTime": null,
        "rejectReason": null,
        "getMoneyTime": "2024-06-02 16:40",
        "orderStatus": "已通过"
    },
    {
        "jwcode": "HM20240603",
        "name": "王五",
        "market": "华南区",
        "activity": "老客召回活动",
        "rateName": "月度续费套餐C",
        "moneyType": "人民币",
        "permanentGold": 399.00,
        "getMoneyType": null,
        "getMoney": null,
        "shouxufei": null,
        "pastType": "微信支付",
        "remark": "2024-06-03 11:20",
        "voucher": "https://mock-img.com/voucher/2024060301.jpg",
        "payModel": "https://mock-img.com/icon/wechat.png",
        "bankOrder": null,
        "submiter": "钱八（客服部）",
        "auditor": null,
        "mask": "待财务补充到账信息",
        "rejectTime": null,
        "rejectReason": null,
        "getMoneyTime": null,
        "orderStatus": "待审核"
    },
    {
        "jwcode": "HM20240604",
        "name": "赵六",
        "market": "西区",
        "activity": "企业团购活动",
        "rateName": "企业定制套餐D",
        "moneyType": "人民币",
        "permanentGold": 15800.00,
        "getMoneyType": null,
        "getMoney": null,
        "shouxufei": null,
        "pastType": "银行对公转账",
        "remark": "2024-06-04 09:05",
        "voucher": null,
        "payModel": null,
        "bankOrder": null,
        "submiter": "周九（销售部）",
        "auditor": "吴十（财务部）",
        "mask": null,
        "rejectTime": "2024-06-04 10:30",
        "rejectReason": "未上传转账凭证，需补充后重新提交",
        "getMoneyTime": null,
        "orderStatus": "已驳回"
    },
    {
        "jwcode": "HM20240605",
        "name": "孙七",
        "market": "东北区",
        "activity": "节日特惠活动",
        "rateName": "年度会员套餐A",
        "moneyType": "人民币",
        "permanentGold": 2780.00,
        "getMoneyType": "人民币",
        "getMoney": 2780.00,
        "shouxufei": 55.60,
        "pastType": "银联支付",
        "remark": "2024-06-05 15:40",
        "voucher": "https://mock-img.com/voucher/2024060501.jpg",
        "payModel": "https://mock-img.com/icon/unionpay.png",
        "bankOrder": "UNION202406050001",
        "submiter": "郑一（市场部）",
        "auditor": "王二（财务部）",
        "mask": "客户使用节日优惠券，已核减200元",
        "rejectTime": null,
        "rejectReason": null,
        "getMoneyTime": "2024-06-05 16:25",
        "orderStatus": "已通过"
    },
    {
        "jwcode": "HM20240606",
        "name": "周八",
        "market": "华北区",
        "activity": "新客首单优惠",
        "rateName": "季度体验套餐B",
        "moneyType": "人民币",
        "permanentGold": 359.00,
        "getMoneyType": null,
        "getMoney": null,
        "shouxufei": null,
        "pastType": "微信支付",
        "remark": "2024-06-06 13:10",
        "voucher": "https://mock-img.com/voucher/2024060601.jpg",
        "payModel": "https://mock-img.com/icon/wechat.png",
        "bankOrder": null,
        "submiter": "吴九（客服部）",
        "auditor": "郑十（财务部）",
        "mask": null,
        "rejectTime": "2024-06-06 14:00",
        "rejectReason": "付款金额与订单金额不符（订单359元，实付349元）",
        "getMoneyTime": null,
        "orderStatus": "已驳回"
    }
]
</script>
<style scoped lang="scss">
.content {
    //整体内容
    height: 100%;
    width: 83vw;

    .card1 {
        // 筛选框
        width: 100%;

        .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 {
        // 下方数据展示card
        width: 100%;

        margin-top: 2vh;

        .btns {
            //切换标签
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 10px;

            .tabs {
                min-width: 300px;

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

            .btnAdd {
                margin-right: 5vw;
                padding-left: 50px;
            }
        }



        .table {
            margin: 10px 3vw;
            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/收款明细撤回背景.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;
            }
        }
    }

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

            .moneyType {
                position: relative;
                width: 100%;


            }
        }

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

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

                .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: 80px;
        width: auto;
        font-weight: 800;
        padding-bottom: 15px;
    }
}

// 搜索的卡片样式
.card1 {
    background: #F3FAFE;
}

// 表单的卡片样式
.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;
}
</style>