<template>
    <header class="header">
      <div class="logo-wrap">
        <!-- <i class="icon-menu icli nav-bar" @click="toggleMenu"></i> -->
        <a href="###"> 
          <img class="logo" src="@/assets/images/logo/logo_w.png" alt="logo" />
        </a>
      </div>
      <div class="avatar-wrap" @click="$router.push('/cart')">
        <!-- <span class="font-sm"><i class="iconly-Location icli font-xl"></i> Los Angeles</span> -->
        <!-- <van-icon name="cart-o" :badge="cartStore.cartNum" /> -->
      </div>
    </header>

    <!-- Main Start -->
    <main class="main-wrap account-page mb-xxl">
      <div class="account-wrap section-b-t">
        <div class="user-panel">
          <div class="media">
            <a href="javascript:void(0)"> 
              <img :src="userInfo.line_picture || import('@/assets/images/user.jpg')" alt="avatar" />
            </a>
            <div class="media-body">
              <a href="javascript:void(0)" class="title-color">
                {{ userInfo.real_name }}
                <span class="content-color font-sm">歡迎來到電子名片會員中心</span>
              </a>
            </div>
            <!-- <div class="media-right" @click="$router.push('/user/setting')"> -->
              <!-- <i class="icon-pencil"></i> -->
            <!-- </div> -->
          </div>
          <div class="user-info-block">
          <div class="user-info" @click="router.push('/member')">
            <div >
              <i class="icon-pencil"></i>
              修改資料
            </div>
            <div>
              修改名片資料
            </div>
          </div>
          <div class="user-info" @click="goCardEdit">
            <div>
              <i class="icon-add-chart"></i>
              商務卡片
            </div>
            <div>
              設計商務卡片
            </div>
          </div>
          <div class="user-info" @click="goShop">
            <div>
              <i class="icon-cart-variant"></i>
              立即購買
            </div>
            <div>
              付費開通名片
            </div>
          </div>
          <div class="user-info" @click="handleShowNfc">
            <div>
              <i class="icon-qrcode"></i>
              展示二維碼
            </div>
            <div>
              提供好友掃瞄
            </div>
          </div>

        </div>
        </div>

        <!-- Navigation Start -->
        <ul class="navigation">
          <li>
            <a href="javascript:;" class="nav-link title-color font-sm">
              <i class="icon-star icli"></i>
              <span>會員編號</span>
            </a>
            <a href="javascript:;">
              {{ userInfo.user_id}}
            </a>
          </li>
          <li>
            <a href="javascript:;" class="nav-link title-color font-sm">
              <i class="icon-account icli"></i>
              <span>姓名</span>
            </a>
            <a href="javascript:;">
              {{ userInfo.real_name}}
            </a>
          </li>
          <li>
            <a href="javascript:;" class="nav-link title-color font-sm">
              <i class="icon-corporate icli"></i>
              <span>公司名稱</span>
            </a>
            <a href="javascript:;">
              {{ userInfo.company}}
            </a>
          </li>
          <li>
            <a href="javascript:;" class="nav-link title-color font-sm">
              <i class="icon-heart icli"></i>
              <span>會員等級</span>
            </a>
            <a href="javascript:;">
              {{ userInfo.level_name}}
            </a>
          </li>
          <li>
            <a href="javascript:;" class="nav-link title-color font-sm">
              <i class="icon-camera-timer icli"></i>
              <span>使用期限</span>
            </a>
            <a href="javascript:;">
              {{ overdue }}
            </a>
          </li>
          <li>
            <a href="javacript:void(0)" class="nav-link title-color font-sm">
              <i class="icon-link-variant icli"></i>
              <span>名片連結</span>
            </a>
            <!-- <a href="javacript:void(0)"> -->
              <button v-clipboard:copy="userInfo.nfcurl"
              v-clipboard:success="onSuccess"
              v-clipboard:error="onError"
              >複製</button>
            <!-- </a> -->
          </li>
        </ul>
        <!-- Navigation End -->
        <button class="log-out" data-bs-toggle="offcanvas" data-bs-target="#confirmation" aria-controls="confirmation" @click="handleLogout">
          <i class="icon-logout icli"></i>
          登出
        </button>
      </div>
    </main>
    <!-- Main End -->
    <!-- Footer Start -->
    <Footer />
    <!-- Footer End -->
    <van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text="關閉"
      :show-confirm-button="false">
      <div class="qrcode">
        <qrcode-vue :value="userInfo.nfcurl" size="200" level="M" />
      </div>
    </van-dialog>

</template>

<script setup>
import liff from "@line/liff";

import Cookies from 'js-cookie'
import moment from 'moment'

import QrcodeVue from 'qrcode.vue'

import { toClipboard } from '@soerenmartius/vue3-clipboard'

import { ref, computed, onBeforeMount, nextTick } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

import { Toast } from 'vant'
import { Dialog } from 'vant';

import Footer from '@/components/Footer'

import { linelogin , bindCard } from '@/api'


const router = useRouter()
const route = useRoute()
const store = useStore()

const showShare = ref(false)

const showNfcQrcode = ref(false)

const imageUrl = ref(process.env.VUE_APP_IMAGE_URL)

const userLevel = {
  0: '未付費',
  1: '已付費',
}

const is_due = ref(false)


onBeforeMount(async () => {
  // await liff.init({ liffId: process.env.VUE_APP_LINE_LIFF_ID });

  // if (!Cookies.get('token')) {
  //   try {
  //     if (!liff.isLoggedIn()){
  //       liff.login({ redirectUri: window.location.href });
  //     }
  //   } catch (err) {
  //     console.log(`liff.state init error ${err}`);
  //     Toast('登入失敗。請聯絡管理員,(1001)')
  //     router.push('/login')
  //   }

  //   const profile = await liff.getProfile()

  //   const id_token = liff.getIDToken()

  //   let loginRes = await linelogin({ line_id: profile.userId, token: id_token })


  //   if (loginRes.code === 200) {
  //     if (route.query.act === 'openright') {
  //       Toast('您已經是本站會員')
  //     }
  //     Cookies.set('token', loginRes.data.token,{ expires: 365 ,domain: process.env.VUE_APP_DOMAIN})
  //     Cookies.set('uid', loginRes.data.uid,{ expires: 365 ,domain: process.env.VUE_APP_DOMAIN})

  //   } else if (loginRes.code === 202) {
  //     if (route.query.act === 'openright') {
  //       if (route.query.verify) {
  //         //詢問是否綁定
  //         Dialog.confirm({
  //           title: '卡片綁定',
  //           message: '確認是否綁定這張卡片'
  //         }).then(async ()=>{
  //           //確認綁定
  //           let bindRes = await bindCard({ uid: loginRes.data.uid , verify: route.query.verify })
  //           if(bindRes.code === 200){
  //             Toast.success('綁定成功')
  //           }else{
  //             Toast.fail('綁定失敗')
  //           }
  //         }).catch(()=>{
            
  //         })
  //       }
  //     }

  //     Cookies.set('token', loginRes.data.token, { expires: 365 ,domain: process.env.VUE_APP_DOMAIN})
  //     Cookies.set('uid', loginRes.data.uid, { expires: 365 ,domain: process.env.VUE_APP_DOMAIN})

  //   } else if (loginRes.code === 201) {
  //     if (route.query.act === 'openright') {
  //       if (route.query.verify) {
  //         router.push({
  //           path: '/register',
  //           query: {
  //             verify: route.query.verify
  //           }
  //         })

  //         return
  //       }
  //     } else if (route.query.aid) {
  //       router.push({
  //         path: '/register',
  //         query: {
  //           aid: route.query.aid
  //         }
  //       })
  //       return
  //     } else {
  //       Toast('請先註冊成為本站會員')
  //       return router.push({
  //         path: '/register',
  //         query: { refer: route.query.refer }
  //       })
  //     }

  //   } else if (loginRes.code === 401) { //token錯誤
  //     handleLogout()
  //     Toast('登入失敗。請重新登入(1002)')
  //     router.push('/login')
  //   } else {
  //     Toast('登入失敗。請聯絡管理員,(1003)')
  //     router.push('/login')
  //   }
  // }

  store.dispatch('user/getUserInfo')
})


const userInfo = computed(() => {
  return store.state.user.userInfo
})

const nfcurl = computed(() => {
  return encodeURI(store.state.user.userInfo.ufcurl)
})

const overdue = computed(() => {
  if (store.state.user.userInfo.overdue_time > 0) {
    return moment.unix(store.state.user.userInfo.overdue_time).format('YYYY-MM-DD')
  } else {
    return '無期限'
  }
})

const goCardEdit = () => {
    router.push('/card/edit')
}

const onSelect = (option) => {
  Toast(option.name);
  showShare.value = false;
};

const handleShowNfc = () => {
  showNfcQrcode.value = true
}

const doCopy = () => {
  toClipboard(userInfo.value.nfcurl)
  Toast('已放入剪貼簿')
}

const onSuccess = () => {
  Toast('已放入剪貼簿')
}

const onError = () => {
  Toast('操作失敗')
}

const doCopyUid = () => {
  toClipboard(userInfo.value.user_id)
  Toast('已放入剪貼簿')
}

const bindTggo = () => {
  console.log(userInfo.value)
  let url = `https://www.tggo.com.tw/u.cgi?&mnm=mybinding&ncode=${userInfo.value.uniqid}&name=${userInfo.value.real_name}&openExternalBrowser=1`;

  window.open(url,'_blank');
}

const handleLogout = () => {
  Cookies.remove('token',{ domain: process.env.VUE_APP_DOMAIN})
  Cookies.remove('uid',{ domain: process.env.VUE_APP_DOMAIN})
  // if (liff.isLoggedIn()) {
  //   liff.logout()
  // }
  router.push('/login')
}

const goShop = () => {
  window.open('https://shop.h888.fun/m/card','_blank')
}

</script>

<style src="@/assets/css/style.css">
</style>

<style lang="less" scoped>
.media{
  .media-body{
    width: 100%;
  }
  .media-right{
  width: 100%;
  vertical-align: text-top;
  text-align: right;
  i{
    font-size: 20px;
  }
  }

}
.user-info-block{
  box-sizing: content-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .user-info{
    // flex: 1;
    border: 1px gray solid;
    border-radius: 8px;
    margin: 5px 0;
    padding: 5px 10px;
    width: 48%;
    div:nth-child(1){
      font-size: 16px;
    }  
    div:nth-child(2){
      color: #999;
    }
  }
}

.qrcode {
  text-align: center;
}

</style>
