<template>
  <div>
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field">
          <label class="label">Full name<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="fullname"
            />
          </div>
          <p
            class="help is-danger"
            v-if="errors.find((v) => v.name === 'fullname')"
          >
            {{ errors.find((v) => v.name === "fullname").text }}
          </p>
        </div>
        <div class="field is-narrow">
          <label class="label">Phone</label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="phone"
            />
          </div>
          <p
            class="help is-danger"
            v-if="errors.find((v) => v.name === 'phone')"
          >
            {{ errors.find((v) => v.name === "phone").text }}
          </p>
        </div>
      </div>
    </div>
    <div class="field is-horizontal mt-4">
      <div class="field-body">
        <div class="field">
          <label class="label">User name<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <input
              class="input"
              type="text"
              placeholder=""
              v-model="username"
            />
          </div>
          <p
            class="help is-danger"
            v-if="errors.find((v) => v.name === 'username')"
          >
            {{ errors.find((v) => v.name === "username").text }}
          </p>
          <p
            class="help is-primary"
            v-else-if="info"
          >
            {{ info }}
          </p>
        </div>
        <div class="field is-narrow">
          <label class="label">Account type<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            <SearchBox
              v-bind="{
                api: 'usertype',
                field: 'name',
                column: ['name'],
                first: true,
                position: 'top',
              }"
              @option="selected('_type', $event)"
            ></SearchBox>
          </div>
          <p
            class="help is-danger"
            v-if="errors.find((v) => v.name === 'type')"
          >
            {{ errors.find((v) => v.name === "type").text }}
          </p>
        </div>
      </div>
    </div>
    <div class="field is-horizontal mt-4">
      <div class="field-body">
        <div class="field">
          <label class="label">Password<b class="ml-1 has-text-danger">*</b></label>
          <div class="field has-addons">
            <p class="control is-expanded">
              <input
                class="input"
                :type="showpass ? 'text' : 'password'"
                placeholder="At least 6 characters including letters and numbers."
                v-model="password"
              />
            </p>
            <div class="control">
              <a
                class="button"
                @click="showpass = !showpass"
              >
                <SvgIcon
                  v-bind="{ name: 'eye-off.svg', type: 'dark', size: 22 }"
                  v-if="showpass"
                ></SvgIcon>
                <SvgIcon
                  v-bind="{ name: 'view.svg', type: 'dark', size: 22 }"
                  v-else
                ></SvgIcon>
              </a>
            </div>
            <p
              class="help is-danger"
              v-if="errors.find((v) => v.name === 'password')"
            >
              {{ errors.find((v) => v.name === "password").text }}
            </p>
          </div>
        </div>
        <div class="field">
          <label class="label">Retype password<b class="ml-1 has-text-danger">*</b></label>
          <p class="control is-expanded">
            <input
              class="input"
              :type="showpass ? 'text' : 'password'"
              placeholder=""
              v-model="retypePassword"
            />
          </p>
        </div>
        <p
          class="help is-danger"
          v-if="errors.find((v) => v.name === 'retypePassword')"
        >
          {{ errors.find((v) => v.name === "retypePassword").text }}
        </p>
      </div>
    </div>
    <div class="mt-5 pt-2">
      <button
        class="button is-primary has-text-white"
        @click="createAccount()"
        v-if="enable"
      >
        Create user
      </button>
    </div>
  </div>
</template>
<script>
export default {
  props: ["pagename"],
  data() {
    return {
      fullname: undefined,
      username: undefined,
      phone: undefined,
      password: undefined,
      retypePassword: undefined,
      errors: [],
      info: "User name must not contain any spaces.",
      showpass: true,
      hash: undefined,
      status: undefined,
      user: undefined,
      code: undefined,
      option: undefined,
      branch: [],
      radio: undefined,
      check: {},
      branchOpt: undefined,
      enable: true,
    };
  },
  mounted() {
    let pass = this.$id();
    this.password = pass;
    this.retypePassword = pass;
    window.addEventListener("keyup", (ev) =>
      ev.key === "Enter" && this.$route.name === "signup" ? this.createAccount() : false,
    );
  },
  computed: {
    common: {
      get: function () {
        return this.$store.state.common;
      },
      set: function (val) {
        this.$store.commit("updateCommon", { common: val });
      },
    },
    registermethod: {
      get: function () {
        return this.$store.state.registermethod;
      },
      set: function (val) {
        this.$store.commit("updateRegisterMethod", { registermethod: val });
      },
    },
    authmethod: {
      get: function () {
        return this.$store.state.authmethod;
      },
      set: function (val) {
        this.$store.commit("updateAuthMethod", { authmethod: val });
      },
    },
    authstatus: {
      get: function () {
        return this.$store.state.authstatus;
      },
      set: function (val) {
        this.$store.commit("updateAuthStatus", { authstatus: val });
      },
    },
    usertype: {
      get: function () {
        return this.$store.state.usertype;
      },
      set: function (val) {
        this.$store.commit("updateUserType", { usertype: val });
      },
    },
    dialog: {
      get: function () {
        return this.$store.state["dialog"];
      },
      set: function (val) {
        this.$store.commit("updateStore", { name: "dialog", data: val });
      },
    },
  },
  methods: {
    checkError() {
      this.errors = [];
      if (!this.$empty(this.fullname)) {
        this.fullname = this.fullname.trim();
      }
      if (!this.$empty(this.username)) {
        this.username = this.username.trim().toLowerCase();
      }
      if (this.$empty(this.fullname)) {
        this.errors.push({
          name: "fullname",
          text: "Họ và tên không được bỏ trống",
        });
      } else if (this.fullname.length < 5) {
        this.errors.push({
          name: "fullname",
          text: "Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên",
        });
      }
      if (this.$empty(this.username)) {
        this.errors.push({
          name: "username",
          text: "Tài khoản không được bỏ trống",
        });
      } else if (this.username !== this.username.replace(" ", "")) {
        this.errors.push({
          name: "username",
          text: "Tài khoản không được chứa khoảng trắng",
        });
      } else if (this.username.length < 5) {
        this.errors.push({
          name: "fullname",
          text: "Tài khoản quá ngắn. Yêu cầu từ 5 kí tự trở nên",
        });
      }
      if (this.$empty(this.password)) {
        this.errors.push({
          name: "password",
          text: "Mật khẩu không được bỏ trống",
        });
      } else if (this.password.length < 6) {
        this.errors.push({
          name: "password",
          text: "Mật khẩu gồm 6 kí tự trở nên bao gồm chữ và số ",
        });
      } else if (!(/\d/.test(this.password) && /[a-zA-Z]/.test(this.password))) {
        this.errors.push({
          name: "password",
          text: "Mật khẩu gồm 6 kí tự trở nên bao gồm chữ và số ",
        });
      }
      if (this.$empty(this.retypePassword)) {
        this.errors.push({
          name: "retypePassword",
          text: "Nhắc lại mật khẩu không được bỏ trống",
        });
      } else if (this.password !== this.retypePassword) {
        this.errors.push({
          name: "retypePassword",
          text: "Nhắc lại mật khẩu phải giống với mật khẩu đã nhập",
        });
      }
      if (!this.$empty(this.phone)) {
        this.phone = this.phone.trim();
        if (this.$errPhone(this.phone))
          this.errors.push({
            name: "phone",
            text: "Số điện thoại không hợp lệ.",
          });
      }
      if (this.$empty(this.option)) {
        this.errors.push({ name: "type", text: "Chưa chọn loại tài khoản." });
      }
      let opts = this.radio === "all" ? "all" : [];
      if (opts.length === 0) {
        for (const [key, value] of Object.entries(this.check)) {
          if (value) opts.push(key);
        }
      }
      return this.errors.length > 0 ? true : false;
    },
    async createAccount() {
      if (this.checkError()) return;
      let rs = await this.$insertapi("gethash", { text: this.password });
      this.hash = rs.rows[0];
      let data = await this.$getdata("user", { username: this.username }, undefined, true);
      if (data) {
        return this.errors.push({
          name: "username",
          text: "Tài khoản đã tồn tại trong hệ thống",
        });
      }
      data = {
        fullname: this.fullname,
        username: this.username,
        phone: this.$empty(this.phone) ? undefined : this.phone,
        password: this.hash,
        type: this.option.id,
        register_method: 1,
        auth_status: 2,
        auth_method: 1,
      };
      this.user = await this.$insertrow("user", data, undefined, this.pagename);
      if (this.user === "error") return;
      // add rights
      //let arr = this.$filter(this.common, {category: 'topmenu'}).map(v=>{return {user: this.user.id, function: v.id}})
      //let result = await this.$insertapi('userrights', arr)
      //this.$dialog('Account created successfully.', 'Success', 'Success', 10)
      this.$emit("close");
    },
    selected(attr, obj) {
      this.option = obj;
    },
    doCheck(v) {
      this.$set(this.check, v.code, this.check[v.code] ? false : true);
    },
  },
};
</script>
