<template>
  <div class="min-h-screen flow-root" style="background: #f9f9f9">
    <div style="height: 50px; margin-bottom: 20px"></div>
    <syHeaderNavBar
      class="fixed top-0 left-0 right-0"
      @back="() => $router.back()"
      @close="() => $router.back()"
    >
      <div class="flex w-full justify-center items-center">
        <BlackModeMenu
          :modelValue="($route.query.type as string)"
          @update:modelValue="
            ($event) =>
              $router.replace({
                query: {
                  type: $event,
                },
              })
          "
          :list="menuList"
        ></BlackModeMenu>
      </div>
    </syHeaderNavBar>
    <ModuleContainer class="mx-auto" style="width: 1200px; min-height: 500px">
      <base-info
        v-show="$route.query.type === 'info'"
        :infos="userInfo"
        @ToUpdate="ToUpdate"
      ></base-info>
      <Authenticate
        v-show="$route.query.type === 'authenticate'"
        :infos="userInfo"
        @ToUpdate="ToUpdate"
      ></Authenticate>
      <assets v-show="$route.query.type === 'asset'" :infos="userInfo"></assets>
      <Secutiry
        v-show="$route.query.type === 'security'"
        :infos="userInfo"
        @ToUpdate="ToUpdate"
      ></Secutiry>
      <div style="height: 400px" v-show="$route.query.type === 'orderRecords'">
        <OrderRecords></OrderRecords>
      </div>
    </ModuleContainer>
  </div>
  <div class="">
    <common-dialog
      :visible="showVerify"
      @closePopup="showVerify = false"
      showMask
      type="element"
      :elementDialogProps="{
        title: '选择验证方式',
      }"
      :btnConfig="{
        type: 'noBorder',
        btns: [{
            name: '取消',
            disabled: false,
            loading: false,
            type: 'default' as const,
          },
          {
              name: '确定',
              disabled: false,
              loading: false,
              type: 'primary' as const,
          }
        ],
        btnFunctions: [{
            name: '取消',
            async click(){
                return true;
            },
        }, {
            name: '确定',
            click: async() =>{
              ($refs as any).verifyDialog.confirm()
              return true;
            },
        }]
      }"
    >
      <verify-dialog
        ref="verifyDialog"
        @cancel="showVerify = false"
      ></verify-dialog>
    </common-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { syCommonDialog, syHeaderNavBar, syMenu } from "cqk-sy-ui";
import BaseInfo from "./components/BaseInfo.vue";
import Assets from "./components/Assets.vue";
import SafeSet from "./components/SafeSet.vue";
import VerifyDialog from "./components/VerifyType.vue";
import { GO_URLS } from "cqk-sy-ui";
import { getUserInfo } from "@/service/Api.service";
import { setuserInfos } from "@/store/mutations";
import { $ajax } from "@/service";
import Avatar from "@/components/Avatar/index.vue";
import BlackModeMenu from "@/components/BlackModeMenu/index.vue";
import ModuleContainer from "./components/ModuleContainer/index.vue";
import Authenticate from "./components/Authenticate/index.vue";
import Secutiry from "./components/Secutiry/index.vue";
import { router } from "@/router";
import OrderRecords from "./components/OrderRecords/index.vue";

export default defineComponent({
  provide() {
    return {
      passwordStatus: this.setOptions.password,
      userInfo: this.userInfo,
      ident: this.setOptions.ident,
      setType: (t: string) => {
        router.push({
          query: {
            type: t,
          },
        });
      },
    };
  },
  components: {
    BaseInfo,
    Assets,
    SafeSet,
    CommonDialog: syCommonDialog,
    VerifyDialog,
    Avatar,
    syHeaderNavBar,
    syMenu,
    BlackModeMenu,
    ModuleContainer,
    Authenticate,
    Secutiry,
    OrderRecords,
  },
  data() {
    return {
      menuList: [
        { label: "个人资料", value: "info" },
        { label: "认证信息", value: "authenticate" },
        { label: "资产管理", value: "asset" },
        { label: "账户安全", value: "security" },
        { label: "订单记录", value: "orderRecords" },
      ] as any[],
      userInfo: {} as any,
      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, //当前用户的一个状态
    };
  },
  mounted() {
    this.getUserInfos();
    if (!this.$route.query.type) {
      this.$router.replace({
        query: {
          type: this.menuList[0].value as string,
        },
      });
    }
  },
  methods: {
    ToUpdate() {
      this.getUserInfos();
    },
    // 获取当前用户状态
    to(destination: any) {
      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;
        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: any) {
      const res = await $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 lang="scss">
.g-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-center {
  position: relative;
  padding: 16px;
  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>
