<template>
    <div>
        <h4 class="title">选择账号列表</h4>
        <ul class="user-list">
            <li class="user-item" v-for="item in list" :key="item.ID" >
                <a :href="`${host}/api/Weixin/OAuth2/WeixinOpendLoginSuccessRedirect?userId=${item.pf_userid}&openId=${openId}`">
                    <p class="school-name">{{ item.school_name }}</p>
                    <p class="flex user-name">
                        <span>{{ item.user_name }}</span>
                        <span>{{ item.realname }}</span>
                    </p>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'SelectUser',
    props: {
        openId: {
            type: String,
            default: ''
        },
        userId: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            list: []
        }
    },
    computed: {
        host () {
            return process.env.API_ROOT
        }
    },
    created () {
        this.getRelationAccountList()
    },
    mounted () {},
    methods: {
        getRelationAccountList () {
            let { userId } = this
            this.$api.loginApi.getRelationAccountList({
                userId
            }).then(res => {
                this.$handleResponse(res).then(data => {
                    this.list = data
                })
            })
        },
        redirect (i) {
            let { pf_userid: userId } = this.list[i]
            let { openId } = this
            this.$api.loginApi.weixinOpendLoginSuccessRedirect({
                userId,
                openId
            }).then(res => {
                this.$handleResponse(res)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.title {
    line-height: 44px;
    padding: 12px 0;
    text-align: center;
    color: #000;
    font-size: 22px;
}
.user-list {
    .user-item {
        a {
            display: block;
            color: #606266;
            background-color: #F2F2F2;
            padding: 10px 15px;
            .school-name {
                font-weight: bold;
                font-size: 16px;
                margin-bottom: 8px;
            }
            .user-name {
                justify-content: space-between;
                font-size: 15px;
            }
        }
    }
    .user-item + .user-item {
        margin-top: 10px;
    }
}
</style>
