<template>
    <div class="container">
      <div class="welcome-wrapper">
        <p class="title">欢迎使用 :)</p>
      </div>
      <div class="login-wrapper">
        <p class="reset-title">修改密码</p>
        <div class="change_pass">
          <van-cell-group inset class="custom-cell-group">
            <van-field v-model="password" class="custom-field" type="password" label="原始密码" />
            <van-field v-model="password1" class="custom-field" type="password" label="新密码" />
            <van-field v-model="password2" class="custom-field" type="password" label="确认新密码" />
          </van-cell-group>
        </div>
        <div class="button-group">
          <van-button type="primary" size="normal" class="flex-grow" @click="handleSubmit">确认</van-button>
          <van-button type="primary" size="normal" class="flex-grow" @click="handleReset">取消</van-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { useRouter } from 'vue-router';
  import { ref } from 'vue';
  import '@vant/touch-emulator';
  import axios from 'axios'; // 引入axios库

  export default {
    setup() {
      const router = useRouter();
      const jsonId = ref(1); // 初始 JSON ID

      const password = ref('');
      const password1 = ref('');
      const password2 = ref('');
  
      const handleSubmit = () => {
        const newPwd = password1.value.trim();
        const rePwd = password2.value.trim();
  
        if (!newPwd || !rePwd) {
          showFailToast('密码不能为空');
          return;
        } else if (newPwd !== rePwd) {
          showFailToast('密码不一致');
          return;
        }
  
        const requestData = {
          "JSON_id": jsonId.value,
          "LPR_card": {
            "gateway": {
              "type": 2,
              "pass": password.value,
              "new_pass": password1.value
            }
          }
        };
  
        // 发送修改密码的请求
        console.log(JSON.stringify(requestData)); // 打印构造的 JSON 数据
        axios.post(`/communication`, requestData, {
        headers: {
          "content-type": "application/json"
        }
      })
      .then(response => {
          // 处理成功响应
          showSuccessToast('修改成功');

          console.log(response.data);
          // 每次发送成功后增加 JSON ID
          jsonId.value++;
          router.push('/');
        })
        .catch(error => {
          // 处理错误
          showFailToast('修改失败');
          console.error(error);
        });

      };
  
      const handleReset = () => {
        // 处理取消逻辑
        router.push('/login');
      };
  
      return { password, password1, password2, handleSubmit, handleReset };
    }
  };
  </script>
  
  <style scoped>
  .container {
    height: 100vh;
    background-image: linear-gradient(0deg, #78e6f5 0%, #0668fc 100%);
  }
  
  .flex-grow {
    flex-grow: 1;
    margin-right: 10px;
    margin-left: 10px;
  }
  
  .welcome-wrapper {
    position: absolute;
    left: 20px;
    top: 10px;
    color: #fff;
  }
  
  .change_pass {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .custom-cell-group {
    width: 100%;
  }
  
  .container .login-wrapper {
    background-color: #fff;
    width: 60%;
    height: 400px;
    padding: 0 10%;
    position: fixed;
    left: 50%;
    border-radius: 15px;
    top: 50%;
    transform: translate(-50%, -50%);
    animation-name: fadeIn;
    margin-bottom: 10px;
  }
  
  .reset-title {
    font-size: 40px;
    color: #146bec;
  }
  
  .button-group {
    display: flex;
    justify-content: space-between;
  }
  
  .custom-field {
    width: 100%;
    max-width: none;
    border: 2px solid #146bec;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 10px;
  }
  
  .title {
    color: #fff;
  }
  </style>
  