<template>
  <van-list
      v-if="total"
      class="follow-list"
      v-model:loading="loading"
      :finished="isFinished"
      finished-text="-- 没有更多了 --"
      @load="onLoad"
  >
    <van-cell v-for="(item, i) in list" :key="i">
      <div class="follow-item flex flex-row items-center w-full h-82 text-left" fit="cover">
        <van-image width="48" height="48" round class="mr-12" :src="item.avatar"/>
        <div class="flex-col flex-1 mr-12 min-w-0">
          <div class="text-xl text-black-3 font-bold text-ellipsis text-nowrap overflow-hidden ...">
            {{ item.nickName }}
          </div>
          <div class="text-base text-black/60 text-ellipsis text-nowrap overflow-hidden ...">
            粉丝量：{{ item.fansNumText }}
          </div>
        </div>
       <div class="items-end w-92 flex justify-end">
         <van-button class="follow-item__button" plain :disabled="item.saveLoading" :color="FANS_STATUS[item.fansStatus].bg" type="primary" @click="handleFollow(item)">
           {{ FANS_STATUS[item.fansStatus].text }}
         </van-button>
       </div>
      </div>
    </van-cell>
  </van-list>
  <van-empty v-else :description="currListConfig.empty"/>
</template>
<script setup>
const props = defineProps({
  listType: {type: String, default: 'friend'}, // friend|follow|fans
})

const listConfig = new Map([
  [
    'friend',
    {
      empty: '暂无互关',
      apiUrl: '/website/tourism/fans/getFriends',
    }
  ],
  [
    'follow',
    {
      empty: '暂无关注',
      apiUrl: '/website/tourism/fans/getMyConCern',
    }
  ],
  [
    'fans',
    {
      empty: '暂无粉丝',
      apiUrl: '/website/tourism/fans/getMyFans',
    }
  ]
])
const FANS_STATUS = {
  0: { status: 0, text: '关注', describe: '未关注', bg: '#FD9A00' },
  1: { status: 1, text: '已关注', describe: '已关注', bg: '#999' },
  2: { status: 2, text: '相互关注', describe: '相互关注', bg: '#999' },
  3: { status: 2, text: '自己', describe: '自己', bg: '#999' },
  4: { status: 4, text: '回关', describe: '被关注', bg: '#FD9A00' }
}
const currListConfig = computed(() => {
  return listConfig.get(props.listType) ?? listConfig.get('friend')
})

let loading = ref(false);
let isFinished = ref(false);
let pageNum = ref(0);
let list = ref([]);
let total = ref(0);

const onLoad = async () => {
  try {
    if (loading.value || isFinished.value) return;
    loading.value = true
    pageNum.value += 1;

    const res = await request(`${currListConfig.value.apiUrl}`, {
      query: {
        pageNum: pageNum.value,
      },
    });
    await handleResponse(res)
    const {dataList, totalCount} = res.data
    // console.log(dataList, totalCount, 'total==??', props.listType)
    const _list = dataList.map((o) => ({
      ...o,
      avatar: o.attentionIdDictMap.avatar,
      nickName: o.attentionIdDictMap?.name ?? '',
      fansNumText: formatNumber(o.fansNum || 0),
      saveLoading: false
    }))

    list.value.push(..._list);
    total.value = totalCount;
    isFinished.value = list.value.length >= total.value;
  } catch (e) {

  } finally {
    loading.value = false
  }
}
const handleFollow = async (item) => {
  let currIndex = list.value.findIndex((o) => o.id === item.id)
  if(currIndex < 0) return
  try {
    if (list.value[currIndex].saveLoading) return
    list.value[currIndex].saveLoading = true;
    const {data} = await request(`/website/tourism/fans/saveConcern`, {
      method: 'post',
      body: {
        attentionId: item.attentionId
      }
    });
    if(!data) return
    list.value[currIndex].fansStatus = data.fansStatus;
    showSuccessToast('操作成功')
  } catch (e) {
    showToast('操作失败')
  } finally {
    list.value[currIndex].saveLoading = false;
  }
}

onLoad()
</script>
<style scoped lang="scss">
.follow-item {
  .follow-item__button {
    min-width: 60px;
    padding: 0 16px;
    height: 26px;
    border-radius: 100px;
    text-align: center;
    font-size: 14px;
  }
}
</style>