<script setup lang="ts">
import {
  Button as VanButton,
  Col as VanCol,
  Divider as VanDivider,
  List as VanList,
  Row as VanRow,
  SwipeCell as VanSwipeCell,
  Tab as VanTab,
  Tabs as VanTabs,
} from 'vant/es'
import { ref } from 'vue'

const active = ref(0)
const list = ref([])
const loading = ref(false)
const finished = ref(false)

function onLoad() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++)
      list.value.push(list.value.length + 1)

    // 加载状态结束
    loading.value = false

    // 数据全部加载完成
    if (list.value.length >= 20)
      finished.value = true
  }, 500)
}
</script>

<template>
  <main class="chat_main h-full w-full">
    <div class="header">
      <VanRow class="header_row" justify="space-between">
        <VanCol class="header_title_col">
          <p>消息</p>
        </VanCol>
        <VanCol>
          <van-icon class="header_search_icon" name="search" />
        </VanCol>
      </VanRow>
    </div>
    <div class="content">
      <VanTabs v-model:active="active">
        <VanDivider />
        <VanTab title="消息">
          <VanList
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <VanSwipeCell v-for="item in list" :key="item" :title="item">
              <div class="message_card">
                <VanRow :gutter="12" class="message_row">
                  <VanCol>
                    <img alt="header_img" class="header_img" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">
                  </VanCol>
                  <VanCol class="message_card_col">
                    <div class="message_card_main">
                      <VanRow justify="space-between">
                        <VanCol>
                          <p class="message_sender_name">
                            测试人
                          </p>
                        </VanCol>
                        <VanCol>
                          <span class="message_sender_time">18分钟前</span>
                        </VanCol>
                      </VanRow>
                      <p class="message_content">
                        <span>轻舟已过万重山</span>
                      </p>
                    </div>
                    <VanDivider class="content_divider" />
                  </VanCol>
                </VanRow>
              </div>
              <template #right>
                <VanButton square text="删除" type="danger" class="delete-button" />
              </template>
            </VanSwipeCell>
          </VanList>
        </VanTab>
        <VanTab title="同事">
          内容 1
        </VanTab>
        <VanTab title="部门">
          内容 1
        </VanTab>
      </VanTabs>
    </div>
  </main>
</template>

<style scoped lang="less">
.chat_main {
  padding: var(--base-interval-1);
  .header {
    p {
      margin: 0;
      font-size: 24px;
      font-weight: bold;
    }
    .header_row {
      align-items: center;
      .header_title_col {
        flex-grow: 1;
      }
      .header_search_icon {
        font-size: 26px;
      }
    }
  }
  .content {
    .message_card {
      .message_row {
        .header_img {
          width: 40px;
          height: 40px;
          border-radius: 5px;
          vertical-align: middle;
        }
        .message_card_col {
          flex-grow: 1;
          .message_sender_name {
            margin: 0 0 3px;
            font-size: 16px;
            font-weight: bold;
          }
          .message_sender_time {
            font-size: 12px;
            color: #999;
          }
          .message_content {
            margin: 0;
            font-size: 12px;
            color: #666;
          }
        }
      }
      .content_divider {
        margin: 12px 0;
      }
    }
  }
}
</style>
