<template>
    <h-view id="choose-user" class="public-style" title="请选择登录用户">
        <h-header class="bar-custom">
            <div slot="left" class="h-header-btn">
                <img src="@/assets/userBind/arrow.png" @click="$router.replace('/login')" />
            </div>
            <div slot="center" class="top-word">请选择登录用户</div>
        </h-header>

        <scroll ref="scrollLists" :updateData="[prolists]" :pullUp="false">
            <div class="scroll-box">
                <div
                    class="box"
                    v-for="item of list"
                    :key="item.bp_id"
                    @click="doCheck(item.bp_id)"
                >
                    <div class="name">
                        <img
                            v-if="item.bp_class == 'NP'"
                            src="../assets/login/person.png"
                            alt="自然人"
                        />
                        <img v-else src="../assets/login/bank.png" alt="bank" />
                        <span>{{ item.bp_name }}</span>
                    </div>
                    <div v-show="item.checked">
                        <img src="../assets/login/gou2.png" alt="gou2" />
                    </div>
                </div>
            </div>
        </scroll>

        <button class="submit" :class="{ checked: hasChecked > -1 }" @click="next">
            <img src="../assets/login/gou1.png" alt="自然人" /> 确 认
        </button>
    </h-view>
</template>

<script>

export default {
    name: 'choose-user',
    data() {
        return {
            prolists: [],
            list: []
        }
    },
    computed: {
        hasChecked() {
            return this.list.findIndex(item => item.checked);
        },
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            let url = process.env.basePath + 'user_bp_query';
            let params = { app_user_id: window.localStorage.getItem('app_user_id') };

            try {
                hlsPopup.showLoading('请稍等');
                let query = await this.hlsHttp.post(url, params);

                if (query.result == 'S') {
                    this.hlsPopup.hideLoading();

                    // 自己添加认证文字
                    let register = {
                        NP_NO: "个人待认证",
                        NP_YES: "个人认证通过",
                        ORG_YES: "企业认证通过",
                        ORG_NO: "企业待认证",
                        ORG_L_NO: "法人待认证",
                        ORG_L_YES: "法人认证通过",
                        ORG_AUTH_NO: "授权人待认证",
                        ORG_AUTH_YES: "授权人认证通过"
                    }

                    query.lists = query.lists.map(item => {
                        item.bp_identity_name = register[item.bp_identity];
                        return item;
                    })

                    window.localStorage.setItem('bind-user-list', JSON.stringify(query.lists));

                    this.list = query.lists;

                    // 一个都没有，直接跳过
                    if (!this.list.length) {
                        window.localStorage.setItem('now_user_bp_bind_id', JSON.stringify({}));
                        this.$router.push('tab');
                    }

                    // 如果只有一个，就不用选，直接跳
                    if (this.list.length === 1) {
                        this.list[0].checked = true;
                        this.next();
                    }
                } else {
                    this.hlsPopup.hideLoading();
                    this.hlsPopup.showLongCenter(res.message);
                }
            } catch (error) {
                this.hlsPopup.hideLoading();
            }

        },
        doCheck(id) {
            this.list = this.list.map(item => {
                item.checked = item.bp_id == id;
                return item;
            })
        },
        next() {
            let index = this.hasChecked;
            if (index > -1) {
                window.localStorage.setItem('now_user_bp_bind_id', JSON.stringify(this.list[index]));
                this.$router.push('tab');
            } else {
                this.hlsPopup.showLongCenter('请选择');
            }
        }
    },
}
</script>

<style lang='less'>
#choose-user {
    background-color: rgb(242, 242, 242);
    .scrollContent {
        background-color: rgb(242, 242, 242);
    }

    .scroll-box {
        padding: 8px;

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

            width: 99.9%;
            height: 60px;
            padding: 0 20px 0 10px;
            background-color: #fff;
            border-radius: 8px; 
            font-size: 80%;
            color: rgb(58, 58, 58);
            margin-bottom: 0.15rem;

            img {
                height: 20px;
                vertical-align: text-bottom;
            }
        }
    }

    .submit {
        position: absolute;
        box-sizing: border-box;
        height: 35px;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        padding: 6px 40px;
        font-size: 85%;
        border-radius: 20px;
        background-color: rgb(194, 199, 204);
        img {
            height: 18px;
            vertical-align: text-bottom;
        }
    }
    .checked {
        background-color: #1d3fff;
    }

    .content {
        position: absolute;
        top: 0;
    }

    .scrollContent {
        //padding-top: 1.92rem;
        padding-bottom: 20px;
    }
}

.platform-ios {
    #query {
        .scrollContent {
            padding-top: 2.32rem;
        }
    }
}

// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
        #query {
            .scrollContent {
                padding-top: 2.72rem;
            }
        }
    }

    #choose-user .submit {
        bottom: 44px;
    }
}

// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
        #query {
            .scrollContent {
                padding-top: 2.72rem;
            }
        }
    }

    #choose-user .submit {
        bottom: 44px;
    }
}
</style>