<template>
    <div class="rechange-check">
        <RechangeSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch" @reset="handleReset">
            <template #button>
                <el-button type="danger" plain @click="handleReject">驳回</el-button>
                <el-button type="success" @click="handleApprove">通过</el-button>
                <el-button type="primary" plain @click="handleExport">导出</el-button>
            </template>
        </RechangeSearch>

        <div class="table-wrapper">
            <el-table v-loading="loading" :data="tableData" border height="100%" row-key="id"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" width="70" align="center">
                    <template #default="scope">
                        {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>

                <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"
                    :width="column.width" :align="column.align || 'center'" show-overflow-tooltip />
            </el-table>
        </div>

        <RechangePagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
            @pagination-change="handlePaginationChange" />
    </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { computed, onMounted, ref } from 'vue'
import RechangeSearch from '@/components/common/Search.vue'
import RechangePagination from '@/components/common/Pagination.vue'
import { rechangeCheckSearch, rechangeCheckTableColumns } from './options'

interface TableRow {
    id: number
    account: string
    agentName: string
    serialNo: string
    walletAddress: string
    walletType: string
    holderName: string
    bankName: string
    bankCode: string
    bankAddress: string
    depositAmount: string
    depositCurrency: string
    arrivalAmount: string
    arrivalCurrency: string
    exchangeRate: string
    type: string
    userType: number
}

const mockTableData: TableRow[] = [
    {
        id: 1,
        account: 'U100001',
        agentName: '一级代理A',
        serialNo: 'RC202604250001',
        walletAddress: 'TRX8x2f...7Kp9',
        walletType: 'TRC20',
        holderName: '张三',
        bankName: '中国银行',
        bankCode: 'BKCHCNBJ',
        bankAddress: '上海市浦东新区世纪大道100号',
        depositAmount: '1000.00',
        depositCurrency: 'USDT',
        arrivalAmount: '1000.00',
        arrivalCurrency: 'USDT',
        exchangeRate: '1.00',
        type: '钱包存款',
        userType: 1,
    },
    {
        id: 2,
        account: 'U100002',
        agentName: '一级代理B',
        serialNo: 'RC202604250002',
        walletAddress: '0x5fa1...ac20',
        walletType: 'ERC20',
        holderName: '李四',
        bankName: '工商银行',
        bankCode: 'ICBKCNBJ',
        bankAddress: '北京市朝阳区建国路88号',
        depositAmount: '5000.00',
        depositCurrency: 'USD',
        arrivalAmount: '5000.00',
        arrivalCurrency: 'USD',
        exchangeRate: '1.00',
        type: '银行转账',
        userType: 1,
    },
    {
        id: 3,
        account: 'A200001',
        agentName: '总代运营中心',
        serialNo: 'RC202604250003',
        walletAddress: 'bc1q7m...91fa',
        walletType: 'BTC',
        holderName: '王五',
        bankName: '建设银行',
        bankCode: 'PCBCCNBJ',
        bankAddress: '深圳市南山区科技园中一路1号',
        depositAmount: '20000.00',
        depositCurrency: 'CNY',
        arrivalAmount: '2750.00',
        arrivalCurrency: 'USD',
        exchangeRate: '7.27',
        type: '线下汇款',
        userType: 2,
    },
    {
        id: 4,
        account: 'U100003',
        agentName: '一级代理C',
        serialNo: 'RC202604250004',
        walletAddress: 'TRX9m4k...6Ts1',
        walletType: 'TRC20',
        holderName: '赵六',
        bankName: '农业银行',
        bankCode: 'ABOCCNBJ',
        bankAddress: '广州市天河区珠江新城华夏路18号',
        depositAmount: '3000.00',
        depositCurrency: 'USDT',
        arrivalAmount: '3000.00',
        arrivalCurrency: 'USDT',
        exchangeRate: '1.00',
        type: '钱包存款',
        userType: 1,
    },
    {
        id: 5,
        account: 'A200002',
        agentName: '华东代理中心',
        serialNo: 'RC202604250005',
        walletAddress: '0x9bd7...b3f2',
        walletType: 'ERC20',
        holderName: '孙七',
        bankName: '招商银行',
        bankCode: 'CMBCCNBS',
        bankAddress: '杭州市西湖区文三路90号',
        depositAmount: '8000.00',
        depositCurrency: 'USD',
        arrivalAmount: '8000.00',
        arrivalCurrency: 'USD',
        exchangeRate: '1.00',
        type: '银行转账',
        userType: 2,
    },
    {
        id: 6,
        account: 'U100004',
        agentName: '一级代理D',
        serialNo: 'RC202604250006',
        walletAddress: 'TRX6a1d...3Lm8',
        walletType: 'TRC20',
        holderName: '周八',
        bankName: '交通银行',
        bankCode: 'COMMCNSH',
        bankAddress: '成都市高新区天府大道北段966号',
        depositAmount: '1200.00',
        depositCurrency: 'USDT',
        arrivalAmount: '1200.00',
        arrivalCurrency: 'USDT',
        exchangeRate: '1.00',
        type: '钱包存款',
        userType: 1,
    },
    {
        id: 7,
        account: 'U100005',
        agentName: '一级代理E',
        serialNo: 'RC202604250007',
        walletAddress: 'bc1qx8...0de4',
        walletType: 'BTC',
        holderName: '吴九',
        bankName: '浦发银行',
        bankCode: 'SPDBCNBS',
        bankAddress: '苏州市工业园区星湖街328号',
        depositAmount: '15000.00',
        depositCurrency: 'CNY',
        arrivalAmount: '2063.27',
        arrivalCurrency: 'USD',
        exchangeRate: '7.27',
        type: '线下汇款',
        userType: 1,
    },
    {
        id: 8,
        account: 'A200003',
        agentName: '华南代理中心',
        serialNo: 'RC202604250008',
        walletAddress: '0x8e2f...d1a0',
        walletType: 'ERC20',
        holderName: '郑十',
        bankName: '民生银行',
        bankCode: 'MSBCCNBJ',
        bankAddress: '厦门市思明区湖滨南路258号',
        depositAmount: '6000.00',
        depositCurrency: 'USD',
        arrivalAmount: '6000.00',
        arrivalCurrency: 'USD',
        exchangeRate: '1.00',
        type: '银行转账',
        userType: 2,
    },
]

const searchOptions = ref(rechangeCheckSearch)
const searchForm = ref({
    account: '',
    userType: 1,
})

const tableColumns = computed(() => rechangeCheckTableColumns)
const tableData = ref<TableRow[]>([])
const selectedRows = ref<TableRow[]>([])
const loading = ref(false)

const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

const applyFilters = () => {
    const keyword = searchForm.value.account.trim().toLowerCase()
    const filtered = mockTableData.filter((item) => {
        const matchAccount = !keyword || item.account.toLowerCase().includes(keyword)
        const matchUserType = !searchForm.value.userType || item.userType === searchForm.value.userType
        return matchAccount && matchUserType
    })

    total.value = filtered.length
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    tableData.value = filtered.slice(start, end)
}

const getList = () => {
    loading.value = true
    selectedRows.value = []
    window.setTimeout(() => {
        applyFilters()
        loading.value = false
    }, 120)
}

onMounted(() => {
    getList()
})

const handleSearch = () => {
    currentPage.value = 1
    getList()
}

const handleReset = () => {
    searchForm.value = {
        account: '',
        userType: 1,
    }
    currentPage.value = 1
    getList()
}

const handleSelectionChange = (rows: TableRow[]) => {
    selectedRows.value = rows
}

const handleApprove = () => {
    if (!selectedRows.value.length) {
        ElMessage.warning('请先选择要通过的记录')
        return
    }
    ElMessage.success('页面已完成，接口后续接入')
}

const handleReject = () => {
    if (!selectedRows.value.length) {
        ElMessage.warning('请先选择要驳回的记录')
        return
    }
    ElMessage.success('页面已完成，接口后续接入')
}

const handleExport = () => {
    ElMessage.success('页面已完成，接口后续接入')
}

const handlePaginationChange = (page: { currentPage: number; pageSize: number }) => {
    currentPage.value = page.currentPage
    pageSize.value = page.pageSize
    applyFilters()
}
</script>

<style scoped lang="scss">
.rechange-check {
    height: 100%;
    padding-bottom: 70px;
    box-sizing: border-box;

    :deep(.search-container .el-form) {
        flex-wrap: wrap;
        align-items: center;
    }

    :deep(.search-container .el-form-item) {
        flex: 0 0 auto;
    }

    :deep(.search-container .el-input),
    :deep(.search-container .el-select) {
        width: 100%;
    }

    .table-wrapper {
        height: calc(100vh - 210px);
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
    }
}
</style>
