<template>
  <div>
    <div class="login-wrap">
      <div>
        <h4 class="title">我的账号</h4>
        <div class="account">
          <div v-for="item in account_list" :key="item.index" class="account-panel" @click="selectAccount(item)">
            <img src="../../assets/avatar.png" style="margin-right:10px" width="50" height="50" alt="">
            <div style="flex:1;">
              {{item.name}}<el-tag style="margin-left:5px" size="mini" :type="'danger'">{{item.sitename}}</el-tag><br>
              <small class="color-info">联系人:{{item.name}}</small>
              <el-divider direction="vertical"></el-divider>
              <small class="color-info">联系电话:{{item.phonenumber}}</small>
              <el-divider direction="vertical"></el-divider>
              <!-- <small class="color-info">站点:{{item.sitename}}</small> -->
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      account_list:[]
    }
  },
  methods:{
    // 选择登录账号
    selectAccount (item) {
      sessionStorage.setItem('active_account',JSON.stringify(item))
      this.query_userauth()
    },
    // 查询应用授权
    async query_userauth () {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.userauth.userauth",
        "method": "query_userauth",
        "content": {
        }
      })

      this.auth_data = res.data

      sessionStorage.setItem('module_info',JSON.stringify(this.auth_data))
      this.$router.push('/main')
    }
  },
  created () {
    this.account_list = JSON.parse(sessionStorage.getItem('account_list'))
    if (this.account_list.length === 1) {
      this.selectAccount(this.account_list[0])
    }
  }
}

</script>
<style>
.account{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 1200px;
}
.account-panel{
  flex:1 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 320px;
  height: 90px;
  padding: 0 24px;
  margin: 0 10px;
  margin-bottom: 24px;
  border-radius: 4px;
  transition: box-shadow .2s ease;
  position: relative;
  background: #fff;
  box-shadow: 0 0 4px 0 rgb(197 206 219 / 30%), 0 4px 8px 0 rgb(197 206 219 / 20%);
  cursor: pointer;
}
</style>
<style scoped>
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 33px;
  margin: 0 0 30px;
  color: #202d40;
  font-size: 24px;
  font-weight: 600;
}
.login-wrap{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100vh - 100px);
  padding: 50px 0;
  background: #fff no-repeat 50% url(../../assets/bg.png);
  background-size: 2560px 1490px;
}
</style>