<template>
  <div
    class="d-flex flex-column justify-content-start align-item-center bg-white"
    style="min-height: 100vh"
  >
    <base-header class="header bg-primary mb-5">
      <!-- Mask -->
      <!-- Header container -->
      <div>
        <div class="row">
          <div class="col-lg-7 col-md-10 mt-lg-3 mb-lg-3">
            <breadcrumb
              :link="[{ name: 'Quản lý nhân viên', active: true }]"
              class="mt-3 mb-3 ml--3"
            ></breadcrumb>
            <h1 class="h1 text-white">Xin chào {{ user.name }}</h1>
            <p class="text-white">Đây là trang hồ sơ của bạn</p>
            <!-- <a href="#!" class="btn btn-info">Edit profile</a> -->
          </div>
        </div>
      </div>
    </base-header>

    <div>
      <loading :active.sync="pending" :is-full-page="false"></loading>

      <div class="row">
        <div class="col-xl-12 col-lg-12 mb-lg-2 mb-xl-5 mb-xl-0">
          <div class="card card-profile shadow">
            <div class="row justify-content-center">
              <div class="col-lg-3 order-lg-2">
                <div class="card-profile-image">
                  <div class="text-center pt-5">
                    <image-uploader
                      :debug="1"
                      :maxWidth="512"
                      :quality="0.7"
                      :autoRotate="true"
                      outputFormat="verbose"
                      :preview="false"
                      :className="[
                        'fileinput',
                        { 'fileinput--loaded': hasImage }
                      ]"
                      capture="environment"
                      accept="video/*, image/*"
                      doNotResize="['gif', 'svg']"
                      @input="setImage"
                      @onUpload="startImageResize"
                      @onComplete="endImageResize"
                    >
                      <label for="fileInput" slot="upload-label">
                        <figure>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="32"
                            height="32"
                            viewBox="0 0 32 32"
                          >
                            <path
                              class="path1"
                              d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
                            />
                          </svg>
                        </figure>
                        <span class="upload-caption">{{
                          hasImage ? "Replace" : "Upload"
                        }}</span>
                      </label>
                    </image-uploader>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="card-header text-center">
              <div class="d-flex justify-content-between">
               <base-button size="sm" type="info" class="mr-4"
                  >Connect</base-button
                >
                <base-button size="sm" type="default" class="float-right"
                  >Message</base-button
              </div>
            </div>-->
            <div class="card-body pt-0 text-center border-0">
              <div class="row">
                <div class="col">
                  <div
                    class="card-profile-stats d-flex justify-content-center mt-md-5"
                  ></div>
                </div>
              </div>
              <div>
                <h3>
                  {{ user.username }}
                  <br />
                  <span class="font-weight-light">{{ user.name }}</span>
                </h3>
                <div class="h5 font-weight-300">
                  <i class="ni location_pin mr-2"></i>
                  {{ user.email }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-12 col-lg-12">
          <card shadow type="secondary">
            <div slot="header" class="bg-white border-0">
              <div class="row align-items-center">
                <div class="col-8">
                  <h3 class="mb-0">Tài khoản của tôi</h3>
                </div>
                <!-- <div class="col-4 text-right">
                  <a href="#!" class="btn btn-sm btn-primary">Settings</a>
                </div>-->
              </div>
            </div>
            <template>
              <ValidationObserver v-slot="{ handleSubmit }">
                <form @submit.prevent="handleSubmit(saveProfile)">
                  <!-- <h6 class="heading-small text-muted mb-4">
                    Thông tin người dùng
                  </h6>-->
                  <div class>
                    <div class="row">
                      <div class="col-lg-6">
                        <base-input
                          alternative
                          readonly="true"
                          label="Tên đăng nhập"
                          placeholder="username"
                          input-classes="form-control-alternative"
                          v-model="user.username"
                        />
                      </div>
                      <div class="col-lg-6">
                        <base-input
                          alternative
                          readonly="true"
                          label="Địa chỉ Email"
                          placeholder="jesse@example.com"
                          input-classes="form-control-alternative"
                          v-model="user.email"
                        />
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-6">
                        <ValidationProvider
                          rules="required"
                          v-slot="{ errors }"
                        >
                          <base-input
                            alternative
                            label="Tên hiển thị"
                            placeholder="Tên hiển thị"
                            input-classes="form-control-alternative"
                            v-model="user.name"
                            :error="errors[0]"
                            :valid="errors.length == 0 && user.name.length > 0"
                          />
                        </ValidationProvider>
                      </div>
                      <div class="col-lg-6">
                        <base-input
                          alternative
                          label="Số điện thoại"
                          placeholder="Số điện thoại"
                          input-classes="form-control-alternative"
                          v-model="user.phone"
                        />
                      </div>
                    </div>
                    <div class="d-flex flex-row-reverse">
                      <button
                        class="btn btn-primary"
                        @click.prevent="handleSubmit(saveProfile)"
                      >
                        Lưu lại
                      </button>
                    </div>
                  </div>
                </form>
              </ValidationObserver>
            </template>
          </card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { extend } from "vee-validate";
extend("required", {
  validate(value) {
    return {
      required: true,
      valid: ["", null, undefined].indexOf(value) === -1
    };
  },
  message: "Tên hiển thị của bạn không được để rỗng",
  computesRequired: true
});
import { mapState, mapActions } from "vuex";
import { userService } from "@/_services";
import config from "@/config";

export default {
  name: "user-profile",
  data() {
    return {
      pending: false,
      hasImage: false,
      avatarPreview: "",
      selectedFile: null
    };
  },
  computed: {
    ...mapState("account", ["user", "user_token"])
  },
  mounted() {
    this.avatarPreview = config.uploadHost + this.user.avatar;
  },
  methods: {
    ...mapActions("account", ["updateInfo"]),
    saveProfile() {
      this.pending = true;
      this.updateInfo(this.user)
        .then(res => {
          this.pending = false;
          this.$alertify.success(res.message, {
            duration: 4000
          });
        })
        .catch(error => {
          this.pending = false;
          this.$alertify.error(error.message, {
            duration: 4000
          });
        });
    },
    doUpload: function(output) {
      this.avatarPreview = output.preview;
      userService
        .updateAvatar({ file: output.file })
        .then(res => {
          this.user.avatar = res.data.path;
          this.$alertify.success(res.message, {
            duration: 4000
          });
        })
        .catch(err => {
          this.$alertify.error(err.message, {
            duration: 4000
          });
        });
    },
    setImage: function(output) {
      this.hasImage = true;
      this.image = output;
      console.log("Info", output.info.name);
      console.log("Exif", output.exif);
    }
  }
};
</script>
<style lang="scss">
#fileInput {
  display: none;
}
.card-profile-image {
  .wrap-drop-img {
    max-width: 140px;
  }
}
</style>
