<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln" v-show="showSearch">
            <div class="pd-16 border-bottom">
                <div class="f-s-20 c-333 f-w-7 mb-10">会费缴纳记录</div>
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
                    <el-form-item label="订单号" prop="id">
                        <el-input v-model="queryParams.id" placeholder="请输入订单号搜索" clearable style="width: 180px" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="会员名称" prop="cpyName">
                        <el-input v-model="queryParams.cpyName" placeholder="搜会员名称关键字" clearable style="width: 180px" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="缴费时间段" prop="dateRange">
                        <DateRange v-model="queryParams.dateRange" v-model:start-date="queryParams.startDate" v-model:end-date="queryParams.endDate" @change="handleQuery"></DateRange>
                    </el-form-item>
                    <el-form-item label="是否已开发票" prop="cpyName">
                        <el-select style="width: 140px" v-model="queryParams.invoiceStatus" clearable placeholder="搜有效期状态" @change="handleQuery">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已开票" value="1"></el-option>
                            <el-option label="待开票" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="d-flex flex1 ov-hd flex-cln pd-16">
                <searchTabs :list="dm_pay_method" v-model="queryParams.payType" keyLabel="label" @change="handleQuery" :isNum="false" keyValue="value"></searchTabs>
                <div class="pd-8"></div>
                <div class="flex1 ov-hd">
                    <vxe-table :loading="loading" border :data="list" min-height="0" max-height="100%">
                        <vxe-column title="订单号" field="id" min-width="100" :formatter="colNoData" />
                        <vxe-column title="会员名称" field="cpyName" min-width="100" :formatter="colNoData" />
                        <vxe-column title="会员级别" field="vipLevelDesc" width="100" :formatter="colNoData" />
                        <vxe-column title="支付方式" width="100">
                            <template #default="{ row }">
                                {{ selectDictLabel(dm_pay_method, row?.payType) }}
                            </template>
                        </vxe-column>
                        <vxe-column title="缴费金额" width="120" :formatter="colNoData">
                            <template #default="{ row }">{{ row.paymentAmount }}元</template>
                        </vxe-column>
                        <vxe-column title="发票信息" min-width="100">
                            <template #default="{ row }">
                                <div v-if="row?.invoiceInfo && +row?.hasInvoice " @click="openInvoiceInfo(row)" class="cs-p">
                                    <div>发票抬头：{{ row?.invoiceInfo?.headTitle || '-' }}</div>
                                    <div class="f-s-12">发票税号：{{ row?.invoiceInfo?.taxSn || '-' }}</div>
                                    <div class="f-s-12">收票邮箱：{{ row?.invoiceInfo?.email || '-' }}</div>
                                </div>
                                <div v-else-if="!+row?.hasInvoice">本次不开具发票</div>
                                <div v-else>-</div>
                            </template>
                        </vxe-column>
                        <vxe-column title="缴费人" field="createName" width="70" :formatter="colNoData" />
                        <vxe-column title="缴费时间" field="createTime" width="170" :formatter="colNoData" />
                        <vxe-column title="缴费状态" width="90">
                            <template #default="{ row }">
                                {{ +row?.paymentStatus ? '已支付' : '待支付' }}
                            </template>
                        </vxe-column>
                        <vxe-column title="发票" width="100" :formatter="colNoData">
                            <template #default="{ row }">{{ +row.invoiceStatus ? '已开票' : '待开票' }}</template>
                        </vxe-column>
                        <vxe-column title="操作" align="center" width="200" class-name="small-padding fixed-width">
                            <template #default="{ row }">
                                <el-button @click="confirmPay(row)" v-if="!+row?.paymentStatus" type="success" text>确认付款</el-button>
                                <template v-if="+row?.hasInvoice">
                                    <span></span>
                                    <el-button v-if="+row.invoiceStatus" style="color: #999;" tag="a" text :underline="false" type="primary" :href="row.invoiceUrlAddr" target="_blank">查看发票</el-button>
                                    <el-button v-else type="primary" text @click="clickRowEdit(row)">上传发票</el-button>
                                </template>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
            </div>
        </div>
    </div>
    <uploadInvoiceForm v-if="showInvoice" v-model:show="showInvoice" :info="rowInfo" @success="getList()"></uploadInvoiceForm>
    <InvoiceInfo v-if="showInvoiceInfo" v-model:show="showInvoiceInfo" :info="rowInfo"></InvoiceInfo>
</template>
<script setup name="Pay-log" lang="ts">
import { colNoData } from '@/utils/noData';
import { listVipPayment, VipConfirmPay } from '@/api/dgtmedicine/vipPayment/index';
import { DateRange, searchTabs } from '@/views/models/index';
import { uploadInvoiceForm, InvoiceInfo } from '../model/index';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dm_pay_method } = toRefs<any>(proxy?.useDict('dm_pay_method'));
const list = ref<any[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const showInvoice = ref(false);
const showInvoiceInfo = ref(false);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive<any>({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: [],
        id: '',
        startDate: '',
        endDate: '',
        payType: '1'
    }
});
const openInvoiceInfo = (row: any) => {
    rowInfo.value = { ...row?.invoiceInfo };
    showInvoiceInfo.value = true;
};
const { queryParams } = toRefs(data);
/** 点击行上传发票 */
const rowInfo = ref<any>({});
const clickRowEdit = (row: any) => {
    rowInfo.value = row;
    showInvoice.value = true;
};
/** 查询会员信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await listVipPayment(queryParams.value);
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};
// 确认付款方法
const confirmPay = async (row: any) => {
    // 确认付款弹框
    ElMessageBox({
        title: '支付提示',
        cancelButtonText: '取消',
        confirmButtonText: '确认付款',
        showCancelButton: true,
        confirmButtonClass: 'el-button--danger',

        message: h('p', null, [h('div', null, `是否确认付款企业：${row.cpyName}设置为已支付状态吗？`), h('div', null, [h('span', null, '注意：'), h('span', { style: 'color: #F56C6C' }, '确认付款后，代表该企业对公转账为已支付，请仔细核对！')])]),
        callback: async (action: string) => {
            if (action === 'confirm') {
                const res = await VipConfirmPay(row.id);
                if (res) {
                    ElMessage.success('操作成功');
                    getList();
                }
            }
        }
    });
};
/** 搜索按钮操作 */
const handleQuery = (level?: any) => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startDate = '';
    queryParams.value.endDate = '';
    handleQuery();
};

onMounted(() => {
    getList();
});
</script>
