<template>
  <div style="background: #fff">
    <a-tabs>
      <a-tab-pane key="securityConfig" tab="安全管理">
        <div v-if="vdata.groupKey == 'securityConfig'">
          <a-form ref="sipwFormModel" :model="vdata.sipwObject" :label-col="{span: 3}" :wrapper-col="{span: 6}" :rules="sipwRules">
            <a-form-item v-if="flag" label="原支付密码：" name="originalPwd">
              <a-input-password v-model:value="vdata.sipwObject.originalPwd" maxlength="6" autocomplete="new-password" placeholder="请输入原密码" />
            </a-form-item>
            <a-form-item label="新支付密码：" name="newPwd">
              <a-input-password v-model:value="vdata.sipwObject.newPwd" maxlength="6" autocomplete="new-password" placeholder="请输入新密码" />
            </a-form-item>
            <a-form-item label="确认新支付密码：" name="confirmPwd">
              <a-input-password v-model:value="vdata.sipwObject.confirmPwd" maxlength="6" autocomplete="new-password" placeholder="确认新密码" />
            </a-form-item>
            <a-form-item class="bottom-btn">
              <a-button :disabled="!$access('ENT_AGENT_CONFIG_EDIT')" type="primary" :loading="vdata.btnLoading" @click="confirmUpdateSipw"><check-circle-outlined />确认更改</a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { $updateAgentSipw, $isSipw } from '@/api/manage'
onMounted(()=>{
  isSipw()
})
const flag = ref(true)
const isSipw = ()=>{
  $isSipw().then(res=>{
    flag.value = res
  })
}
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

const sipwFormModel = ref()

const sipwRules = {
  originalPwd: [{ required: true, pattern: /^\d{6}$/, message: '请输入原密码(6位数字格式)', trigger: 'blur' }],
  newPwd: [{ required: true, pattern: /^\d{6}$/, message: '请输入新支付密码(6位数字格式)', trigger: 'blur' }],
  confirmPwd: [
      { required: true, trigger: 'blur', validator: (rule, value) => {
          if(vdata.sipwObject.newPwd != value){
            return Promise.reject('新密码与确认新密码不一致')
          }
          return Promise.resolve()
        },
      }
    ],
}

const vdata : any = reactive ({
  btnLoading: false,
  groupKey: 'securityConfig',
  sipwObject:{ } // 支付密码保存对象

})

// 更新支付密码
function confirmUpdateSipw(){

  sipwFormModel.value.validate().then(() => {
    return $updateAgentSipw(vdata.sipwObject.originalPwd, vdata.sipwObject.confirmPwd)
  }).then((res) => {
     $infoBox.message.success('更新成功')
  })
}


</script>
<style lang="less" scoped>
  .bottom-btn{
    /deep/ div{
      display: flex;
      justify-content: center;
    }
  }
  .typePopover {
  position: absolute;
  top: -30px;
  left: 93px;
}
</style>
