<template>
  <div class="page-content tabbar-list">
    <div class="user-top">
      <van-image class="user-bg" src="/img/user-bg.jpeg" fit="cover" />
      <van-image class="img" :src="isLogin && userInfo.headPic ? userInfo.headPic : '/img/user.png'" />
      <div>
        <div class="title" v-if="isLogin">{{ userInfo.realname }}</div>
        <div class="desc">{{ isLogin ? userInfo.username : '您还未登录' }}</div>
      </div>
    </div>
    <div class="content">
      <div class="card">
        <div class="title">我的沟通</div>
        <communicate-item :list="list" />
      </div>
    </div>
    <van-button class="exit" round block :type="isLogin ? 'danger' : 'primary'" size="small" native-type="submit"
      @click="handleButton">{{ isLogin ? '退出登录' : '立即登录' }}</van-button>
    <tabbar />
  </div>
</template>
<script setup lang="ts">
import userInfoStore from '@/stores/userInfo'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const userInfo = userInfoStore()
console.log(userInfo);
const isLogin = computed(() => !!userInfo.token)
const handleButton = async () => {
  if (isLogin.value) {
    await showConfirmDialog({
      title: '提示',
      message: '确定退出吗',
    })
    userInfo.token = ''
    userInfo.headPic = ''
    list.value = []
  } else {
    router.push({
      name: 'login',
      query: {
        redirect: router.currentRoute.value.fullPath
      }
    })
  }
}
import { cusLinkList } from '@/utils/api'
import { convertToUrl } from '@/utils'
const list = ref<any>([])
const getCusLink = async () => {
  if (!isLogin.value) return
  const url = convertToUrl({
    limit: 3,
    dataStatus: 1,
    curPage: 1,
    createUser: userInfo.id
  })
  const data = await cusLinkList(url)
  list.value = data
}
getCusLink()
</script>

<style lang="scss" scoped>
.user-top {
  position: relative;
  display: flex;
  z-index: 3;
  padding: 30px 30px 80px;
  .user-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  .img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
  }
  .desc {
    color: #808080;
    margin-top: 4px;
    font-size: 14px;
  }
}
.page-content {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background-color: #f6f8fa;
  position: relative;
  .content {
    position: relative;
    height: calc(100% - 210px);
    overflow: auto;
    padding-top: 20px;
    .card {
      background-color: #fff;
      border-radius: 10px;
      margin: 10px;
      margin-bottom: 20px;
      padding: 16px 0;
      .title {
        font-weight: 600;
        margin-left: 16px;
        margin-bottom: 8px;
        padding-bottom: 8px;
      }
    }
  }
  .exit {
    width: 80%;
    position: absolute;
    bottom: 80px;
    left: 10%;
  }
}
</style>