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

    <scroll ref="scrollLists" :updateData="[prolists]" :pullUp="false">
      <div class="scroll-box">
        <div
          v-for="item of list"
          :key="item.bp_id"
          class="box"
          @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="{ checked: hasChecked > -1 }" class="submit" @click="next">
      <img src="../assets/login/gou1.png" alt="自然人" > 确 认
    </button>
  </h-view>
</template>

<script>

export default {
  name: 'ChooseUser',
  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>
