<script setup>
import { ref, onMounted } from "vue";
import { Cropper } from "vue-advanced-cropper";
import "vue-advanced-cropper/dist/style.css";

import { getUserInfo, updateCard } from "@/api";

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

const fileList = ref([]);

const myCrop = ref(null);

const genderChecked = ref();

const showPicker = ref(false);
const showWorkPicker = ref(false);

const columns = [
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
];

const columns2 = [
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
];

const form = ref({ addon: [] });

onMounted(async () => {
  let userRes = await getUserInfo();
  if (userRes.code === 200) {
    form.value = userRes.data;
  }
});

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

const validatorTel = (val) => {
  if (val.length > 0) {
    return /(\d{2,3}-?|\(\d{2,3}\))\d{3,4}-?\d{4}/.test(val);
  } else {
    return true;
  }
};

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

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

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 searchChecked = ref(true);
const searchOnUpdateValue = (newValue) => {
  showConfirmDialog({
    title: "提醒",
    message: "是否切換開關？",
  }).then(() => {
    searchChecked.value = newValue;
  });
};

const onSubmit = async () => {
  console.log(form.value);
  return;
  showLoadingToast({
    duration: 0,
    message: "資料更新中...",
    forbidClick: true,
  });

  let res = await updateCard(form.value);
  if (res.code === 200) {
    showSuccessToast("更新成功");
    store.commit("user/setUserInfo", form.value);
    router.push("/member");
  } else {
    showToast.fail("更新失敗");
  }
};

const activeCollapse = ref("1");
</script>

<template>
  <div class="content cnt0">
    <van-cell-group inset>
      <van-form @submit="onSubmit">
        <div class="text-center p-4">
          <van-uploader
            :after-read="afterRead"
            :max-count="1"
            name="averter"
            class="mb-4"
          >
            <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
              />
              <div class="ml-3">
                <p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
                <van-button class="btn-darkBlue" icon="plus" block size="small"
                  >上傳檔案</van-button
                >
              </div>
            </div>
          </van-uploader>
          <van-field
            v-model="form.mark"
            rows="3"
            type="textarea"
            maxlength="200"
            placeholder="請輸入200字以內的簡介"
            show-word-limit
            :style="{ border: '1px #e3e3e3 solid', borderRadius: '6px' }"
          />
        </div>

        <van-field
          v-model="form.real_name"
          label="姓名"
          name="pattern"
          placeholder="請輸入您的姓名"
          :rules="[{ required: true, message: '姓名為必填' }]"
        />
        <van-field
          v-model="form.company"
          label="公司名稱"
          name=""
          placeholder="請輸入您的公司名稱"
          :rules="[{ required: true, message: '公司名稱必填' }]"
        />
        <van-field
          v-model="form.title"
          label="職稱"
          name=""
          placeholder="請輸入您的職稱"
        />
        <van-field
          v-model="form.phone"
          label="手機"
          name=""
          type="tel"
          placeholder="Ex. 0900000001 不要有空格"
          :rules="[
            { required: true, message: '手機號必填' },
            { pattern: /\d{10}/, message: '手機號格式錯誤' },
          ]"
        />
        <van-field
          v-model="form.tel"
          label="市話"
          name=""
          type="tel"
          placeholder="請輸入您的市話"
          :rules="[
            {
              validator: validatorTel,
              message: '市話格式不正確,Ex. 02xxxx or 02-xxxx',
            },
          ]"
        />
        <van-field
          v-model="form.email"
          label="Email"
          name=""
          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.age"
          label="年齡"
          name=""
          placeholder="請輸入您的年齡"
        />
        <van-field name="radio" label="性別">
          <template #input>
            <van-radio-group
              v-model="form.sex"
              direction="horizontal"
              checked-color="#345068"
            >
              <van-radio :name="0">女</van-radio>
              <van-radio :name="1">男</van-radio>
              <van-radio :name="2">未知</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="form.area"
          is-link
          readonly
          name="picker"
          label="區域"
          placeholder="請選擇縣市區域"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          v-model="form.area"
          is-link
          readonly
          name="picker2"
          label="工作性質"
          placeholder="請選擇工作性質"
          @click="showWorkPicker = true"
        />
        <van-popup v-model:show="showWorkPicker" position="bottom">
          <van-picker
            :columns="columns2"
            @confirm="onConfirm"
            @cancel="showWorkPicker = false"
          />
        </van-popup>
        <van-field readonly>
          <template #label>是否公開<br />資料搜尋</template>
          <template #input>
            <van-switch
              v-model="searchChecked"
              @update:model-value="searchOnUpdateValue"
              size="18px"
              active-color="#345068"
              inactive-color="#888888"
            />
          </template>
        </van-field>

        <div class="p-5">
          <van-button block class="btn-darkBlue" native-type="submit">
            確認修改
          </van-button>
        </div>
      </van-form>
    </van-cell-group>

    <van-cell-group inset>
      <van-form @submit="onSubmit">
        <van-cell class="text-center bg-lightPink py-3">
          <template #title>
            <h6 class="text-darkBlue"><strong>人脈資訊</strong></h6>
          </template>
        </van-cell>

        <van-field
          v-model="form.note"
          name="pattern"
          placeholder="請輸入簡短的自我介紹"
          label-align="top"
        >
          <template #label>
            <i class="fa-regular fa-gem text-darkBlue"></i> 一句話介紹自己
          </template>
        </van-field>

        <van-collapse accordion v-model="activeCollapse">
          <van-collapse-item name="1">
            <template #title>
              <i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源
            </template>
            <van-field
              v-model="form.supply"
              rows="3"
              type="textarea"
              maxlength="200"
              placeholder="請填寫能分享的資源"
              show-word-limit
            />
            <van-field
              v-model="form.supply_link"
              name="pattern"
              placeholder="分享網址"
              :rules="[
                {
                  validator: validatorUrl,
                  message: '網址格式不正確,Ex. http://',
                },
              ]"
            />
          </van-collapse-item>
          <van-collapse-item name="2">
            <template #title>
              <i class="fa-regular fa-gem text-darkBlue"></i> 我需要的資源
            </template>
            <van-field
              v-model="form.demand"
              rows="3"
              type="textarea"
              maxlength="200"
              placeholder="請填寫能分享的資源"
              show-word-limit
            />
            <van-field
              v-model="form.demand_link"
              name="pattern"
              placeholder="需求連結"
            />
          </van-collapse-item>
          <van-collapse-item name="3">
            <template #title>
              <i class="fa-regular fa-gem text-darkBlue"></i> 菁英交流資訊
            </template>
            <van-field
              v-model="form.exchange"
              rows="3"
              type="textarea"
              maxlength="200"
              placeholder="請填寫能分享的資源"
              show-word-limit
            />
            <van-field
              v-model="form.exchange_link"
              name="pattern"
              placeholder="需求連結"
            />
          </van-collapse-item>
        </van-collapse>

        <div class="p-5">
          <van-button block class="btn-darkBlue" native-type="submit">
            確認修改
          </van-button>
        </div>
      </van-form>
    </van-cell-group>
  </div>

  <van-popup class="cropPopup" v-model:show="crop.show" closeable>
    <h5 class="text-center mt-3">檔案裁切上傳</h5>
    <div class="cropper-section">
      <div class="crop-area">
        <cropper
          class="cropper"
          ref="myCrop"
          :src="crop.img"
          :stencil-props="{
            aspectRatio: 1 / 1,
          }"
          :auto-zoom="true"
        />
      </div>
      <van-button
        round
        class="btn-tomatoRed rounded-pill w-50 mt-3"
        size="small"
        @click="onCrop"
      >
        裁切確認
      </van-button>
    </div>
  </van-popup>
</template>

<style lang="less" scoped></style>
