<script>
import Footer from "@/components/Footer.vue";
import FlexView from "@/components/FlexView.vue";

import {
  ref,
  reactive,
  toRefs,
  watch,
  onBeforeMount,
  defineComponent,
} from "vue";

import { updateCusCard } from "@/api";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

import axios from "axios";
import _ from "lodash";

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

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

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

export default defineComponent({
  name: "EditCard",
  components: {
    Footer,
    Cropper,
    FlexView,
  },
  async setup() {
    const store = useStore();
    const router = useRouter();

    const showNfc = ref(false);
    const showPreview = ref(false);
    const showMovie = ref(false);

    const showTitleSizePicker = ref(false);
    const showDescSizePicker = ref(false);
    
    let flexRef = ref(null);

    const showMvPopup = () => {
      console.log('test');
      showMovie = true;
    };

    const crop = ref({
      show: false,
      img: null,
      outputType: "jpeg",
      autoCrop: true,
      autoCropWidth: 200,
      autoCropHeight: 200,
    });

    let state = reactive({
      imagePath: "",
      previewImage: null,
      fileList: [],
      showFooter: true,
      form: {
        page: 1,
        title: "商務卡片",
        showNfc: true,
        json5: {
          altText: '',
          btnHeight: "md",
          descSize: "sm",
          titleSize: "xl",
          cards: [
            {
              bgColor: "#ffffff",
              desc: "",
              descColor: "#000000",
              image: "",
              link: "",
              title: "",
              titleSize: "xl",
              descSize: "sm",
              titleColor: "#000000",
              ratio: "20:13",
            },
          ],
        },
      },
    });

    const sizeColumns  = ref([
      {text:'xxs',value:'xxs'},
      {text:'xs',value: 'xs'},
      {text:'sm',value: 'sm'},
      {text:'md',value: 'md'},
      {text:'lg',value: 'lg'},
      {text:'xl',value: 'xl'},
      {text:'xxl',value:'xxl'},
      {text:'3xl',value:'3xl'},
      {text:'4xl',value:'4xl'},
      {text:'5xl',value:'5xl'}
    ]);
    
    if (
      store.state.user.userInfo.cus_card &&
      store.state.user.userInfo.cus_card.length > 0
    ) {
      state.form = JSON.parse(_.clone(store.state.user.userInfo.cus_card));
    }

    watch(()=>state.form.title,(newVal)=>{
        state.form.json5.altText = newVal
    })

    const addCard = () => {
      state.form.json5.cards.push({
        bgColor: "#ffffff",
        desc: "",
        descColor: "#000000",
        image: "",
        // link: "",
        title: "",
        titleSize: "xl",
        descSize: "sm",
        titleColor: "#000000",
        ratio: "20:13",
      });
      state.form.page = state.form.json5.cards.length;
    };

    const delCard = (page) => {
      if (page > 1) {
        state.form.page = page - 1;
      }
      state.form.json5.cards.splice(page - 1, 1);
    };

    const addBtn = (page) => {
      if (!state.form.json5.cards[page - 1].btns) {
        state.form.json5.cards[page - 1].btns = [];
      }

      state.form.json5.cards[page - 1].btns.push({
        color: "#42659a",
        link: "",
        style: "primary",
        text: "",
        btnHeight: "md"
      });
    };

    const addShareBtn = (page) => {
      if (!state.form.json5.cards[page - 1].btns) {
        state.form.json5.cards[page - 1].btns = [];
      }

      state.form.json5.cards[page - 1].btns.push({
        color: "#42659a",
        link: `${import.meta.env.VITE_APP_SEND_URL}?userid=${sessionStorage.getItem(
          "uid"
        )}&cardid=2`,
        style: "primary",
        text: "分享好友",
        btnHeight: "md"
      });
    };

    const moveCard = (type, page) => {
      if (type === 0) {
        if (page !== 1) {
          [state.form.json5.cards[page - 1], state.form.json5.cards[page - 2]] =
            [
              state.form.json5.cards[page - 2],
              state.form.json5.cards[page - 1],
            ];
          state.form.page = page - 1;
        }
      } else {
        if (page !== state.form.json5.cards.length) {
          [state.form.json5.cards[page], state.form.json5.cards[page - 1]] = [
            state.form.json5.cards[page - 1],
            state.form.json5.cards[page],
          ];
          state.form.page = page + 1;
        }
      }
    };

    const delBtn = (index) => {
      state.form.json5.cards[state.form.page - 1].btns.splice(index, 1);
      if (state.form.json5.cards[state.form.page - 1].btns.length === 0) {
        delete state.form.json5.cards[state.form.page - 1].btns;
      }
    };

    const moveBtn = (type, index) => {
      if (type === 0) {
        if (index !== 0) {
          [
            state.form.json5.cards[state.form.page - 1].btns[index],
            state.form.json5.cards[state.form.page - 1].btns[index - 1],
          ] = [
            state.form.json5.cards[state.form.page - 1].btns[index - 1],
            state.form.json5.cards[state.form.page - 1].btns[index],
          ];
        }
      } else {
        if (
          index + 1 !==
          state.form.json5.cards[state.form.page - 1].btns.length
        ) {
          [
            state.form.json5.cards[state.form.page - 1].btns[index + 1],
            state.form.json5.cards[state.form.page - 1].btns[index],
          ] = [
            state.form.json5.cards[state.form.page - 1].btns[index],
            state.form.json5.cards[state.form.page - 1].btns[index + 1],
          ];
        }
      }
    };

    const afterRead = async (file, name) => {
      // crop.value.show = true
      // const ofile = file.file
      // crop.value.img = URL.createObjectURL(ofile);

      const imgFile = new FormData();
      imgFile.append("fileType", "IMAGE");
      imgFile.append("file", file.file);

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

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

      if (res.data.code == 200) {
        state.form.json5.cards[state.form.page - 1].image = res.data.data;

        showSuccessToast("上傳成功");
      } else {
        showToast.fail("上傳失敗");
      }

      return;
    };

    const handleDelete = () => {
      state.form.json5.cards[state.form.page - 1].image = "";
    };

    const handlePreview = () => {
      router.push({
        name: "CardPreview",
        params: { content: JSON.stringify(state.form) },
      });
    };

    const onTitleSizeConfirm = ({ selectedOptions }) => {
      showTitleSizePicker.value = false;
      state.form.json5.cards[state.form.page - 1].titleSize = selectedOptions[0].text;
    };

    const onDescSizeConfirm = ({ selectedOptions }) => {
      showDescSizePicker.value = false;
      state.form.json5.cards[state.form.page - 1].descSize = selectedOptions[0].text;
    };

    const handleSubmit = async () => {
      let user_id = sessionStorage.getItem("uid");

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

      let res = await updateCusCard({
        user_id: user_id,
        card_title: state.form.title,
        show_cus: state.form.showNfc,
        cus_card: JSON.stringify(state.form),
      });
      if (res.code === 200) {
        store.commit("user/setCusCard", JSON.stringify(state.form));
        showSuccessToast("建立成功");
      } else {
        showToast.fail("建立失敗");
      }
      router.push("/");
    };

    return {
      ...toRefs(state),
      sizeColumns,
      showPreview,
      showMovie,
      showMvPopup,
      showTitleSizePicker,
      showDescSizePicker,
      flexRef,
      crop,
      addCard,
      delCard,
      moveCard,
      addBtn,
      addShareBtn,
      delBtn,
      moveBtn,
      afterRead,
      handlePreview,
      handleDelete,
      onTitleSizeConfirm,
      onDescSizeConfirm,
      handleSubmit,
    };
  },
});
</script>

<template>
  <div class="edit page">    
    <van-form @submit="handleSubmit">
      <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
        <template #title>
          <h5 class="text-white mb-1"><strong>商務卡片設定</strong></h5>
        </template>
        <template #left>
          <h4><i class="fa-solid fa-angle-left text-white" :style="{opacity:0.5}"></i></h4>
        </template>
      </van-nav-bar>
  
      <div class="content">
        <van-cell-group inset class="">
          <van-cell class="bg-lightPink">
            <template #title>
              <h6 class="text-darkBlue"><strong>卡片設定</strong></h6>
            </template>
            <template #value>
              <!-- <van-button size="small" class="ml-1 btn-moBlue" icon="tv-o" hairline @click="$router.push('/card/video')">教學影片</van-button> -->
              <van-button size="small" class="ml-1 btn-moBlue" icon="tv-o" hairline @click="showMovie = true">教學影片</van-button>
              <van-button size="small" class="ml-1 btn-skyBlue" icon="eye-o" hairline @click="handlePreview">預覽</van-button>
            </template>
          </van-cell>

          <van-popup v-model:show="showMovie" class="p-3" closeable>
            <iframe width="375" height="215" src="https://www.youtube.com/embed/fjZsQ0Rh6yk" title="Utel電子名片教學"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
          </van-popup>
  
          <van-field
            v-model="form.title"
            label="標題文字"
            name=""
            input-align="right"
            error-message-align="right"
            placeholder="請輸入您在名片切換時顯示的文字"  
            :rules="[{ required: true, message: '標題文字必填' }]" 
          />
          <van-field label="是否顯示於感應名片" class="longText" input-align="right">
              <template #input>
                <van-switch
                  v-model="form.showNfc"
                  size="18px" 
                  active-color="#345068"
                  inactive-color="#888888"
                />
              </template>
            </van-field>
  
        </van-cell-group>
  
        <van-cell-group inset class="mt-3">
          <keep-alive>
            <div id="app">

              <!-- tab -->
              <div class="bg-lightPink px-2 pt-3">
                <ul class="nav nav-tabs">
                  <li
                    class="nav-item"
                    v-for="(card, index) in form.json5.cards"
                    :key="index"
                    @click="form.page = index + 1"
                  >
                    <button
                      type="button"
                      class="nav-link"
                      :class="{ active: form.page === index + 1 }"
                    >
                      {{ index + 1 }}
                    </button>
                  </li>
                  <li
                    class="nav-item"
                    @click="addCard"
                    v-if="form.json5.cards.length < 10"
                  >
                    <button type="button" class="nav-link">
                      <i class="fa fa-plus-circle"></i>  新增
                    </button>
                  </li>
                </ul>
              </div>
              <!-- /tab -->

              <div class="py-2">
                <van-field label="調整卡片順序" :border="false" v-if="form.json5.cards.length > 1">
                    <template #button>
                      <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-left" @click="moveCard(0, form.page)">前移</van-button>
                      <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow" @click="moveCard(1, form.page)">後移</van-button>
                      <van-button size="small" class="ml-1 btn-tomatoRed" icon="delete-o" @click="delCard(form.page)"></van-button>
                    </template>
                </van-field>

                <van-divider :style="{ color: '#345068', borderColor: '#345068', padding: '0 16px' }"><strong>卡片設定</strong></van-divider>

                <van-field 
                    v-model="form.json5.cards[form.page - 1].ratio"
                    label="卡片長寬比"
                    id="vcard-ratio"
                    input-align="right" 
                    placeholder="請輸入圖片長寬比，比如：20:13、1:1、6:8"
                />
                
                <van-field 
                    v-model="form.json5.cards[form.page - 1].bgColor"
                    label="卡片底色"
                    id="vcard-bgColor"
                    input-align="right" 
                    placeholder="請輸入卡片底色的色碼，如：#333333"
                    :border="false"
                    :rules="[{ required: true, message: '卡片底色色碼必填' }]" 
                >
                  <template #button>
                    <input
                      v-model="form.json5.cards[form.page - 1].bgColor"
                      type="color" class="form-control-color"
                    />
                  </template>
                </van-field>
                  
                <van-divider :style="{ color: '#345068', borderColor: '#345068', padding: '0 16px' }"><strong>內容圖片設定</strong></van-divider>

                <van-field 
                    v-model="form.json5.cards[form.page - 1].ratio"
                    :border="false"
                >
                  <template #input>
                    <van-uploader
                      :after-read="afterRead"
                      :max-count="1"
                      name="cardimage"
                      @delete="handleDelete"
                    >
                      <template
                        v-if="form.json5.cards[form.page - 1].image.length > 0"
                      >
                        <div class="upload-main">
                          <img
                            class="upload-img"
                            :src="form.json5.cards[form.page - 1].image"
                            alt=""
                          />
                          <p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
                            <i class="fa-solid fa-arrow-left"></i> 點擊更換圖片
                          </p>
                        </div>
                      </template>
                      <template v-else>
                        <div class="upload-main">
                          <img
                            class="upload-img"
                            src="@/assets/images/upload.jpg"
                          />
                          <p class="ml-3">請上傳圖片</p>
                          <p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
                            請上傳圖片
                          </p>
                        </div>
                      </template>
                    </van-uploader>
                  </template>
                </van-field>                

                <!-- <van-field 
                    v-model="form.json5.cards[form.page - 1].link"
                    label="圖片網址連結"
                    id="vcard-link"
                    input-align="right" 
                    placeholder="連結(需輸入完整網址,http://..,https://...)"
                /> -->

                <van-divider :style="{ color: '#345068', borderColor: '#345068', padding: '0 16px' }"><strong>卡片標題</strong></van-divider>

                <van-field 
                    v-model="form.json5.cards[form.page - 1].title"
                    label="標題文字"
                    id="vcard-title"
                    input-align="right" 
                    placeholder="連結(需輸入完整網址,http://..,https://...)" 
                    :rules="[{ required: true, message: '請填寫卡片標題文字' }]" 
                />

                <van-field 
                    v-model="form.json5.cards[form.page - 1].titleSize"
                    is-link
                    readonly
                    label="標題文字大小"
                    id="vcard-titleSize"
                    input-align="right" 
                    placeholder="請輸入標題文字的色碼，如：#333333"
                    @click="showTitleSizePicker = true"
                />
                <van-popup v-model:show="showTitleSizePicker" round position="bottom">
                  <van-picker
                    :columns="sizeColumns"
                    @cancel="showTitleSizePicker = false"
                    @confirm="onTitleSizeConfirm"
                  />
                </van-popup>

                <van-field 
                    v-model="form.json5.cards[form.page - 1].titleColor"
                    label="標題文字顏色"
                    id="vcard-titleColor"
                    placeholder="請輸入標題文字的色碼，如：#333333"
                    :border="false"
                    :rules="[{ required: true, message: '標題文字色碼必填' }]" 
                >
                  <template #button>
                    <input
                      v-model="form.json5.cards[form.page - 1].titleColor"
                      type="color" class="form-control-color"
                    />
                  </template>
                </van-field>

                <van-divider :style="{ color: '#345068', borderColor: '#345068', padding: '0 16px' }"><strong>卡片說明文字</strong></van-divider>

                <van-field 
                    v-model="form.json5.cards[form.page - 1].desc"
                    label="說明文字"
                    label-align="top" 
                    id="vcard-desc"
                    type="textarea"
                    maxlength="50"
                    placeholder="請填寫卡片說明文字" 
                    show-word-limit
                    :rules="[{ required: true, message: '請填寫卡片說明文字' }]" 
                />

                <van-field 
                    v-model="form.json5.cards[form.page - 1].descSize"
                    is-link
                    readonly
                    label="說明文字大小"
                    id="vcard-descSize"
                    input-align="right" 
                    placeholder="請輸入說明文字的色碼，如：#333333"
                    @click="showDescSizePicker = true"
                />
                <van-popup v-model:show="showDescSizePicker" round position="bottom">
                  <van-picker
                    :columns="sizeColumns"
                    @cancel="showDescSizePicker = false"
                    @confirm="onDescSizeConfirm"
                  />
                </van-popup>

                <van-field 
                    v-model="form.json5.cards[form.page - 1].descColor"
                    label="說明文字顏色"
                    id="vcard-descColor"
                    placeholder="請輸入說明文字的色碼，如：#333333"
                    :rules="[{ required: true, message: '說明文字色碼必填' }]" 
                >
                  <template #button>
                    <input
                      v-model="form.json5.cards[form.page - 1].descColor"
                      type="color" class="form-control-color"
                    />
                  </template>
                </van-field>

              </div>

              <van-divider :style="{ color: '#345068', borderColor: '#345068', padding: '0 16px' }"><strong>按鈕連結設定</strong></van-divider>

              <van-field 
                  label="新增按鈕"
                  input-align="right"
                  :border="false"
              >
                <template #button>
                  <van-button size="small" class="ml-1 btn-outline-skyBlue" icon="add-o" @click="addBtn(form.page)"><h6>新增按鈕</h6></van-button>
                  <van-button size="small" class="ml-1 btn-outline-skyBlue" icon="share-o" @click="addShareBtn(form.page)"><h6>新增分享按鈕</h6></van-button>
                </template>
              </van-field>
              
              <div class="p-3">
                <div class="card shadow-sm" v-for="(btn, index) in form.json5.cards[form.page - 1].btns" :key="index">
                  <div class="card-header" :style="{backgroundColor:btn.color}">
                    <van-field :label="`控制按鈕 ${ index + 1 }`" :border="false" class="bg-transparent">
                      <template #button>
                        <van-button size="small" class="bg-transparent border-0" icon="arrow-up" @click="moveBtn(0, index)" v-if="form.json5.cards[form.page - 1].btns.length > 1"></van-button>
                        <van-button size="small" class="bg-transparent border-0" icon="arrow-down" @click="moveBtn(1, index)" v-if="form.json5.cards[form.page - 1].btns.length > 1"></van-button>
                        <van-button size="small" class="bg-transparent border-0" icon="delete-o" @click="delBtn(index)"></van-button>
                      </template>
                    </van-field>
                  </div>
                  <div class="card-body">
                    <van-field 
                        v-model="btn.text"
                        :label="`按鈕 ${ index + 1 } 文字`"
                        id="cardbtn-text-0"
                        input-align="right" 
                        placeholder="請填寫按鈕文字" 
                        :rules="[{ required: true, message: '請填寫按鈕文字' }]" 
                    />

                    <van-field 
                        v-model="btn.link"
                        :label="`按鈕 ${ index + 1 } 連結`"
                        id="cardbtn-link-0"
                        input-align="right" 
                        type="url"
                        placeholder="連結(需輸入完整網址,http://..,https://...)" 
                        :rules="[{ required: true, message: '請填寫按鈕連結' }]" 
                    />

                    <van-field 
                        v-model="btn.color"
                        label="按鈕背景顏色"
                        id="vcard-titleColor"
                        input-align="right"
                        placeholder="請輸入標題文字的色碼，如：#333333"
                        :rules="[{ required: true, message: '標題文字色碼必填' }]" 
                    >
                      <template #button>
                        <input
                          v-model="btn.color"
                          type="color" class="form-control-color"
                        />
                      </template>
                    </van-field>

                    <van-field 
                        v-model="btn.color"
                        label="按鈕背景顏色"
                        id="vcard-titleColor"
                        input-align="right"
                        placeholder="請輸入標題文字的色碼，如：#333333"
                        :border="false"
                        :rules="[{ required: true, message: '標題文字色碼必填' }]" 
                    >
                      <template #input>
                        <van-radio-group direction="horizontal" v-model="btn.btnHeight" checked-color="#345068">
                          <van-radio name="sm" @click="btn.btnHeight='sm'">sm</van-radio>
                          <van-radio name="md" @click="btn.btnHeight='md'">md</van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                  </div>
                </div>

              </div>
              
              <div class="px-5 pb-4">
                <van-button block class="btn-darkBlue" native-type="submit">
                  <h6>名片確認 & 建立</h6>
                </van-button>
              </div>              
            </div>
          </keep-alive>
        </van-cell-group>
      </div>
    </van-form>
  </div>
  
</template>

<style lang="less" scoped>
.form-control-color,.form-control-color:valid {
  appearance: none;
  background: 0 0;
  border: 1px solid #ced4da;
  height: 30px;
  padding: 0 2px;
  border-radius: 5px;
}

.flex-section {
  width: 100%;
}
.upload-main{
  .upload-img{
    margin: 5px 0;
    width:250px;
  }
}
</style>
