<style scoped>
.main {
  overflow: auto;
  height: 100%;
}
.top-bg-color {
  background-color: #e7f6f8;
  height: 40%;
}
.bottom-bg-color {
  background-color: #fff;
}
h1 {
  font-size: 1.8rem;
}
table {
  min-width: 600px;
}
.table-1 tr {
  border: 2px #6b6b6b solid;
}
.table-1 th,
.table-1 td {
  border: 0;
  vertical-align: middle;
  height: 5rem;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #6b6b6b;
}
.table-1 th {
  width: 8.5rem;
}
.table-1 td input {
  width: 30rem;
}
.table-2 td {
  border: 0;
  vertical-align: middle;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #6b6b6b;
}

.table-2 tr:first-child td:not(:first-child),
.table-2 tr:not(:first-child) td {
  border-bottom: 2px #009bb4 solid;
}
.table-2 tr:first-child td:first-child {
  text-align: center;
  vertical-align: middle;
}

a {
  font-size: 1.1rem;
  font-weight: bold;
  color: blue;
  background-color: transparent;
  border: 0;
}
/* .avatar {
  width: 5rem;
  height: 5rem;
  background-color: #c2c2c2;
  border-radius: 100%;
  margin: 0 auto;
} */
.avatar {
  background-color: transparent;
  border: 0;
}
.avatar-icon {
  font-size: 4rem;
  color: #c2c2c2;
  margin: 0 auto;
}
.avatar-name {
  color: #009bb4;
  background-color: transparent;
  border: 0;
}
.btn-save {
  background-color: #0ea1b8;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  transition: 0.3s;
}
.btn-save:hover {
  background-color: #0d7f91;
}
.flex-v-center {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}
.col-form-label {
  font-weight: bold;
  font-size: 1.1rem;
  padding-top: 0;
  padding-bottom: 0;
}
</style>
<template>
  <div class="main">
    <div class="top-bg-color px-5 py-4">
      <h1>{{ user.name }}，歡迎來到您的帳戶</h1>
      <table class="table table-2 mt-4">
        <tr>
          <td rowspan="3">
            <div class="avatar my-1">
              <i class="bi bi-person-circle avatar-icon"></i>
            </div>
            
            <!-- <div class="avatar my-3"></div> -->
            <span class="avatar-name">{{ user.name }}</span>
          </td>
          <td colspan="2">您的帳戶</td>
        </tr>
        <tr>
          <td colspan="2">{{ user.email }}</td>
          <!-- <td><a href="#">變更電子信箱</a></td> -->
        </tr>
        <tr>
          <td>上次變更密碼時間：{{ user.pwd_last_upd }}</td>
          <td>
            <button
              type="button"
              class="btn bg-transparent p-0"
              data-bs-toggle="modal"
              data-bs-target="#resetpwModal"
            >
              <a href="#">變更密碼</a>
            </button>
          </td>
        </tr>
      </table>
    </div>
    <div class="bottom-bg-color px-5 py-4">
      <form @submit.prevent="saveData">
        <div class="d-flex justify-content-between">
          <h1>基本資料</h1>
          <button class="btn-save rounded-pill px-3 py-1">儲存變更</button>
        </div>
        <table class="table table-1 mt-4">
          <tr>
            <th>帳戶名稱</th>
            <td>
              <input
                type="text"
                v-model="user.name"
                name="name"
                id="name"
                class="form-control"
                required
              />
            </td>
          </tr>
          <tr v-if="isParent">
            <th>統一編號</th>
            <td>
              <input
                type="text"
                v-model="user.tax_number"
                name="tax_number"
                id="tax_number"
                class="form-control"
                required
              />
            </td>
          </tr>
          <!-- <tr>
            <th>電子信箱</th>
            <td>{{ user.email }}</td>
          </tr> -->
          <tr>
            <th>聯絡人姓名</th>
            <td>
              <input
                type="text"
                v-model="user.contact_name"
                name="contact_name"
                id="contact_name"
                class="form-control"
                required
              />
            </td>
          </tr>
          <tr>
            <th>聯絡電話</th>
            <td>
              <input
                type="text"
                v-model="user.phone"
                name="phone"
                id="phone"
                class="form-control"
                required
              />
            </td>
          </tr>
        </table>
      </form>
    </div>
  </div>
  <div
    class="modal fade"
    id="resetpwModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
  >
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title fw-bold" id="exampleModalLabel">
            變更密碼
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <form action="javascript:void(0)" @submit="resetPassword">
            <div class="container pb-3">
              <div class="mb-3" v-if="validationError != ''">
                <div class="alert alert-danger">
                  <ul class="mb-0">
                    <li class="text">
                      {{ validationError }}
                    </li>
                  </ul>
                </div>
              </div>
              <div class="row gy-sm-3">
                <label for="password" class="col-md-2 col-form-label flex-v-center">原密碼</label>
                <div class="col-md-10 mobile-mb flex-v-center">
                  <input
                    type="password"
                    v-model="pwdData.old_password"
                    name="old_password"
                    id="old_password"
                    class="form-control"
                    autocomplete="off"
                    required
                  />
                </div>

                <label for="password" class="col-md-2 col-form-label flex-v-center">新密碼</label>
                <div class="col-md-10 mobile-mb flex-v-center">
                  <input
                    type="password"
                    v-model="pwdData.password"
                    name="password"
                    id="password"
                    class="form-control"
                    autocomplete="off"
                    required
                  />
                </div>

                <label for="password_confirmation" class="col-md-2 col-form-label flex-v-center"
                  >確認新密碼</label
                >
                <div class="col-md-10 mobile-mb flex-v-center">
                  <input
                    type="password"
                    v-model="pwdData.password_confirmation"
                    name="password_confirmation"
                    id="password_confirmation"
                    class="form-control"
                    autocomplete="off"
                    required
                  />
                </div>
              </div>
            </div>

            <div class="modal-footer pb-0">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                取消
              </button>
              <button type="submit" class="btn btn-primary">建立</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/global/axios";
import { sendSuccessSwal, sendFailedSwal, swalDelete } from "@/global/swal";
import { isAdmin, isParent, isSub } from "@/global/request";
export default {
  data() {
    return {
      isAdmin: isAdmin(),
      isParent: isParent(),
      userId: this.$store.state.auth.user.id,
      user: [],
      validationError: "",
      pwdData: {
        id: this.$store.state.auth.user.id,
        old_password: "",
        password: "",
        password_confirmation: "",
      },
    };
  },
  async created() {
    if (this.userId) {
      await api.get(`/api/user/${this.userId}`).then((res) => {
        this.user = res.data.data;
      });
    }
  },
  methods: {
    saveData: function () {
      api
        .put(`/api/user/${this.userId}`, this.user)
        .then(() => {
          sendSuccessSwal(() => window.location.reload());
        })
        .catch((err) => {
          sendFailedSwal(err);
          if (err.response.status == 500)
            this.validationErrors = err.response.data.errors;
        });
    },
    resetPassword: function () {
      api
        .post(`/api/userResetPassword`, this.pwdData)
        .then((res) => {
          this.validationError = "";
          switch (res.data) {
            case 0:
              sendSuccessSwal(() => window.location.reload());
              break;
            case 1:
              this.validationError = "原密碼錯誤！";
              break;
            case 2:
              this.validationError = "新密碼與確認新密碼不一致！";
              break;
            case 3:
              this.validationError = "新密碼格式錯誤，需包含「大小寫英文及數字」，共計8碼！";
              break;
            case 4:
              this.validationError = "新密碼不得與前3次相同！";
              break;
          }

        })
        .catch((err) => {
          sendFailedSwal(err);
          if (err.response.status == 500)
            this.validationErrors = err.response.data.errors;
        });
    },
  },
};
</script>
