<template>
  <div class="user-center">
    <div class="g-flex-between">
      <base-info :infos="userInfo" @ToUpdate="ToUpdate"></base-info>
      <assets :infos="userInfo"></assets>
    </div>
    <!-- 信息修改 -->
    <div class="g-flex-between set-box">
      <safe-set :Infos="setOptions.ident" @to="to"></safe-set>
      <safe-set :Infos="setOptions.password" @to="to"></safe-set>
      <safe-set :Infos="setOptions.phone" @to="to"></safe-set>
    </div>
    <common-dialog
      v-if="showVerify"
      showMask
      close
      @ClickingBackground="showVerify = false"
    >
      <verify-dialog @cancel="showVerify = false"></verify-dialog>
    </common-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import CommonDialog from "@/components/CommonDialog.vue";
import BaseInfo from "./BaseInfo.vue";
import Assets from "./Assets.vue";
import SafeSet from "./SafeSet.vue";
import VerifyDialog from "./VerifyType.vue";
import { getUserInfo } from "./Api.service";
import { GO_URLS } from "@/config/URLS";
export default Vue.extend({
  data() {
    return {
      userInfo: {},
      setOptions: {
        ident: {
          title: "实名认证",
          icon: "iconshiming",
          msg: "关联实名信息，加强安全堡垒",
          status: false,
          btntext: "立即认证",
          afterText: null,
          destination: 0,
        },
        password: {
          title: "登录密码",
          icon: "icondenglu",
          msg: "防止信息泄密，重新设置密码",
          status: false,
          btntext: "设置密码",
          afterText: "修改密码",
          destination: 1,
        },
        phone: {
          title: "绑定手机",
          icon: "iconshouji",
          msg: "绑定手机登录，增强信息安全",
          status: false,
          btntext: "绑定手机号",
          afterText: "更改手机号",
          destination: 2,
        },
      },
      showVerify: false,
      status: 0, //当前用户的一个状态
    };
  },
  components: {
    BaseInfo,
    Assets,
    SafeSet,
    CommonDialog,
    VerifyDialog,
  },
  mounted() {
    this.getUserInfos();
  },
  methods: {
    ToUpdate() {
      this.getUserInfos();
    },
    // 获取当前用户状态
    to(destination) {
      switch (destination) {
        case 0:
          if (this.status === 1 || this.status === 2) {
            router = "companyVerify";
          } else {
            if (this.userInfo.auth_type === 1) {
              this.$router.push({ path: "personVerify" });
            } else if (this.userInfo.auth_type === 2) {
              this.$router.push({ path: "companyVerify" });
            } else if (this.userInfo.auth_type === 0) {
              this.showVerify = true;
            }
          }
          break;
        case 1:
          if (this.setOptions.password.status) {
            this.$router.push("/editPassword");
          } else {
            this.$router.push("/initPassword");
          }
          break;
        case 2:
          this.$router.push("/editPhone");
          break;
        default:
          break;
      }
    },
    // 获取用户基本信息
    async getUserInfos() {
      const res = await getUserInfo();
      if (res) {
        this.userInfo = res.data;
        this.$store.commit("setuserInfos", res.data);
        this.setOptions.ident.status = res.data.auth_suc === 1 ? true : false;
        this.setOptions.phone.status = res.data.phone !== "" ? true : false;
        //login_type 1:手机号 2:邮箱
        let params = {};
        if (sessionStorage.getItem("login_type") == 1) {
          params = { phone: this.userInfo.phone };
          this.isSetPwd(params);
        } else {
          params = { email: this.userInfo.email };
          this.isSetPwd(params);
        }
      }
    },
    // 验证是否设置过密码
    async isSetPwd(params) {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.isSetPwd,
        params: params,
      });
      if (res) {
        this.setOptions.password.status =
          res.data.is_set_pwd === 1 ? true : false;
      }
    },
  },
});
</script>

<style scoped>
.g-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-center {
  position: relative;
  padding: 16px;
  min-height: calc(100vh - 95px);
  min-width: 1200px;
  background: #f8fafb;
}
.set-box {
  margin-top: 20px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

 