<template>
    <div class="account-detail-container">
        <el-card shadow="always" class="back-card">
            <el-button type="primary" plain size="large" @click="goBack">返回</el-button>
            <span style="margin-left: 20px;">账户详情</span>
        </el-card>
        <!-- 患者基本信息卡片 -->
        <el-card shadow="never" class="patient-info-card">

            <div class="patient-basic-info">
                <el-row :gutter="10">
                    <el-col :span="4">
                        <div class="info-item">
                            <span class="label">患者姓名：</span>
                            <span class="value">{{ useAccountStore.accountInfo.patientName || '' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-item">
                            <span class="label">性别：</span>
                            <span class="value">{{ useAccountStore.accountInfo.sex=='1'?'男':'女'}}</span>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-item">
                            <span class="label">身份证号：</span>
                            <span class="value">{{ useAccountStore.accountInfo.idCard || '' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-item">
                            <span class="label">病区：</span>
                            <span class="value">{{ useAccountStore.accountInfo.wardName || '--' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-item">
                            <span class="label">科室：</span>
                            <span class="value">{{ useAccountStore.accountInfo.deptName || '' }}</span>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="4">
                        <div class="info-item">
                            <span class="label">看诊类型：</span>
                            <span class="value">{{getDictLabel(treatment_user_type,useAccountStore.accountInfo.visitType) || '' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-item">
                            <span class="label">门诊/住院号：</span>
                            <span class="value">{{ useAccountStore.accountInfo.patientNo || '' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-item">
                            <span class="label">诊疗卡号：</span>
                            <span class="value">{{ useAccountStore.accountInfo.treatNum || '' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-item">
                            <span class="label">账户：</span>
                            <span class="value">{{ useAccountStore.accountInfo.serialNo || '' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="info-item">
                            <span class="label">账户授信额度（元）：</span>
                            <span class="value">{{ (useAccountStore.accountInfo.creditLimit || 0).toFixed(2) }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>

        <!-- 账户统计信息卡片 -->
        <div class="account-stats-section">
            <el-row :gutter="10">
                <el-col :span="3">
                    <div class="stat-card">
                        <div class="stat-label">账户充值（元）</div>
                        <div class="stat-value">{{ (useAccountStore.accountInfo.totalIncome || 0).toFixed(2) }}</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="stat-card">
                        <div class="stat-label">账户余额（元）</div>
                        <div class="stat-value">{{ (useAccountStore.accountInfo.totalAmount || 0).toFixed(2) }}</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="stat-card">
                        <div class="stat-label">可用授信额度（元）</div>
                        <div class="stat-value">{{ (useAccountStore.accountInfo.creditAmount || 0).toFixed(2) }}</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="stat-card">
                        <div class="stat-label">账户消费（元）</div>
                        <div class="stat-value">{{ (useAccountStore.accountInfo.totalExpand || 0).toFixed(2) }}</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="stat-card">
                        <div class="stat-label">待缴金额（元）</div>
                        <div class="stat-value">{{ (useAccountStore.accountInfo.unpaidAmount || 0).toFixed(2) }}</div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="stat-card">
                        <div class="stat-label">退户费用（元）</div>
                        <div class="stat-value">{{ (0).toFixed(2) }}</div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 查询条件 -->
        <el-card shadow="never" class="query-card">
            <el-form :model="queryParams" :inline="true" label-width="90">
                <el-form-item label="操作日期：">
                    <el-date-picker v-model="createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <div class="action-buttons">
                <el-button type="primary" >打印交易记录</el-button>
                <el-button type="primary" @click="handleExport">导出数据</el-button>
            </div>
        </el-card>

        <!-- 交易记录表格 -->
        <el-card shadow="never">
            <el-table v-loading="loading" :data="recordList" stripe>
                <el-table-column label="序号" type="index" width="60" align="center" />
                <el-table-column label="操作日期" prop="createTime" align="center" />
                <el-table-column label="收费分类" prop="chargeType" align="center">
                    <template #default="scope">
                        <span>{{ getDictLabel(fee_type, scope.row.chargeType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单类型" prop="chargeType" align="center">
                    <template #default="scope">
                        <span>{{ getDictLabel(fee_type, scope.row.chargeType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" prop="paymentMethod" align="center">
                    <template #default="scope">
                        <span>{{ getDictLabel(charge_way, scope.row.paymentMethod) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付渠道" prop="paymentMethod" align="center">
                    <template #default="scope">
                        <span>{{ getDictLabel(charge_way, scope.row.paymentMethod) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="交易金额" prop="fundsReceived" align="center" />
                <el-table-column label="交易状态" prop="status" align="center">
                    <template #default="scope">
                        <span>{{ getDictLabel(action_status, scope.row.status) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="处方ID" prop="settlementId" align="center" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">

                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getTransactionList" />
            </div>
        </el-card>
    </div>
</template>

<script setup name="AccountDetail" lang="ts">
    import { ref, reactive, onMounted, computed } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { listRecord } from '@/api/settlement/chargeRecord';
    import { ChrageRecordVO, ChrageRecordQuery, ChrageRecordForm } from '@/api/settlement/chargeRecord/types';
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const { treatment_user_type, user_sex, charge_way, fee_type, action_status } = toRefs < any > (proxy ?.useDict('treatment_user_type', 'user_sex', 'charge_way', 'fee_type', 'action_status'));
    const route = useRoute();
    const router = useRouter();
    const loading = ref(false);
    const total = ref(0);
    const dateRange = ref([]);
    import { usePatientAccountStore } from '@/store/modules/settlementAccount';
    import { param } from '@/utils';
    const useAccountStore = usePatientAccountStore();
    // 患者信息
    const recordList = ref < ChrageRecordVO[] > ([]);
    // 账户统计信息

    // 查询参数
    const queryParams = reactive({
        pageNum: 1,
        pageSize: 10,
        patientId: useAccountStore.accountInfo.patientId,
        param: {}
    });
    const createTime = ref < [DateModelType, DateModelType] > (['', '']);

    // 字典label工具
    function getDictLabel(dictList: any[], value: string) {
        if (!dictList || !Array.isArray(dictList)) return value || '--';
        const found = dictList.find((item) => item.value === value);
        return found ? found.label : value || '--';
    }

    /** 获取账户详情 */
    const getAccountDetail = async () => {
        try {
            const accountId = route.params.id as string;
            if (!accountId) return;


        } catch (error) {
            console.error('获取账户详情失败:', error);
        }
    };

    /** 获取交易记录列表 */
    const getTransactionList = async () => {
        loading.value = true;
        try {
            // 这里应该调用获取交易记录的API
            const res = await listRecord(proxy ?.addDateRange(queryParams, createTime.value));
            recordList.value = res.rows;
            total.value = res.total;
            // 临时模拟数据
        } catch (error) {
            console.error('获取交易记录失败:', error);
        } finally {
            loading.value = false;
        }
    };

    // 返回按钮
    const goBack = () => {
        router.back();
    };

    /** 查询按钮操作 */
    const handleQuery = () => {

        queryParams.pageNum = 1;
        getTransactionList();
    };

    /** 重置按钮操作 */
    const resetQuery = () => {
        createTime.value = undefined;
        queryParams.pageNum = 1;
        getTransactionList();
    };

    /** 导出按钮操作 */
    const handleExport = () => {
        proxy ?.download('settlement/chargeRecord/export', {
            ...queryParams
        }, `record_${new Date().getTime()}.xlsx`)
    }

    /** 导入按钮操作 */
    const handleImport = () => {
        proxy ?.$modal.msgInfo('导出功能开发中...');
    };

    onMounted(() => {
        getAccountDetail();
        getTransactionList();
    });
</script>

<style lang="scss" scoped>
    .account-detail-container {
        padding: 20px;
        background-color: #f5f7fa;
        min-height: calc(100vh - 84px);
    }

    .patient-info-card {
        margin-bottom: 20px;

        .card-header {
            .header-title {
                font-size: 16px;
                font-weight: 600;
                color: #303133;
            }
        }
    }

    .patient-basic-info {
        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 16px;

            .label {
                font-weight: 500;
                color: #606266;
                min-width: 120px;
                flex-shrink: 0;
            }

            .value {
                color: #303133;
                flex: 1;
            }
        }
    }

    .account-stats-section {
        margin-bottom: 20px;

        .stat-card {
            background: white;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s;

            &:hover {
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            }

            .stat-label {
                font-size: 14px;
                color: #909399;
                margin-bottom: 8px;
            }

            .stat-value {
                font-size: 24px;
                font-weight: 600;
                color: #e6a23c;
            }
        }
    }

    .query-card {
        margin-bottom: 20px;

        .el-form {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-form-item {
                margin-bottom: 0;
            }
        }

        .action-buttons {
            margin-top: 15px;

            .el-button {
                margin-left: 10px;
            }
        }
    }

    .pagination-container {
        display: flex;
        justify-content: right;
        margin-top: 20px;
    }

    :deep(.el-card__header) {
        background-color: #fafafa;
        border-bottom: 1px solid #ebeef5;
    }

    :deep(.el-table) {
        .el-table__header {
            background-color: #fafafa;

            th {
                background-color: #fafafa !important;
                color: #606266;
                font-weight: 600;
            }
        }
    }
</style>