<template>
  <!-- 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.headimg || defaultAvatar" alt="avatar" />
          </a>
          <div class="media-body">
            <a href="javascript:void(0)" class="title-color">
              {{ userInfo.line_name }}
              <span class="content-color font-sm">{{ userInfo.is_slash ? 'Slash會員' : '一般會員' }} {{ userInfo.is_resale ? '[分銷商]' : '' }}</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">
            <div>
              餘額
            </div>
            <div>
              ${{ userInfo.user_money }}
            </div>
          </div>
          <div class="user-info">
            <div>
              未入帳
            </div>
            <div>
              ${{ userInfo.frozen_money }}
            </div>
          </div>
          <div class="user-info">
            <div>
              推薦人數
            </div>
            <div>
              {{ userInfo.refer_num }}人
            </div>
          </div>
          <div class="user-info">
            <div>
              分潤金額
            </div>
            <div>
              $0
            </div>
          </div>

        </div>
      </div>

      <!-- Navigation Start -->
      <ul class="navigation">
        <li>
          <a class="nav-link title-color font-sm">
            <i class="icon-account icli"></i>
            <span>推薦人</span>
          </a>
          <a>
            {{ userInfo.parent_name || '沒有推薦人' }}
          </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>
          <button v-clipboard:copy="userInfo.refer_url" v-clipboard:success="onSuccess"
            v-clipboard:error="onError">複制</button>
        </li>
        <li @click="$router.push('/address')">
          <a class="nav-link title-color font-sm">
            <i class="icon-map-marker icli"></i>
            <span>收貨地址</span>
          </a>
          <a class="arrow">
            <i class="icon-chevron-right"></i>
          </a>
        </li>
        <li @click="$router.push('/user/order')">
          <a class="nav-link title-color font-sm">
            <i class="icon-order icli"></i>
            <span>我的訂單</span>
          </a>
          <a class="arrow">
            <i class="icon-chevron-right"></i>
          </a>
        </li>
        <template v-if="userInfo.is_resale === 1">
          <li @click="$router.push('/user/account')">
            <a class="nav-link title-color font-sm">
              <i class="icon-home icli"></i>
              <span>餘額管理</span>
            </a>
            <a class="arrow">
              <i class="icon-chevron-right"></i>
            </a>
          </li>
          <li @click="$router.push('/user/share')">
            <a class="nav-link title-color font-sm">
              <i class="icon-share icli"></i>
              <span>我的推薦</span>
            </a>
            <a class="arrow">
              <i class="icon-chevron-right"></i>
            </a>
          </li>
          <li @click="$router.push('/user/bank')">
            <a class="nav-link title-color font-sm">
              <i class="icon-bank icli"></i>
              <span>提領帳戶</span>
            </a>
            <a class="arrow">
              <i class="icon-chevron-right"></i>
            </a>
          </li>
        </template>
        <template v-else>
          <li @click="handleBeResale">
            <a class="nav-link title-color font-sm">
              <i class="icon-bank icli"></i>
              <span>成為經銷商</span>
            </a>
            <a class="arrow">
              <i class="icon-chevron-right"></i>
            </a>
          </li>
        </template>
      </ul>
      <!-- Navigation End -->
      <button class="log-out" data-bs-toggle="offcanvas" data-bs-target="#confirmation" aria-controls="confirmation"
        @click="handleLogout">
        <i class="icon-arrow-right-bold-box icli"></i>
        登出
      </button>
    </div>
  </main>
  <!-- Main End -->
</template>

<script setup>
import liff from '@line/liff';
import Cookies from 'js-cookie';

import { onMounted, ref } from 'vue'

import { useRouter } from 'vue-router'
import { useShopStore } from '@/store/Shop'

import { getUserInfo } from '@/services/user'
import { showToast } from 'vant';
import { showConfirmDialog } from 'vant';

import defaultAvatar from '@/assets/images/avatar/avatar.png'

import {updateUserResale} from '@/services/user' 
import { getArticle } from '@/services/article'
// (async ()=>{
//   await liff.init({ liffId: '1657782615-qGK9WQ5m' });
// })()

const router = useRouter()

const shopStore = useShopStore()

const userInfo = ref({})
const resaleRule = ref('')


onMounted(async () => {

  let res = await getUserInfo()

  if (res.code === 200) {
    userInfo.value = res.data
  }

  let resArticle = await getArticle(146)
  if(resArticle.code === 200){
    resaleRule.value = resArticle.data.content
  }

})

const handleBeResale = async () => {
  try{
    await showConfirmDialog({
      title: '申請成為經銷商',
      message: resaleRule.value,
    })

    let res = await updateUserResale()
    if(res.code === 200){
      userInfo.value.is_resale = 1
      return showToast('您已成為本站經銷商')
    }else{
      showToast(res.msg)
    }
  }catch(e){
    return
  }
}

const handleLogout = () => {
  Cookies.remove('token', { domain: shopStore.sso_domain })
  Cookies.remove('uid', { domain: shopStore.sso_domain })

  // liff.logout()
  router.replace('/login')
}

// 推薦連結
const onSuccess = () => {
  showToast('複制成功')
}

const onError = () => {
  showToast('複制失敗')
}
</script>

<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%;
  }
}
</style>
