<script setup>
import { ref, onMounted } from 'vue';

import { searchConnection,addUserFavi } from "@/api";

const tab2list = ref([]);
const tab2Loading = ref(false);
const tab2Finished = ref(false);
const tab2TodoLists = ref([]);
const tab2AddFriend = ref([]);
const loading = ref(false);
const finished = ref(false);

const form = ref({
  user_id: 1,
  real_name: '王小明',
  avatar: '/src/assets/images/tp/tp_1.jpg',
  note: '我是王小明',
  supply: '我能分享的資源',
  demand: '我需要的資源',
});

onMounted(async () => {
    let res = await searchConnection();
    console.log(res);
    if(res.code===200){
      tab2list.value = res.data;
    }

    res = await addUserFavi({uf_user_id:form.value.user_id});
    // console.log(res);
    if(res.code===200){
      tab2AddFriend.value = res.data;
    }
});

const tab2result = ref('');
const tab2showPicker = ref(false);
const tab2columns = [
  { text: '臺北', value: 'Taipei' },
  { text: '桃園', value: 'Taoyuan' },
  { text: '臺中', value: 'Taichung' },
  { text: '彰化', value: 'Changhua' },
  { text: '高雄', value: 'Kaohsiung' },
];

const tab2ListonLoad = () => {
  // 異步更新數據
  // setTimeout 僅做示例，真實場景中一般為 ajax 請求
  // setTimeout(() => {
  //   for (let i = 0; i < 10; i++) {
  //     tab2list.value.push(tab2list.value.length + 1);
  //   }

  //   // 加載狀態結束
  //   tab2Loading.value = false;

  //   // 數據全部加載完成
  //   if (tab2list.value.length >= 40) {
  //     tab2Finished.value = true;
  //   }
  // }, 1000);
};

const tab2OnConfirm = ({ selectedOptions }) => {
  tab2result.value = selectedOptions[0]?.text;
  tab2showPicker.value = false;
};

const tab2searchValue = ref('');
const tab2OnSearch = () => {
  // tab2TodoLists = tab2list.filter(tab2searchValue);
  // console.log(tab2TodoLists)
};

</script>

<template>
        <div class="content cnt2"> 
      <van-cell-group inset>
        <van-row align="center">
          <van-col span="8">
            <van-field
              v-model="tab2result"
              is-link
              readonly
              name="picker" 
              :border="false" 
              placeholder="縣市"
              @click="tab2showPicker = true"
            />
            <van-popup v-model:show="tab2showPicker" position="bottom">
              <van-picker
                :columns="tab2columns"
                @confirm="tab2OnConfirm"
                @cancel="tab2showPicker = false"
              />
            </van-popup>
          </van-col>
          <van-col span="16">
            <van-search
              v-model="tab2searchValue"
              placeholder="請輸入搜尋關鍵字"
              @search="tab2OnSearch"
            />
          </van-col>
        </van-row>

        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="沒有更多了"
          @load="tab2ListonLoad"   
          class="accordion" 
          id="accordion"       
        >
          <!-- <van-cell v-for="item in list" :key="item" :title="item" >  -->
          <!-- <van-cell v-for="item in tab2list" :key="item" :title="item"> 
            <template #title>
              <div class="list-item">
                <div class="avatar"><img :src="item.avatar"></div>
                <div class="text">
                  <h5 class="name ellipsis">{{item.real_name}}</h5>
                  <div class="desc ellipsis">@{{item.note}}</div>
                </div>
              </div>
            </template>
            <template #value>
              <van-button size="normal" class="border-0"><h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5></van-button>
              <van-button size="normal" class="border-0"><h5><i class="fa-solid fa-comment-medical text-darkBlue"></i></h5></van-button>
            </template>
          </van-cell>     -->

          <div class="list-item" v-for="(item, index) in tab2list" :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.note}}</div>
              </div>
            </div>
            <div class="right">
              <van-button size="normal" class="border-0" data-toggle="collapse" :href="`#c${index}`" role="button" aria-expanded="false" :aria-controls="`c${index}`">
                <h5><i class="fa-solid fa-layer-group text-darkBlue"></i></h5>
              </van-button>
              <van-button size="normal" class="border-0"><h5><i class="fa-solid fa-comment-medical text-darkBlue"></i></h5></van-button>
            </div>
            <div class="bottom collapse" :id="`c${index}`" data-parent="#accordion">
              <h6 class="text-darkBlue"><strong>我能分享的資源</strong></h6>
              <div class="desc">{{item.supply}}</div>
              <div class="url py-2">網址：<a href=""></a></div>
              <hr/>
              <h6 class="text-darkBlue"><strong>我需要的資源</strong></h6>
              <div class="desc">{{item.demand}}</div>
            </div>
          </div>

        </van-list>
        
      </van-cell-group>


    </div>

</template>

<style scoped>
    
</style>