<template>
  <div class="reg-container">
    <van-nav-bar :title="title" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="form.real_name"
          label="姓名"
          name="pattern"
          required
          placeholder="請輸入您的姓名"
          :rules="[{ required: true, message: '姓名為必填' }]"
        />
        <van-field
          v-model="form.company"
          label="公司名稱"
          name=""
          required
          placeholder="請輸入您的公司名稱"
          :rules="[{ required: true, message: '公司名稱必填' }]"
        />
        <van-field
          v-model="form.title"
          label="職稱"
          name=""
          placeholder="請輸入您的職稱"
        />
        <van-field
          v-model="form.phone"
          label="手機"
          name=""
          required
          placeholder="Ex. 0900000001 不要有空格"
          :rules="[
            { required: true, message: '手機號必填' },
            { pattern: /\d{10}/, message: '手機號格式錯誤' },
          ]"
        />
        <van-field
          v-model="form.tel"
          label="市話"
          name=""
          placeholder="請輸入您的市話"
        />
        <van-field
          v-model="form.email"
          label="Email"
          name=""
          required
          placeholder="請輸入您的Email"
          :rules="[
            { required: true, message: 'Email必填' },
            {
              pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/,
              message: 'Email格式錯誤',
            },
          ]"
        />
        <van-field
          v-model="form.address"
          label="住址"
          name=""
          placeholder="請輸入您的地址"
        />
        <van-field
          v-model="form.url"
          label="網址"
          name=""
          placeholder="請輸入您的網址"
          :rules="[
            { validator: validatorUrl, message: '網址格式不正確,Ex. http://' },
          ]"
        />
        <van-field
          v-model="form.line"
          label="Line"
          name=""
          placeholder="請輸入您的Line ID"
        />
        <van-field
          v-model="form.facebook"
          label="Facebook"
          name=""
          placeholder="請輸入您的臉書連結"
        />
        <van-field
          v-model="form.ig"
          label="IG"
          name=""
          placeholder="請輸入您的IG ID"
        />
        <van-field
          v-model="form.youtube"
          label="YouTube"
          name=""
          placeholder="請輸入您的Youtube連結"
        />
        <van-uploader :after-read="afterRead" :max-count="1" name="averter">
          <div class="upload-main">
            <img
              class="upload-img"
              :src="form.avatar"
              alt=""
              v-if="form.avatar"
            />
            <img
              class="upload-img"
              src="@/assets/images/upload.jpg"
              alt=""
              v-else
            />
            <p>上傳圖片,預設為Line頭像</p>
          </div>
        </van-uploader>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          送出註冊
        </van-button>
        <br />
        <van-button round block type="default" @click="leaveReg">
          以後在說
        </van-button>
      </div>
    </van-form>
    <van-overlay :show="crop.show" @click="crop.show = false" />
    <div class="cropper-section" v-if="crop.show">
      <div class="crop-area">
        <cropper
          class="cropper"
          ref="myCrop"
          :src="crop.img"
          :stencil-props="{
            aspectRatio: 1 / 1,
          }"
          :auto-zoom="true"
        />
      </div>
      <div class="crop-btn">
        <van-button type="primary" size="small" plain @click="onClose"
          >取消</van-button
        >
        <van-button type="success" size="small" plain @click="onCrop"
          >剪裁</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";

import { ref, inject } from "vue";

import store from "@/store";
import router from "@/router";
import { useRoute } from "vue-router";

import { showToast } from "vant";
import { showLoadingToast,showSuccessToast } from 'vant';

import { Cropper } from "vue-advanced-cropper";
import "vue-advanced-cropper/dist/style.css";

import { register, checkLineId } from "@/api";

const URL = window.URL || window.webkitURL;

const route = useRoute();

const form = ref({
  verify: route.query.verify || null,
  aid: route.query.aid || undefined,
});

const title = ref("註冊成為會員");

const myCrop = ref(null);

const crop = ref({
  show: false,
  img: null,
});

if (route.query.verify) {
  title.value = "會員開通";
}

const validatorUrl = (val) => {
  if (val.length > 0) {
    return /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/.test(val);
  } else {
    return true;
  }
};

const leaveReg = () => {
  window.location.replace("/error.html");
};

const onCrop = () => {
  const { canvas } = myCrop.value.getResult();
  if (canvas) {
    const imgFile = new FormData();
    canvas.toBlob(async (blob) => {
      let ufile = new File([blob], "image.jpg");
      imgFile.append("user_id", form.value.user_id);
      imgFile.append("fileType", "IMAGE");
      imgFile.append("file", ufile);

      crop.value.show = false;

      showLoadingToast({
        duration: 0,
        message: "圖片上傳中...",
        forbidClick: true,
      });

      let res = await axios.post(
        `${import.meta.env.VITE_APP_API_URL}/user/uploadAvatar`,
        imgFile,
        {}
      );

      if (res.data.code == 200) {
        form.value.avatar = res.data.data;
        showSuccessToast("上傳成功");
      } else {
        showToast.fail("上傳失敗");
      }
    }, "image/jpeg");
  }

  return;
};

const onClose = () => {
  crop.value.show = false;
};

const afterRead = async (file, name) => {
  crop.value.show = true;

  const ofile = file.file;

  crop.value.img = URL.createObjectURL(ofile);
  return;
};

const onSubmit = async () => {
  const liff = window.liff;
  try {
    if (!liff.isLoggedIn()) liff.login({ redirectUri: window.location.href });
  } catch (err) {
    console.log(`liff.state init error ${err}`);
    showToast("登入失敗。請聯絡管理員");
    router.push("/login");
  }

  const profile = await liff.getProfile();

  let checkRes = await checkLineId(profile.userId);

  if (checkRes.code !== 200) {
    showToast("您已是我們的會員，請直接登入");
    router.push("/login");
  }

  const id_token = liff.getIDToken();

  showLoadingToast({
    duration: 0,
    message: "資料傳送中...",
    forbidClick: true,
  });

  let regRes = await register({
    line_id: profile.userId,
    line_name: profile.displayName,
    line_picture: profile.pictureUrl,
    token: id_token,
    ...form.value,
  });

  if (regRes.code === 500) {
    if (liff.isLoggedIn()) {
      liff.logout();
    }
    showToast("line 登入已過期");
    return;
  } else if (regRes.code === 200) {
    showToast("註冊成功");
    sessionStorage.setItem("token", regRes.data.token);
    sessionStorage.setItem("uid", regRes.data.uid);
    return router.push("/");
  } else {
    showToast("註冊失敗");
    return;
  }
};
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 30px;
}
.title {
  font-size: 20px;
  text-align: center;
}

.upload-img {
  width: 80px;
}

.cropper {
  height: 300px;
  // width: 300px;
  background: #ddd;
}

.cropper-section {
  margin: 0 auto;
  position: fixed;
  text-align: center;
  top: 50px;
  // left: 0;
  height: 350px;
  width: 100%;
  max-width: 500px;
  background: #ddd;
  z-index: 8888;
  .crop-area {
    margin: 5 auto;
    width: 100%;
    height: 330px;
  }
  .crop-btn {
    background-color: #666;
    text-align: center;
  }
}
</style>
