<template>
  <div id="home">
    <van-nav-bar title="UTel電子名片" />
    <div class="tab-section" v-cloak>
      <van-tabs :lazy-render="true" v-model:active="activeName" v-show="user.level>1">
        <van-tab title="我的名片" name="0">
        </van-tab>
        <van-tab :title="card_title" name="1" v-if="showCusCard">
        </van-tab>
        <van-tab :title="card.title" :name="card.id.toString()" v-for="card of vip_card" :key="card.id">
        </van-tab>
      </van-tabs>
      <div class="flex-section">
        <div class="table-responsive">
          <div class="chatbox">
              <div id="flex" ref="flexRef"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-area" v-if="isIOs">
      <a :href="`${imgUrl}/${user.user_id}/${user.user_id}.vcf`">
        <div class="menu">儲存至手機聯絡人</div>
      </a>
    </div>
    <div class="btn-area">
      <a :href="`tel:${user.phone}`">
        <div class="menu tel">{{user.phone}}</div>
      </a>
    </div>
    <div class="btn-area" v-if="user.line">
      <a :href="`https://line.naver.jp/ti/p/~${user.line}`">
        <div class="menu line">Line</div>
      </a>
    </div>
    <div class="btn-area" v-if="user.facebook">
      <a :href="user.facebook">
        <div class="menu fb">Facebook </div>
      </a>
    </div>
    <div class="btn-area" v-if="user.ig">
      <a :href="`https://www.instagram.com/${user.ig}`">
        <div class="menu ig">Instagram</div>
      </a>
    </div>
    <div class="btn-area" v-if="user.youtube">
      <a :href="`https://www.youtube.com/user/${user.youtube}`">
      <div class="menu yt">Youtube</div>
      </a>
    </div>

  </div>
</template>

<script>
import { nextTick, onBeforeMount, reactive, ref , toRefs , watch } from 'vue'

import { checkUser, getCard, getCusCard, getVipCard } from '@/api'
import { genCard } from './js/card1'
import { genJCICard } from '@/utils/card1'
import { genCard1 } from '@/utils/card2'
import { genVipCard } from '@/utils/vipcard'

import {Toast} from 'vant'

export default {
  name: 'LineCard',
  setup() {
    const state = reactive({
      imgUrl: process.env.VUE_APP_IMAGE_URL,
      user: {},
      showCusCard: false,
      card_title: '',
      vip_card:[],
      flexContent: {}
    })

    const activeName = ref('0');

    let isIOs = ref(null)

    let flexRef = ref(null)

    //取得user id
    let token = encodeURIComponent(new URLSearchParams(window.location.search).get('params'))

    //取得是否為iphone
    var u = navigator.userAgent;
    isIOs.value = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);


    onBeforeMount(async ()=>{

      const chkRes = await checkUser(token)

      if(chkRes.code!==200){
        if(chkRes.code!==201){
          window.location.replace('/error.html')
          return
        }

        window.location.replace(`${process.env.VUE_APP_MC_URL}/?act=openright&verify=${chkRes.data.verify}`)
        return
      }

      let userid=chkRes.data

      let params = {}

      if(userid){
        params = {userid}
      }

      const card1Res = await getCard(params)

      if( card1Res.code !== 200 ){
          Toast('操作錯誤')
          return
          // window.location.replace('https://liff.line.me/1656948609-xMp7dWAz')
      }
      state.user = card1Res.data
      
      if(card1Res.data.level > 1 && card1Res.data.has_cuscard ===1){
          state.showCusCard = true
          state.card_title = card1Res.data.card_title
      }

      if(card1Res.data.level > 2){
        let vipCardRes = await getVipCard({userid: state.user.user_id})

        state.vip_card = vipCardRes.data.filter(item => item.nfc_show ===1) 
      }else{
        state.vip_card = []
      }


      // activeName.value = '0'
      watch(() => activeName.value, function(newVal, oldVal){
        if(newVal !== oldVal){
          if(newVal){
            showFlex(newVal)
          }
        }
      },{immediate: true})

    })
    
    async function showFlex(id){

      switch(id){
        case '0':
            // let {data:res} = await getCard({userid:state.user.user_id})
            let { card } = genCard(state.user)
            
            state.flexContent = JSON.parse(card)
            flexRef.value.innerHTML = ''
            flex2html("flex", JSON.parse(card))          
          break
        case '1':  
          if(state.user.level > 1){
            let card2Res = await getCusCard({userid: state.user.user_id})
            if( card2Res.code === 200){
              if(card2Res.data.cus_card){
                state.flexContent = genCard1(JSON.parse(card2Res.data.cus_card))
                flexRef.value.innerHTML = ''
                flex2html("flex", state.flexContent)
              }
            }
          }else{
            // flexRef.value.innerHtml = ''
          }
          break
        default:
          if(state.user.level > 2){
            let res = state.vip_card.find(item => {return item.id==id})
            if(res.type===0){
              state.flexContent = genCard1(JSON.parse(res.content))
              flexRef.value.innerHTML = ''
              flex2html("flex", state.flexContent)
            }else{
              state.flexContent = genVipCard(JSON.parse(res.content))
              flexRef.value.innerHTML = ''
              flex2html("flex", state.flexContent)
            }
          }else{
            flexRef.value.innerHtml = ''
          }
          break
      }
    }

    return {
      ...toRefs(state),
      activeName,
      flexRef,
      isIOs
    }
  }
}
</script>
<style lang="less" scoped>
[v-cloak] {
  display: none;
}
.btn-area {
  margin: 10px auto;
  width: 95%;
  background: #fff;
  border: 1px solid #222;
  .menu {
    border-bottom: 1px solid #e5e5e5;
    height: 35px;
    font-size: 15px;
    color: #222;
    font-weight: 500;
    text-align: center;
    line-height: 35px;
  }
  .tel {
    background: url("~@/assets/images/i01.png") no-repeat 10px center;
    background-size: 20px;
  }
  .fb {
    background: url("~@/assets/images/i02.png") no-repeat 10px center;
    background-size: 20px;
  }
  .line {
    background: url("~@/assets/images/i03.png") no-repeat 10px center;
    background-size: 20px;
  }
  .ig {
    background: url("~@/assets/images/i05.png") no-repeat 10px center;
    background-size: 20px;
  }
  .yt {
    background: url("~@/assets/images/i04.png") no-repeat 10px center;
    background-size: 20px;
  }
  .tw {
    background: url("~@/assets/images/i06.png") no-repeat 10px center;
    background-size: 20px;
  }
}

.chatbox {
  background-color: #666;
  margin-top: 10px;
  padding-top: 10px;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.flex-section {
  background-color: #fff;
  color: white;
  // z-index: 99999;
}

</style>
