<template>
  <div id="login" class="root">
    <div class="login">
      <div class="phx_container">
        <input class="formlistsubmit phx_button" type="submit" value="登录" name="login_btn"
               @click="login">
        <input class="formlistsubmit phx_button" type="submit" value="登出" name="logout_btn"
               @click="logout">
        <input class="formlistsubmit phx_button" type="submit" value="充值" name="logout_btn"
               @click="recharge">
      </div>
      <div class="title h1">账号信息</div>
      <div class="formlist">账号ID：{{ user.id }}</div>
      <div class="formlist">登录账号：{{ user.username }}</div>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex";
import {createOperatePHX} from "@/sdk/operateBZPHX";

export default {
  name: "UserInfo",
  props: {},
  data() {
    return {
      user: this.$store.state.user //{id: "209321221", username: "醉无邪", usertype: 1}
    }
  },
  methods: {
    ...mapActions([
      'getUser',
      'setUser',
      'addUser'
    ]),

    // 登录
    login() {
      this.invokeOpePHX(opePHX => {
        opePHX.isLogin(({isLogin}) => {
          if (isLogin) {
            this.$message({content: `已经在登录状态，登出后才可重新登录`})
          } else {
            opePHX.login(({success, resultCode, user}) => {
              if (success) {
                this.user = {id: user.uid, username: user.name};
                opePHX.readArchive(({data: role}) => { // 读取存档
                  if (role?.length)
                    this.user.role = role;
                  // todo: 处理登录结果
                  // todo: 读取存档，更新角色信息
                  this.addUser(this.user)
                })
              } else {
                this.$message({content: `登录失败：${resultCode}`})
              }
            })
          }
        })
      });
    },

    // 登出
    logout() {
      this.user = {id: '', username: ''}
      this.invokeOpePHX(opePHX => {
        opePHX.logout();
        this.addUser(this.user)
      });
    },

    // 充值
    recharge() {
      this.invokeOpePHX(opePHX => {
        let money = 10;
        let commodity = `${money * 10} 金币`
        let mark = `cid_xx|uid_xx|${Date.now()}`;
        opePHX.recharge(money, mark, commodity, false,
            ({success, resultCode, message}) => {
              // todo: 游戏充值，处理充值结果
              if (success) {
                this.$message({content: `充值成功，游戏根据服务端回调发放物品：\n ${commodity}`});
              } else
                this.$message({content: `充值失败：${resultCode}, ${message}`})
            });
      })
    },

    invokeOpePHX(callback) {
      createOperatePHX()
          .then(opePHX => {
            callback(opePHX);
          })
          .catch(e => {
            this.$message({content: `错误: ${e.toString()}`})
          })
    }
  }
}
</script>

<style lang="scss" scoped>
.root {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(249, 248, 244, 0.8);
  z-index: 999;
}

.phx_container {
  display: flex;
  padding: 10px 20%;
  flex-direction: row;
  justify-content: center;
}

.phx_button {
  width: 200px;
  height: 60px;
}

.login {
  margin: 40px auto;
  width: 100%;
  align-self: center;
}

.title {
  width: 100%;
  margin: 20px auto;
  text-align: center;
  font-weight: bold;
}

.formlist {
  width: 100%;
  margin: 10px auto;
  text-align: center;
  font-size: 24px;
}

.formbottom {
  width: 250px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}</style>
