<template>
    <div class="card">
        <el-space>
            <el-input placeholder="用户名称" v-model="tableOptions.userName" style="width: 200px;" />
            <el-input placeholder="商户号" v-model="tableOptions.merchantCode" style="width: 200px;" />
            <el-select v-model="tableOptions.status">
                <el-option key="" value="" label="全部"></el-option>
                <el-option :key="0" :value="0" label="待审核"></el-option>
                <el-option :key="1" :value="1" label="提现成功"></el-option>
                <el-option :key="2" :value="2" label="提现失败"></el-option>
                <el-option :key="3" :value="3" label="审核中"></el-option>
            </el-select>
            <el-button type="primary" icon="Search" @click="searchHandle">搜索</el-button>
        </el-space>
        <div class="table mt15">
            <el-table :data="tableOptions.list" size="large" stripe border height="100%" v-loading="tableOptions.loading">
                <el-table-column prop="id" label="机构id"></el-table-column>
                <el-table-column prop="merchantCode" label="商户号"></el-table-column>
                <el-table-column prop="userName" label="商户名称"></el-table-column>
                <el-table-column prop="accountNo" label="账户号"></el-table-column>
                <el-table-column prop="cashAmt" label="提现金额">
                    <template #default="scope">
                        <el-text type="primary">{{ scope.row.cashAmt }}元</el-text>
                    </template>
                </el-table-column>
                <el-table-column prop="userId" label="用户id"></el-table-column>
                <el-table-column prop="createDt" label="提现时间">
                    <template #default="scope">
                        <el-text>{{ dayjs(scope.row.createDt).format('YYYY-MM-DD HH:mm:ss') }}</el-text>
                    </template>
                </el-table-column>
                <el-table-column prop="typeCode" label="提现人身份">
                    <template #default="scope">
                        <el-tag disable-transitions>{{ typeNames[scope.row.typeCode] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.status == 0">待审核</el-tag>
                        <el-tag type="success" v-if="scope.row.status == 1">提现成功</el-tag>
                        <el-tag type="warning" v-if="scope.row.status == 2">提现失败</el-tag>
                        <el-tag type="info" v-if="scope.row.status == 3">审核中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="cashStatus" label="上级审核信息">
                    <template #default="scope">
                        <el-link type="primary" icon="Search"
                            @click="showCheckModle(scope.$index, scope.row.cashStatus)">查看进度</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <template v-if="scope.row.show && scope.row.status != 2">
                            <el-popconfirm title="是否审核通过？" width="200" confirm-button-text="通过" cancel-button-text="驳回"
                                @cancel="checkHandle(scope.row, 2)" @confirm="checkHandle(scope.row, 1)">
                                <template #reference>
                                    <el-button type="primary" size="small" icon="EditPen">审核</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                        <template v-else>
                            <el-button type="default" size="small" icon="EditPen" disabled>
                                审核
                            </el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="mt15">
            <el-pagination layout="prev, pager, next, total, sizes, jumper" background
                v-model:current-page="tableOptions.pageNum" v-model:page-size="tableOptions.pageSize"
                :page-size="tableOptions.pageSize" :page-sizes="[10, 20, 30, 50]" :total="tableOptions.total"
                @size-change="paginationChange" @current-change="paginationChange" />
        </div>
        <el-dialog v-model="show" title="审核进度">
            <el-steps :active="rowProgressActive" align-center>
                <el-step :title="typeNames[item.userType]" :description="statusEmun[item.status]"
                    v-for="(item, index) in rowProgress" :key="index"></el-step>
            </el-steps>
            <div style="padding-bottom: 28px;"></div>
        </el-dialog>
    </div>
</template>

<script setup>
import { getOutFlow, modifyOutFlow } from '@/api/withdraw.js'
import { onMounted, reactive, ref } from 'vue'
import { typeNames } from '@/utils/index.js'
import { ElMessage } from 'element-plus'
import { dayjs } from 'element-plus'
import hooks from '@/hooks'

// 显示进度dialog
const show = ref(false)
// 当前表格索引
const rowIndex = ref(0)
// 当前进度数组
const rowProgress = ref([])
// 当前进度索引
const rowProgressActive = ref(0)
// 状态枚举
const statusEmun = ref({
    "0": '待审核',
    "1": '审核通过',
    "2": '提现失败',
    "3": '审核中'
})

// 查看当前进度
function showCheckModle(row, cashStatus) {
    show.value = true
    rowIndex.value = row
    console.log(JSON.parse(cashStatus))
    rowProgress.value = JSON.parse(cashStatus)

    rowProgress.value.map((item, index) => {
        if (item.status != 0) {
            rowProgressActive.value = index + 1
        }
    })
}

// 审核操作
async function checkHandle(row, status) {
    try {
        await modifyOutFlow({
            id: row.id,
            status: status
        })
        ElMessage.success('提交成功')
        paginationChange()
    } catch (error) { }
}

// 表格参数
const tableOptions = reactive({
    loading: true,
    userName: '',
    merchantCode: '',
    status: 0,
    list: [],
    total: 0,
    pageNum: 1,
    pageSize: 10
})

// 搜索
function searchHandle() {
    tableOptions.pageNum = 1;
    getOutFlowHandle()
}

// 分页回调
function paginationChange() {
    tableOptions.loading = true
    getOutFlowHandle()
}

// 提现申请查询
async function getOutFlowHandle() {
    try {
        const res = await getOutFlow({
            userName: tableOptions.userName,
            merchantCode: tableOptions.merchantCode,
            status: tableOptions.status,
            pageNum: tableOptions.pageNum,
            pageSize: tableOptions.pageSize
        })

        const userInfo = hooks.useLocalStorage.get('userInfo')
        const data = [...res.list];

        // console.log(userInfo.userType)

        for (let item of data) {
            item.show = false;
            const arr = JSON.parse(item.cashStatus);
            // console.log(arr);
            for (let child of arr) {
                if (child.userType == userInfo.userType && child.status == 0) {
                    item.show = true;
                }
            }
        }

        tableOptions.loading = false
        tableOptions.list = data
        tableOptions.total = res.total
    } catch (error) { }
}

onMounted(() => {
    getOutFlowHandle()
})
</script>

<style scoped lang="scss">
.table {
    height: calc(100vh - 310px);
}
</style>