<script setup>
import { ref, onMounted } from "vue";

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

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

// if (userRes.data.nfc_addon && (userRes.data.nfc_addon.length > 0)) {
//     form.value.addon = JSON.parse(userRes.data.nfc_addon)
// }

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

const onAddBtn = () => {
  if (form.value.addon) {
    form.value.addon.push({ icon: "", name: "", link: "" });
  } else {
    form.value.addon = [{ icon: "", name: "", link: "" }];
  }
};

const onDelBtn = (index) => {
  form.value.addon.splice(index, 1);
};

const onMoveBtn = (type, index) => {
  if (type === 0) {
    if (index !== 0) {
      [form.value.addon[index], form.value.addon[index - 1]] = [
        form.value.addon[index - 1],
        form.value.addon[index],
      ];
    }
  } else {
    if (index + 1 !== form.value.addon.length) {
      [form.value.addon[index + 1], form.value.addon[index]] = [
        form.value.addon[index],
        form.value.addon[index + 1],
      ];
    }
  }
};

const onSubmit = () => {
  console.log(form.value);
};
</script>

<template>
  <div class="content cnt1">
    <van-cell-group inset>
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.nfcurl"
          label="個人網頁"
          name=""
          placeholder="請輸入您的個人網頁"
        />
        <van-field
          v-model="form.line"
          label="Line"
          name=""
          placeholder="請輸入您的Line ID"
        />
        <van-field
          v-model="form.facebook"
          label="Facebook"
          name=""
          placeholder="請輸入您的Facebook"
        />
        <van-field
          v-model="form.ig"
          label="IG"
          name=""
          placeholder="請輸入您的IG"
        />
        <van-field
          v-model="form.youTube"
          label="YouTube"
          name=""
          placeholder="請輸入您的YouTube"
        />
        <van-field
          v-model="form.wechat"
          label="WeChat"
          name=""
          placeholder="請輸入您的WeChat"
        />

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

    <van-cell-group inset>
      <van-form @submit="onSubmit">
        <van-cell class="bg-lightPink">
          <template #title>
            <h6 class="text-darkBlue"><strong>相關連結</strong></h6>
          </template>
          <template #value>
            <van-button
              size="small"
              class="btn-outline-darkBlue"
              @click="onAddBtn"
            >
              <h6>新增連結</h6>
            </van-button>
          </template>
        </van-cell>

        <van-field v-for="(item, idx) in form.addon" :key="idx">
          <template #label>
            <van-field
              v-model="item.name"
              name=""
              maxlength="15"
              placeholder="請輸入您的連結名稱"
              :rules="[{ required: true, message: '連結名稱必填' }]"
            />
          </template>
          <template #input>
            <van-field
              v-model="item.link"
              name=""
              placeholder="請輸入您的按鈕連結"
              :rules="[{ required: true, message: '按鈕連結必填' }]"
            />
          </template>
          <template #button>
            <van-button
              size="small"
              class="ml-1 btn-tomatoRed"
              icon="delete-o"
              hairline
              @click="onDelBtn(idx)"
            ></van-button>
            <van-button
              size="small"
              class="ml-1 btn-skyBlue"
              icon="arrow-up"
              hairline
              @click="onMoveBtn(0, idx)"
            ></van-button>
            <van-button
              size="small"
              class="ml-1 btn-skyBlue"
              icon="arrow-down"
              plain
              hairline
              @click="onMoveBtn(1, idx)"
            ></van-button>
          </template>
        </van-field>

        <!-- <van-swipe-cell v-for="(item,idx) in form.addon" :key="idx">
              <template #left>
                <van-button type="danger" icon="delete-o" plain hairline @click="onDelBtn(idx)">刪除</van-button>
              </template>              
              <van-field
                v-model="item.name"
                name=""
                placeholder="請輸入您的連結名稱"
                :rules="[{ required: true, message: '連結名稱必填' }]"
              />
              <van-field
                v-model="item.link"
                name=""
                placeholder="請輸入您的按鈕連結" 
                :rules="[{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
              />
              <template #right>
                <van-button type="primary" icon="arrow-up" plain hairline @click="onMoveBtn(0,idx)">上移</van-button>
                <van-button type="primary" icon="arrow-down" plain hairline @click="onMoveBtn(1,idx)">下移</van-button>              
              </template>
            </van-swipe-cell> -->

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

<style scoped></style>
