<template>
    <div class="content">
        <div class="card1">
            <el-card 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="card2">
            <el-card>
                <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="money" label="付款币种" width="100px">
                        </el-table-column>
                        <el-table-column prop="permanentGold" label="付款金额" width="120px">
                        </el-table-column>
                        <el-table-column prop="moneyType" 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'" width="150px" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="mask" label="备注" width="150px" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="getMoneyTime" label="到账时间" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip>
                        </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;">退款</span>
                                <span v-else-if="kefu && scope.row.orderStatus == '已撤回'"
                                    style="color: #2741DE;">编辑</span>
                                <span v-else-if="kefu && scope.row.orderStatus == '待审核'"
                                    style="color: #FA5A1E;">撤回</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>
        <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>
                    <el-select placeholder="请选择产品名称" clearable></el-select>
                </el-form-item>
                <el-form-item label="付款币种" required>
                    <el-select placeholder="请选择付款币种" clearable></el-select>
                </el-form-item>
                <el-form-item label="付款金额" required>
                    <el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" />
                </el-form-item>
                <el-form-item label="支付方式" required>
                    <el-select placeholder="请选择支付方式" clearable></el-select>
                </el-form-item>
                <el-form-item label="付款时间" required>
                    <el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" />
                </el-form-item>
                <el-form-item label="转账凭证" required>
                    <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>
                </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="handleReject">确定</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="请选择付款币种" clearable></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-time-picker 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-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-time-picker 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">
                            <text class="txt">
                                取消
                            </text>
                        </button>
                        <button class="editBtn2">
                            <text class="txt">
                                提交
                            </text>
                        </button>
                    </span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
import { color } from 'echarts';
import { template } from 'lodash';

//====================   标签切换  =========================
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 = () => {
    addFormisible.value = true
}
const closeAddForm = () => {
    addFormisible.value = false
    addFormData.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 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 tableData = [
  {
    "jwcode": "HM2024001",
    "name": "张三",
    "market": "华东区",
    "activity": "2024春季促销活动",
    "rateName": "年度会员套餐A",
    "money": "人民币",
    "permanentGold": 2980.00,
    "moneyType": "人民币",
    "getMoney": 2980.00,
    "shouxufei": 59.60,
    "pastType": "支付宝转账",
    "remark": "2024-05-10 09:23",
    "voucher": "https://example.com/voucher/1.jpg",
    "payModel": "https://example.com/icon/alipay.png",
    "bankOrder": "ALIPAY2024051000001",
    "submiter": "李四（运营部）",
    "auditor": "王五（财务部）",
    "mask": "客户主动购买，无特殊备注",
    "getMoneyTime": "2024-05-10 10:05",
    "orderStatus": "已通过"
  },
  {
    "jwcode": "HM2024002",
    "name": "李四",
    "market": "华北区",
    "activity": "新客首单优惠",
    "rateName": "季度体验套餐B",
    "money": "美元",
    "permanentGold": 99.00,
    "moneyType": "人民币",
    "getMoney": 712.00,
    "shouxufei": 14.24,
    "pastType": "PayPal",
    "remark": "2024-05-11 14:56",
    "voucher": "https://example.com/voucher/2.jpg",
    "payModel": "https://example.com/icon/paypal.png",
    "bankOrder": "PAYPAL2024051100002",
    "submiter": "赵六（国际部）",
    "auditor": "孙七（财务部）",
    "mask": "跨境支付，汇率按当日中间价计算",
    "getMoneyTime": "2024-05-12 08:30",
    "orderStatus": "待审核"
  },
  {
    "jwcode": "HM2024003",
    "name": "王五",
    "market": "华南区",
    "activity": "老客召回活动",
    "rateName": "月度续费套餐C",
    "money": "人民币",
    "permanentGold": 399.00,
    "moneyType": "人民币",
    "getMoney": null,
    "shouxufei": null,
    "pastType": "微信支付",
    "remark": "2024-05-12 11:18",
    "voucher": "https://example.com/voucher/3.jpg",
    "payModel": "https://example.com/icon/wechat.png",
    "bankOrder": "WECHAT2024051200003",
    "submiter": "钱八（客服部）",
    "auditor": null,
    "mask": "到账信息待财务补充",
    "getMoneyTime": null,
    "orderStatus": "已撤回"
  },
  {
    "jwcode": "HM2024004",
    "name": "赵六",
    "market": "西区",
    "activity": "企业团购活动",
    "rateName": "企业定制套餐D",
    "money": "人民币",
    "permanentGold": 15800.00,
    "moneyType": "人民币",
    "getMoney": 15800.00,
    "shouxufei": 316.00,
    "pastType": "银行对公转账",
    "remark": "2024-05-13 09:45",
    "voucher": "https://example.com/voucher/4.jpg",
    "payModel": "https://example.com/icon/bank.png",
    "bankOrder": "BANK2024051300004",
    "submiter": "周九（销售部）",
    "auditor": "吴十（财务部）",
    "mask": "10人企业团单，享受95折优惠",
    "getMoneyTime": "2024-05-13 11:20",
    "orderStatus": "已通过"
  },
  {
    "jwcode": "HM2024005",
    "name": "孙七",
    "market": "东北区",
    "activity": "节日特惠活动",
    "rateName": "年度会员套餐A",
    "money": "人民币",
    "permanentGold": 2780.00,
    "moneyType": "人民币",
    "getMoney": 2780.00,
    "shouxufei": 55.60,
    "pastType": "银联支付",
    "remark": "2024-05-14 15:30",
    "voucher": null,
    "payModel": null,
    "bankOrder": "UNIONPAY2024051400005",
    "submiter": "郑一（市场部）",
    "auditor": "王二（财务部）",
    "mask": "凭证暂未上传，已提醒客户补充",
    "getMoneyTime": "2024-05-14 16:45",
    "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;
            }
        }
    }


    .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: 10px;
            }
        }



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

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

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