<template>
    <view class="container">
        <scroll-view scroll-y class="content">
            <!-- 账户信息 -->
            <view class="card">
                <view class="card-header">
                    <text class="section-title">账户信息</text>
                </view>
                <view class="info-item">
                    <text class="label">手机号码</text>
                    <text class="value">{{ userInfo.phone }}</text>
                </view>
            </view>

            <!-- 身份信息 -->
            <view class="card">
                <view class="card-header">
                    <view class="header-actions">
                        <text class="section-title">身份信息</text>
                        <view :class="['status-tag', authStatus.identity ? 'verified' : 'unverified']">
                            {{ authStatus.identity ? '已认证' : '未认证' }}
                        </view>
                        <button :class="['action-btn', authStatus.identity ? 'verified' : 'unverified']"
                                @click="navigateTo('identity')">
                            {{ authStatus.identity ? '更新' : '编辑并认证' }}
                        </button>
                    </view>
                </view>
                <view class="image-row">
                    <view class="image-box" v-for="(img, index) in idCardImages" :key="index">
                        <image v-if="img" :src="img" mode="aspectFill" class="id-image"/>
                        <view v-else class="image-placeholder">
                            {{ index === 0 ? '身份证正面' : '身份证反面' }}
                        </view>
                    </view>
                </view>
                <view class="info-item">
                    <text class="label">姓名</text>
                    <text class="value">{{ identityInfo.name }}</text>
                </view>
                <view class="info-item">
                    <text class="label">身份证号</text>
                    <text class="value">{{ identityInfo.idNumber }}</text>
                </view>
            </view>

            <!-- 银行卡信息 -->
            <view class="card">
                <view class="card-header">
                    <view class="header-actions">
                        <text class="section-title">银行卡信息</text>
                        <view :class="['status-tag', authStatus.bank ? 'verified' : 'unverified']">
                            {{ authStatus.bank ? '已认证' : '未认证' }}
                        </view>
                        <button :class="['action-btn', authStatus.bank ? 'verified' : 'unverified']"
                                @click="navigateTo('bank')">
                            {{ authStatus.bank ? '更新' : '编辑并认证' }}
                        </button>
                    </view>
                </view>
                <view class="info-item">
                    <text class="label">银行卡号</text>
                    <text class="value">{{ bankInfo.cardNumber }}</text>
                </view>
                <view class="info-item">
                    <text class="label">开户行</text>
                    <text class="value">{{ bankInfo.bankName }}</text>
                </view>
                <view class="info-item">
                    <text class="label">预留手机</text>
                    <text class="value">{{ bankInfo.phone }}</text>
                </view>
            </view>

            <!-- 资质信息 -->
            <view class="card">
                <view class="card-header">
                    <view class="header-actions">
                        <text class="section-title">资质信息</text>
                        <view :class="['status-tag', authStatus.qualification ? 'verified' : 'unverified']">
                            {{ authStatus.qualification ? '已备案' : '未备案' }}
                        </view>
                        <button :class="['action-btn', authStatus.qualification ? 'verified' : 'unverified']"
                                @click="navigateTo('qualification')">
                            {{ authStatus.qualification ? '更新' : '去上传' }}
                        </button>
                    </view>
                </view>
                <view class="info-item">
                    <text class="label">备案信息</text>
                    <text class="value">{{ qualificationInfo.type }}</text>
                </view>
                <view class="info-item">
                    <text class="label">备案编号</text>
                    <text class="value">{{ qualificationInfo.recordNumber }}</text>
                </view>
                <view class="image-row">
                    <view class="image-box" v-for="(cert, index) in qualificationInfo.certs" :key="index">
                        <image :src="cert" mode="aspectFill" class="cert-image"/>
                    </view>
                    <view v-if="qualificationInfo.certs.length < 2" class="image-box">
                        <view class="image-placeholder">上传证书</view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import {authApi} from "@/api/auth";

export default {
    data() {
        return {
            // 用户信息
            userInfo: {
                phone: ''
            },
            authInfo: {},

            // 认证状态
            authStatus: {
                identity: false,
                bank: false,
                qualification: false
            },

            // 身份信息
            identityInfo: {
                name: '',
                idNumber: ''
            },
            idCardImages: [null, null],

            // 银行卡信息
            bankInfo: {
                cardNumber: '', // 根据实际接口调整
                bankName: '',
                phone: '',
                realName:''
            },

            // 资质信息
            qualificationInfo: {
                type: '医药代表备案信息',
                recordNumber: '',
                certs: []
            }
        }
    },

    onLoad() {
        this.getAuthInfoApi()
    },
    onShow() {
        this.getAuthInfoApi()
    },
    methods: {
        navigateTo(type) {
            const routes = {
                identity: '/pages/auth/identity',
                bank: '/pages/auth/bank',
                qualification: '/pages/auth/qualification'
            }

            // 携带当前数据到下个页面
            let params = {}
            switch(type) {
                case 'identity':
                    params = {
                        threeAuthInfo: this.authInfo.threeAuthInfo,
                        ocrInfo: this.authInfo.ocrInfo
                    }
                    break
                case 'bank':
                    params = {fourAuthInfo: this.authInfo.fourAuthInfo}
                    break
                case 'qualification':
                    params = {certificateInfo: this.authInfo.certificateInfo}
                    break
            }

            uni.navigateTo({
                url: `${routes[type]}?payload=${encodeURIComponent(JSON.stringify(params))}`
            })
        },

        async getAuthInfoApi(){
            try {
                const res = await authApi.getAuthInfoApi()
                this.authInfo = res.data

                // 账户信息
                this.userInfo.phone = this.authInfo.phone

                // 认证状态
                this.authStatus.identity = this.authInfo.isLivenessAuth === 1
                this.authStatus.bank = this.authInfo.isFourAuth === 1
                this.authStatus.qualification = !!this.authInfo.certificateInfo?.recordNumber

                // 身份信息
                if (this.authInfo.threeAuthInfo) {
                    this.identityInfo.name = this.authInfo.threeAuthInfo.realname
                    this.identityInfo.idNumber = this.authInfo.threeAuthInfo.idcard
                }

                // 身份证图片
                if (this.authInfo.ocrInfo) {
                    this.idCardImages = [
                        this.authInfo.ocrInfo.front,
                        this.authInfo.ocrInfo.back
                    ]
                }

                // 银行卡信息
                if (this.authInfo.fourAuthInfo) {
                    this.bankInfo.cardNumber = this.authInfo.fourAuthInfo.cardNumber
                    this.bankInfo.bankName = this.authInfo.fourAuthInfo.bankName
                    this.bankInfo.phone = this.authInfo.fourAuthInfo.phone
                }

                // 资质信息
                if (this.authInfo.certificateInfo) {
                    this.qualificationInfo.recordNumber = this.authInfo.certificateInfo.recordNumber
                    // 合并医疗文件和其他文件
                    const allCerts = [
                        ...(this.authInfo.certificateInfo.medicalFiles || []),
                        ...(this.authInfo.certificateInfo.otherFiles || [])
                    ]
                    this.qualificationInfo.certs = allCerts.slice(0, 2)
                }
            } catch (e) {
                console.error('获取认证信息失败', e)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
/* 基础样式 */
.container {
    background: #f5f5f5;
    min-height: 100vh;
    padding: 20rpx;
}

/* 卡片样式 */
.card {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 0 32rpx;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70rpx;
        border-bottom: 1rpx solid #eee;
        padding: 20rpx 0;

        .section-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }

        .header-actions {
            display: contents;
            align-items: center;
            gap: 20rpx;
        }
    }
}

/* 信息项严格对齐 */
.info-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    //padding: 10rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
        border-bottom: none;
    }

    .label {
        width: 200rpx;
        color: #666;
        font-size: 28rpx;
        flex-shrink: 0;
    }

    .value {
        flex: 1;
        color: #333;
        font-size: 28rpx;
        text-align: right;
        padding-left: 20rpx;
    }
}

/* 状态标签 */
/*.status-tag {
    font-size: 24rpx;
    padding: 6rpx 20rpx;
    border-radius: 6rpx;

    &.verified {
        background: #fffbe6;
        color: #faad14;
    }

    &.unverified {
        background: #fff2f0;
        color: #ff4d4f;
    }
}*/

.status-tag {
    font-size: 24rpx;
    padding: 6rpx 15rpx;
    border-radius: 6rpx;
    margin-left:20rpx;
    &.verified {
        background: #e8f5e9;
        color: #4caf50;
    }

    &.unverified {
        background: #fef0f0;
        color: #f56c6c;
    }
}

/* 操作按钮 */
.action-btn {
    height: 56rpx;
    line-height: 56rpx;
    padding: 0 32rpx;
    font-size: 26rpx;
    border-radius: 28rpx;
    margin-right:0;

    &.verified {
        background: #fff;
        border: 1rpx solid #faad14;
        color: #faad14;
    }

    &.unverified {
        background: #fff;
        border: 1rpx solid #1890ff;
        color: #1890ff;
    }
}

/* 图片展示 */
.image-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
    padding: 24rpx 0;

    .image-box {
        aspect-ratio: 3/2;
        background: #f5f5f5;
        border-radius: 12rpx;
        overflow: hidden;

        .id-image, .cert-image {
            width: 100%;
            height: 100%;
        }

        .image-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 28rpx;
        }
    }
}
</style>
