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

import { showToast,showSuccessToast } from 'vant';

import { getUserFaviList, updateUserInfo, updateCard, searchConnection, addUserFavi, setUserNfcTpl } from '@/api'

import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'


const setShowPicker = ref(false);

const selectVal1 = ref(0);
const selectVal2 = ref('a');
const selectOpt1 = [
  { text: '全部商品', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
];
const selectOpt2 = [
  { text: '默认排序', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' },
];

const elitelist = ref([
  {
    avatar:"https://fakeimg.pl/250x100/",
    real_name:"樹林李敏鎬",
    introduction:"test",
  },
  {
    avatar:"https://fakeimg.pl/250x100/",
    real_name:"樹林李敏鎬",
    introduction:"test",
  },
  {
    avatar:"https://fakeimg.pl/250x100/",
    real_name:"樹林李敏鎬",
    introduction:"test",
  },
]);

// let res = await getUserFaviList();
// if (res.code === 200) {
//   elitelist.value.data = res.data;

//   console.log(elitelist)
// }



</script>

<template>
  <div class="member page">
    <van-nav-bar
      class="bg-skyBlue py-1"
      left-arrow
      right-arrow
      @click-left="$router.push('/')"
      @click-right="setShowPicker = true"
    >
      <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>
      
      <template #right>
        <h4><i class="fa-solid fa-sliders text-white" :style="{opacity:0.5}"></i></h4>
      </template>
    </van-nav-bar>

    <div class="content">
      <van-cell-group inset>        
        <van-dropdown-menu>
          <van-dropdown-item v-model="selectVal1" :options="selectOpt1" />
          <van-dropdown-item v-model="selectVal2" :options="selectOpt2" />
        </van-dropdown-menu>
      </van-cell-group>

      <van-cell-group inset>
        <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="tab2ListonLoad" -->
        <van-list class="accordion" id="accordion">

          <div class="list-item" v-for="(item, index) in elitelist" :key="index">
            <div class="left">
              <div class="avatar"><img :src="item.avatar"></div>
              <div class="text">
                <h5 class="name ellipsis">{{ item.real_name }}</h5>
                <div class="desc ellipsis">@{{ item.introduction }}</div>
              </div>
            </div>
            <div class="right">
              <van-button size="small" class="border-0">
                <h5><i class="fa-solid fa-share-nodes text-darkBlue"></i></h5>
              </van-button>
            </div>
          </div>

        </van-list>

      </van-cell-group>
    </div>

  </div>
</template>

<style lang="less" scoped>

.content{
  min-height: calc(100vh - 54px);
}
.van-list {
  .list-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 15px 0;
    margin: 0 15px;
    border-bottom: 1px #e3e3e3 solid;

    .left {
      flex: 1 0 0%;
      display: flex;
      align-items: center;

      .avatar {
        width: 55px;
        min-width: 55px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        margin-right: 10px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .name {
        font-weight: bold;
      }
    }

    .right {
      flex: 0 0 auto;
    }

    .bottom {
      flex: 1 0 100%;
      border: 1px #e3e3e3 solid;
      border-radius: 10px;
      padding: 0 10px;
      margin: 0;
      transition: all .2s;

      &.show {
        padding: 10px;
        margin: 5px 0;
      }
    }
  }
}
</style>
