<template>
  <div class="first_step">
    <div class="step_title">安全设置</div>
    <div class="form_part">
      <div class="form_item">
        <div class="form_title">验证人数</div>
        <CommonInput v-model="form_value.need_two_face" height="40px"  />
      </div>
      <!-- <div class="form_item">
        <div class="form_title">新密码</div>
        <CommonInput v-model="form_value.new_pwd" height="40px" inputType="password"></CommonInput>
      </div>
      <div class="form_item">
        <div class="form_title">确认密码</div>
        <CommonInput
          v-model="form_value.check_pwd"
          height="40px"
          inputType="password"></CommonInput>
      </div> -->
    </div>
    <div class="footer_btn">
      <CommonButton
        msg="返回"
        size="default"
        type="info"
        @click="router.push('/home')"></CommonButton>
      <CommonButton msg="保存" size="default" type="danger" @click="handleSet"></CommonButton>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { isEmpty } from '@/utils/index';
import { notify } from '@/utils/message';
import { resetPwd,getDeviceInfo,setSafetyInfo } from '@/api/user';
const router = useRouter();
const form_value = ref({
  old_pwd: '',
  new_pwd: '',
  check_pwd: '',
  need_two_face:1
});
let device_id = ref('')
const save = async () => {
  if (form_value.value.old_pwd === '') {
    return notify('请输入原密码', 'danger');
  }
  if (form_value.value.new_pwd === '') {
    return notify('请输入新密码', 'danger');
  }
  if (form_value.value.check_pwd === '') {
    return notify('确认密码不能为空', 'danger');
  }
  if (form_value.value.new_pwd !== form_value.value.check_pwd) {
    return notify('新密码与确认密码不一致', 'danger');
  }
  let useInfo = JSON.parse(sessionStorage.getItem('userInfo'));
  // let { userId } = useInfo;
  let params = {
    userId: useInfo.user_id,
    userPwd: form_value.value.new_pwd
  };
  let res = await resetPwd(params);
  let { status, message } = res.data;
  if (status) {
    notify(message, 'success');
    router.push('/home');
  } else {
    return notify(message, 'danger');
  }
};

const handleSet = async()=>{
  if(!form_value.value.need_two_face)return notify('请填写验证人数！', 'danger');
  const regex = /^[1-9]\d*$/;
  if(!regex.test(form_value.value.need_two_face)){
    return notify('请输入正确的数字！', 'danger');
  }
  if(form_value.value.need_two_face == 0) return notify('验证人员至少为一人！', 'danger');
  if(form_value.value.need_two_face >2) return notify('验证人数不能超过2人！', 'danger');
  let {data} =await setSafetyInfo(device_id.value,{
    need_two_face:Number(form_value.value.need_two_face) 
  });
  if(data.code == 200){
    notify('设置成功','success')
    router.push('/home');
  }else{
    notify(data.desc)
  }
}
const getDeviceInfoMethods = async()=>{
  let {data} = await getDeviceInfo();
  if(data.code == 200){
    device_id.value = data.data.device_id;
    form_value.value.need_two_face = data.data.need_two_face;
  }
}
getDeviceInfoMethods()
</script>
<style lang="less" scoped>
@COOMSIZE: 36px;
.first_step {
  padding: @COOMSIZE;
  background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.26);
  border-radius: 2px 2px 2px 2px;
  width: 100%;
  .step_title {
    font-size: @COOMSIZE;
    font-weight: bold;
    color: #3a3a3a;
  }
  .suffix {
    position: absolute;
    right: 6px;
    color: #b8b8b8;
  }
  .form_part {
    margin-top: 300px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 140px;
    .form_item {
      font-size: @COOMSIZE;
      display: flex;
      align-items: center;
      color: #666666;
      margin-bottom: 61px;
      .form_title {
        margin-right: 20px;
        min-width: 144px;
      }
    }
  }
  .footer_btn {
    display: flex;
    justify-content: space-between;
  }
}
</style>
