<template>
  <div :key="data.updateKey" style="background: #fff;border-radius:10px">
    <a-tabs v-model:activeKey="data.tableKey" @change="selectTabs">
      <a-tab-pane key="1" :disabled="data.isPwdExpired || data.isAudit" tab="基本信息">
        <div class="account-settings-info-view">
          <a-row :gutter="16">
            <a-col :md="16" :lg="16">
              <a-form ref="infoFormModel" :model="data.saveObject" :label-col="{span: 9}" :wrapper-col="{span: 10}" :rules="data.rules">
                <a-form-item label="用户登录名:">
                  <a-input v-model:value="data.saveObject.loginUsername" disabled />
                </a-form-item>
                <a-form-item label="用户姓名：" name="realname">
                  <a-input v-model:value="data.saveObject.realname" />
                </a-form-item>
                <a-form-item label="手机号：" name="telphone">
                  <a-input v-model:value="data.saveObject.telphone" disabled />
                </a-form-item>
                <a-form-item label="请选择性别：">
                  <a-radio-group v-model:value="data.saveObject.sex">
                    <a-radio :value="1">
                      男
                    </a-radio>
                    <a-radio :value="2">
                      女
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-form>
              <a-form-item class="bottom-btn">
                <a-button type="primary" :loading="data.btnLoading" @click="changeInfo">
                  <check-circle-outlined />
                  更新基本信息
                </a-button>
              </a-form-item>
            </a-col>
            <a-col :md="8" :lg="8" :style="{ minHeight: '180px',margin:'0 auto' }">
              <!-- 原始的头像上传，带有图片裁剪功能 -->
              <!-- <div class="ant-upload-preview" @click="$refs.modal.edit(1)" > -->
              <div class="ant-upload-preview">
                <!-- <a-icon type="cloud-upload-o" class="upload-icon"/> -->
                <!-- <div class="mask">
                  <a-icon type="plus" />
                </div> -->
                <img
                  :src="data.saveObject.avatarUrl"
                  style="border: 1px solid rgba(0,0,0,0.08)"
                >

                <JeepayUpload
                  v-model:src="data.saveObject.avatarUrl"
                  bizType="avatar"
                  style="margin-top:10px"
                  :showUploadList="false"
                />
              </div>
            </a-col>
          </a-row>
          <!-- 图片裁剪组件 <avatar-modal ref="modal" @ok="setavatar"/> -->
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="安全信息" :disabled="data.isAudit">
        <a-tabs v-model:activeKey="data.tableKey2" tab-position="left" @change="selectTabsSub">
          <a-tab-pane key="password" tab="修改密码">
            <div class="account-settings-info-view">
              <a-row :gutter="16">
                <a-col :md="16" :lg="16">
                  <a-form ref="pwdFormModel" :model="data.updateObject" :label-col="{span: 9}" :wrapper-col="{span: 10}" :rules="data.rulesPass">
                    <a-form-item label="原密码：" name="originalPwd">
                      <a-input-password v-model:value="data.updateObject.originalPwd" autocomplete="new-password" placeholder="请输入原密码" />
                    </a-form-item>
                    <a-form-item label="新密码：" name="newPwd">
                      <a-input-password v-model:value="data.updateObject.newPwd" autocomplete="new-password" placeholder="请输入新密码" />
                    </a-form-item>
                    <a-form-item label="确认新密码：" name="confirmPwd">
                      <a-input-password v-model:value="data.updateObject.confirmPwd" autocomplete="new-password" placeholder="确认新密码" />
                    </a-form-item>
                  </a-form>
                  <a-form-item class="bottom-btn">
                    <a-button type="primary" :loading="data.btnLoading" @click="confirm">
                      <check-circle-outlined />
                      更新密码
                    </a-button>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
          <a-tab-pane key="mfaVer" tab="MFA认证" :disabled="data.isPwdExpired || data.isAudit">
            <div class="account-settings-info-view">
              <a-row v-if="data.mfaInfo.mfaBindState == '0'" :gutter="12" justify="start">
                <a-col :push="2">
                  <QrcodeVue :value="data.mfaInfo.mfaBindUrl" :size="200" />
                </a-col>
                <a-col :push="3">
                  <a-alert message="" type="warning">
                    <template #description>
                      1.请使用MFA工具
                      <a-popover placement="bottom">
                        <template #content>
                          <p>推荐使用以下工具：</p>
                          <p>1. 阿里云或腾讯云手机客户端</p>
                          <p>2. 微信小程序：二次验证码</p>
                        </template>
                        <question-circle-outlined />
                      </a-popover>
                      ，扫描左侧二维码进行绑定。<br><br>
                      2.扫描完成后，输入工具内对应的验证码。<br><br>
                      注：不能扫码？
                      <a-popover placement="bottom">
                        <template #content>
                          <p>输入以下账号、秘钥进行绑定：</p>
                          <p>账号：{{ data.saveObject.telphone }}</p>
                          <p>秘钥：{{ data.mfaInfo.mfaSecretKey }}</p>
                        </template>
                        <question-circle-outlined />
                      </a-popover>
                    </template>
                  </a-alert>
                </a-col>
              </a-row>
              <a-row v-else>
                <a-col :push="2">
                  <a-alert message="" type="success">
                    <template #description>
                      已完成MFA认证。
                    </template>
                  </a-alert>
                </a-col>
              </a-row>
              <a-row :gutter="12" justify="start" type="flex" style="margin-top: 30px;">
                <a-col :md="6" :lg="6">
                  <a-form ref="mfaFormModel" :model="data.mfaInfo" :rules="data.rulesCode">
                    <a-form-item label="验证码" name="verCode">
                      <a-input v-model:value="data.mfaInfo.verCode" placeholder="请输入验证码" />
                    </a-form-item>
                  </a-form>
                  <a-form-item class="bottom-btn">
                    <a-button v-if="data.mfaInfo.mfaBindState=='0'" type="primary" :loading="data.btnLoading" @click="mfaBindConfirm">
                      <check-circle-outlined />
                      确认绑定
                    </a-button>
                    <a-button v-else type="primary" danger :loading="data.btnLoading" @click="mfaRelieveConfirm">
                      <check-circle-outlined />
                      确认解绑
                    </a-button>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
          <a-tab-pane key="msg" tab="预留信息" :disabled="data.isPwdExpired || data.isAudit">
            <div class="account-settings-info-view">
              <a-row :gutter="16">
                <a-col :md="16" :lg="16">
                  <a-form :label-col="{span: 9}" :wrapper-col="{span: 10}">
                    <a-form-item label="预留信息：" name="">
                      <a-input v-model:value="data.safeWord" placeholder="请输入新的预留信息" show-count :maxlength="10" />
                    </a-form-item>
                  </a-form>
                  <a-form-item class="bottom-btn" style="margin-bottom: 90px;">
                    <a-button type="primary" :loading="data.btnLoading" @click="safeWordUpdate">
                      <check-circle-outlined />
                      确认更新
                    </a-button>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane key="3" :disabled="data.isPwdExpired" tab="基本资料">
        <a-row :gutter="16" style="margin-left: 10%;">
          <a-col :md="16" :lg="16">
            <a-form ref="auditFormModel" :model="data.agentInfo" layout="vertical" :rules="data.auditRules">
              <div v-if="data.agentInfo.infoState !== 1">
                <a-alert v-if="data.agentInfo.state == 4" :message="'请修改默认信息并填写对应资料，提交平台审核。'" type="info" />
                <a-alert v-if="data.agentInfo.state == 3" :message="!data.agentInfo.auditRemark?'驳回原因：无':'驳回原因：' + data.agentInfo.auditRemark" type="error" />
                <a-alert v-if="data.agentInfo.state == 2" message="请等待平台审核......" type="warning" />
                <a-alert v-if="data.agentInfo.state == 1" message="资料已通过审核，请重新登录。" type="success" />
              </div>

              <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">基本名称</a-divider></a-col>
              <a-row justify="space-between" type="flex">
                <a-col :span="10">
                  <a-form-item label="服务商类型" name="agentType">
                    <a-select v-model:value="data.agentInfo['agentType']" defaultValue="1">
                      <a-select-option :value="1">个人</a-select-option>
                      <a-select-option :value="2">企业</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row justify="space-between" type="flex">
                <a-col :span="10">
                  <a-form-item :label="data.agentInfo['agentType'] == 2? '企业全称':'服务商全称'" name="agentName">
                    <a-input v-model:value="data.agentInfo['agentName']" />
                    <span v-if="data.agentInfo['agentType'] == 2" class="jeepay-tip-text">请输入营业执照名称</span>
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item :label="data.agentInfo['agentType'] == 2? '企业简称':'服务商简称'" name="agentShortName">
                    <a-input v-model:value="data.agentInfo['agentShortName']" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row justify="space-between" type="flex">
                <a-col :span="10">
                  <a-form-item label="联系人姓名" name="contactName">
                    <a-input v-model:value="data.agentInfo['contactName']" />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="联系人邮箱" name="contactEmail">
                    <a-input v-model:value="data.agentInfo['contactEmail']" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">账户资料</a-divider></a-col>
              <a-row justify="space-between" type="flex">
                <a-col :span="10">
                  <a-form-item label="收款账户类型" name="settAccountType">
                    <a-select v-model:value="data.agentInfo['settAccountType']" placeholder="请选择账户类型">
                      <a-select-option value="ALIPAY_CASH">个人支付宝</a-select-option>
                      <a-select-option value="BANK_PRIVATE">对私账户</a-select-option>
                      <a-select-option v-if="data.agentInfo['agentType'] !== 1" value="BANK_PUBLIC">对公账户</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row v-if="data.agentInfo['settAccountType'] === 'ALIPAY_CASH'" justify="space-between" type="flex">
                <a-col :span="10">
                  <a-form-item label="账户姓名" name="settAccountName">
                    <a-input
                      v-model:value="data.agentInfo['settAccountName']"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="支付宝账号" name="settAccountNo">
                    <a-input
                      v-model:value="data.agentInfo['settAccountNo']"
                      placeholder="请输入账号"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row v-if="data.agentInfo['settAccountType'] === 'BANK_PRIVATE'" justify="space-between" type="flex">
                <a-col :span="10">
                  <a-form-item label="账户姓名" name="settAccountName">
                    <a-input
                      v-model:value="data.agentInfo['settAccountName']"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="开户银行名称" name="settAccountBank">
                    <a-input
                      v-model:value="data.agentInfo['settAccountBank']"
                      placeholder="请输入银行名称"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="收款银行卡号" name="settAccountNo">
                    <a-input
                      v-model:value="data.agentInfo['settAccountNo']"
                      placeholder="请输入银行卡号"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row v-if="data.agentInfo['settAccountType'] === 'BANK_PUBLIC'" justify="space-between" type="flex">
                <a-col :span="10">
                  <a-form-item label="对公账户名称" name="settAccountName">
                    <a-input
                      v-model:value="data.agentInfo['settAccountName']"
                      placeholder="请输入账户名"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="对公账号" name="settAccountNo">
                    <a-input
                      v-model:value="data.agentInfo['settAccountNo']"
                      placeholder="请输入银行卡号"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="开户银行名称" name="settAccountBank">
                    <a-input
                      v-model:value="data.agentInfo['settAccountBank']"
                      placeholder="请输入银行名称"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="开户行支行名称" name="settAccountSubBank">
                    <a-input
                      v-model:value="data.agentInfo['settAccountSubBank']"
                      placeholder="请输入开户行支行名称"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row justify="space-between" type="flex">
                <a-col v-if="data.agentInfo['settAccountType'] === 'BANK_PRIVATE'" :span="10">
                  <a-form-item label="银行卡照片" name="bankCardImg">
                    <JeepayUpload v-model:src="data.agentInfo['bankCardImg']" bizType="applyment" />
                  </a-form-item>
                </a-col>
                <a-col v-if="data.agentInfo['agentType'] !== 1 && data.agentInfo['settAccountType'] === 'BANK_PUBLIC'" :span="10">
                  <a-form-item label="开户许可证照片" name="permitImg">
                    <JeepayUpload v-model:src="data.agentInfo['permitImg']" bizType="applyment" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-col :offset="1"><a-divider orientation="left" style="color: #1A66FF;">照片资料</a-divider></a-col>
              <a-row justify="space-between" type="flex">
                <a-col :span="10">
                  <a-form-item :label="data.agentInfo['agentType'] == 1?'[联系人]身份证人像面照片':'[法人]身份证人像面照片'" name="idcard1Img">
                    <JeepayUpload v-model:src="data.agentInfo['idcard1Img']" bizType="applyment" />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item :label="data.agentInfo['agentType'] == 1?'[联系人]身份证国徽面照片':'[法人]身份证国徽面照片'" name="idcard2Img">
                    <JeepayUpload v-model:src="data.agentInfo['idcard2Img']" bizType="applyment" />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="[联系人]手持承诺函照片" name="idcardInHandImg">
                    <JeepayUpload v-model:src="data.agentInfo['idcardInHandImg']" bizType="applyment" />
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-row justify="space-between" type="flex">
                    <a-col :span="10">
                      <a-form-item label="手持承诺函照示例：" name="">
                        <a-image style="width: 100px;height: 120px;" src="https://jeepaypublic.oss-cn-beijing.aliyuncs.com/oem/b1cd1646-fdd2-4ea7-8f1f-02a55669f534.svg" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="10">
                      <span><a :href="data.promiseFile">模板下载</a></span>
                    </a-col>
                  </a-row>
                </a-col>

                <a-col v-if="data.agentInfo['agentType'] !== 1" :span="10">
                  <a-form-item label="营业执照照片" name="licenseImg">
                    <JeepayUpload v-model:src="data.agentInfo['licenseImg']" bizType="applyment" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
        <a-form-item v-if="data.agentInfo.state != 1 && data.agentInfo.state != 2" class="bottom-btn">
          <a-button type="primary" :loading="data.btnLoading" @click="auditInfo">
            <check-circle-outlined />
            提交审核
          </a-button>
        </a-form-item>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script  lang="ts" setup>
import { $getUserInfo, $updateUserInfo, $updateUserPass, $getMFAInfo, $mfaBind, $mfaRelieve, upload, $getPasswordRules, $getMainUserInfo, $auditInfo } from '@/api/manage'
import QrcodeVue from 'qrcode.vue'
import ruleGenerator from '@/utils/ruleGenerator'
// import store from '@/store'
import {useUserStore} from '@/store/modules/user'
import { Base64 } from 'js-base64'
import {ref,  reactive,onMounted,getCurrentInstance,toRaw} from 'vue'
import {message} from 'ant-design-vue'
import { getCurrentUserInfo } from '@/api/login'
import { useRoute } from 'vue-router'

const infoFormModel = ref()
const pwdFormModel = ref()
const mfaFormModel = ref()
const auditFormModel = ref()

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
const tabKey = ref()
const data = reactive({
  action: upload.avatar, // 上传图标地址
  btnLoading: false,
  groupKey: 'password',
  passwordRules: /^$/, //密码规则
  passwordRulesText: '', //密码规则提示文字
  safeWord:'',//预留信息
  saveObject: {
    loginUsername: '', // 登录名
    realname: '', //  真实姓名
    telphone: '',
    sex: '',
    avatarUrl: '' // 用户头像
  },
  mfaInfo: {
    mfaBindUrl: '',
    mfaBindState: '',
    mfaSecretKey: '',
    verCode: ''
  },
  updateKey:0, //刷新键
  confirmLoading:false,
  //  avatarUrl: useUserStore().userInfo.avatarImgPath,
  updateObject: {
    originalPwd: '', // 原密码
    newPwd: '', //  新密码
    confirmPwd: '' //  确认密码
  } as any,
  recordId: useUserStore().userInfo.sysUserId, // 拿到ID
  rules: {
    realname: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }]
  },
  rulesCode: {
    verCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  },
  rulesPass: {
    originalPwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
    newPwd: [
      { required: false, trigger: 'blur' },{
        validator: (rule, value) => {
          if (!data.passwordRules.test(data.updateObject.newPwd)) {
            return Promise.reject(data.passwordRulesText)
          } else if(data.updateObject.newPwd !== data.updateObject.confirmPwd) {
            return Promise.reject('新密码与确认新密码不一致')
          } else return Promise.resolve()
        }
      }
    ],
    confirmPwd: [{ required: false, trigger: 'blur' }, {
      validator: (rule, value) => {
          if (!data.passwordRules.test(data.updateObject.confirmPwd)) {
            return Promise.reject(data.passwordRulesText)
          } else if(data.updateObject.newPwd !== data.updateObject.confirmPwd) {
            return Promise.reject('新密码与确认新密码不一致')
          } else return Promise.resolve()
        }
    }]
  },
  tableKey: '1',
  tableKey2:'password',//第二个tabKey
  isPwdExpired: false, //是否强制改密码
  isAudit: false, // 是否强制审核
  auditRules: {
    agentName: [{ required: true, message: '请输入服务商全称', trigger: 'blur' }],
    agentShortName: [{ required: true, message: '请输入服务商简称', trigger: 'blur' }],
    contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
    contactTel: [{ required: true, message: '请输入联系人手机号', trigger: 'blur' }],
    // contactEmail: [{ required: true, message: '请输入联系人邮箱', trigger: 'blur' }],
    licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
    permitImg: [ ruleGenerator.requiredUpload('开户许可证照片') ],
    idcard1Img: [ ruleGenerator.requiredUpload('身份证人像面照片') ],
    idcard2Img: [ ruleGenerator.requiredUpload('身份证国徽面照片') ],
    idcardInHandImg: [ ruleGenerator.requiredUpload('手持身份证照片') ],
    bankCardImg: [ ruleGenerator.requiredUpload('银行卡照片') ],
    agentType: [ ruleGenerator.requiredSelect('服务商类型', 'number') ],
    settAccountType: [ ruleGenerator.requiredSelect('收款账户类型') ],
    settAccountNo: [{ required: true, message: '请输入个人账号/银行卡号', trigger: 'blur' }],
    settAccountName: [{ required: true, message: '请输入账户名', trigger: 'blur' }],
    settAccountBank: [{ required: true, message: '请输入银行名称', trigger: 'blur' }],
    // settAccountSubBank: [{ required: true, message: '请输入开户行支行名称', trigger: 'blur' }],
  },
  agentInfo: {
    agentName: '',
    agentShortName: '',
    contactName: '',
    contactTel: '',
    contactEmail: '',
    licenseImg: '',
    idcardImg: '',
    idcardInHandImg: '',
    bankCardImg: '',
    auditRemark: '',
    infoState: '' as any,
    state: '' as any,
  },

 previewVisible: false,
 previewTitle: '',
 previewImage: '',
 promiseFile: ''
})

onMounted(()=>{

  if(useRoute().query.isPwdExpired == '1'){
    data.isPwdExpired = true
    data.tableKey = '2'
  }
  if(useRoute().query.isAudit === '1'){
    data.isAudit = true
    data.tableKey = '3'
  }

  detail()
  getPasswordRules()
})
function detail () { // 获取基本信息

  $getUserInfo().then(res => {
    data.saveObject = res
    data.safeWord = res.safeWord
  })

  getAgentInfo()
}
function getPasswordRules () { // 获取密码规则
  $getPasswordRules().then(res => {
    data.passwordRules = new RegExp(res.regexpRules)
    data.passwordRulesText = res.errTips
  })
}

function getAgentInfo() {
  // 获取服务商信息
  $getMainUserInfo().then((res) => {
    data.agentInfo = res
    data.promiseFile = res.promiseFile
  })
}

function auditInfo () { // 更新基本信息事件
  auditFormModel.value.validate().then(valid =>{

    $infoBox.confirmPrimary('提交前请仔细核对资料信息，认证通过后将不可更改。', '', () => {
      data.btnLoading = true // 打开按钮上的 loading
      // 请求接口
      $auditInfo(toRaw(data.agentInfo)).then(res => {
        data.agentInfo.state = '2'
        data.btnLoading = false // 关闭按钮刷新
      }).then(bizData => {
        message.success('提交成功')
      }).catch(res => {
        data.btnLoading = false
        message.error('提交失败')
      })
    })
  })
}

function changeInfo () { // 提交审核
  infoFormModel.value.validate().then(valid =>{
    $infoBox.confirmPrimary('确认更新信息吗？', '', () => {
      data.btnLoading = true // 打开按钮上的 loading
      // that.$store.commit('showLoading') // 关闭全局刷新
      // 请求接口
      console.log(toRaw(data.saveObject))
      $updateUserInfo(toRaw(data.saveObject)).then(res => {
        data.btnLoading = false // 关闭按钮刷新
        //$store.commit('hideLoading') // 关闭全局刷新
        return getCurrentUserInfo()
      }).then(bizData => {
        bizData.avatarUrl = data.saveObject.avatarUrl
        bizData.realname = data.saveObject.realname
        useUserStore().refUserInfo() // 刷新用户信息
        // store.commit('SET_USER_INFO', bizData) // 调用vuex设置用户基本信息
        message.success('修改成功')
      }).catch(res => {
        //  that.$store.commit('hideLoading') // 关闭全局刷新
        data.btnLoading = false
        console.log(res)
        message.error('修改失败')
      })
    })
  })
}
function confirm (e) { // 确认更新密码
pwdFormModel.value.validate().then(valid=>{
    $infoBox.confirmPrimary('确认更新密码吗？', '', () => {
      // 请求接口
      data.btnLoading = true // 打开按钮上的 loading
      data.confirmLoading = true // 显示loading
      data.updateObject.recordId = data.recordId // 用户ID
      const copyUpdateObject = JSON.parse(JSON.stringify(data.updateObject))
      copyUpdateObject.originalPwd = Base64.encode(copyUpdateObject.originalPwd)
      copyUpdateObject.confirmPwd = Base64.encode(copyUpdateObject.confirmPwd)

      $updateUserPass(copyUpdateObject).then(res => {
        message.success('修改成功')
        // 退出登录
        useUserStore().logout()
      }).catch(res => {
        data.confirmLoading = false
        data.btnLoading = false
      })
    })
})
}
function selectTabs () { // 清空必填提示
  data.updateObject.originalPwd = ''
  data.updateObject.newPwd = ''
  data.updateObject.confirmPwd = ''
}
// 上传文件成功回调方法，参数value为文件地址，name是自定义参数
function  uploadSuccess (value, name) {
  data.saveObject.avatarUrl = value
  console.log(data.saveObject.avatarUrl)
  data.updateKey += 1
}


// MFA绑定
function mfaBindConfirm() {
  mfaFormModel.value.validate().then(valid =>{
    $infoBox.confirmPrimary('确认绑定MFA认证吗？', '', () => {
      // 请求接口
      data.btnLoading = true // 打开按钮上的 loading
      data.confirmLoading = true // 显示loading
      $mfaBind({verCode: data.mfaInfo.verCode}).then(res => {
        data.confirmLoading = false
        data.btnLoading = false

        getMFAInfo()
        message.success('绑定成功')
        // 退出登录
        // useUserStore().logout()
      }).catch(res => {
        data.confirmLoading = false
        data.btnLoading = false
      })
    })
  })
}

function selectTabsSub (key) { // 清空必填提示
console.log(key)
  if (key) {
    data.groupKey = key
    detail()
  }
  // 获取MFA信息
  if(data.groupKey == 'mfaVer') {
    getMFAInfo()
  }
}

function getMFAInfo() {
  $getMFAInfo().then(res => {
    data.mfaInfo = res
  })
}

// MFA解绑
function mfaRelieveConfirm() {
  mfaFormModel.value.validate().then(valid =>{
    $infoBox.confirmPrimary('确认解绑MFA认证吗？', '', () => {
      // 请求接口
      data.btnLoading = true // 打开按钮上的 loading
      data.confirmLoading = true // 显示loading
      $mfaRelieve({verCode: data.mfaInfo.verCode}).then(res => {
        data.confirmLoading = false
        data.btnLoading = false

        getMFAInfo()
        message.success('解绑成功')
        // 退出登录
        // useUserStore().logout()
      }).catch(res => {
        data.confirmLoading = false
        data.btnLoading = false
      })
    })
  })
}
//更新预留信息
function safeWordUpdate(){
  if(!data.safeWord){
    return message.error('信息内容不可为空')
  }
  $updateUserInfo({safeWord:data.safeWord}).then(res =>{
    message.success('更新成功')
  })
}
</script>
<style lang="less" scoped>

.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}
.bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }
.ant-upload-preview {
  display: block !important;
  text-align:center ;
  position: relative;
  margin: 0 auto;
  width: 100%;
  // max-width: 180px;
  border-radius: 50%;
  // box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0,0,0,0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }

  img, .mask {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>
