<template>
    <view class="bg-gray-100 min-h-[100vh] consultation-list" :style="themeColor()">
        <!-- #ifdef MP-WEIXIN -->
        <top-tabbar :data="topTabbarData" scrollBool="1" :isBack="false"/>
        <!-- #endif -->
        <view class="pt-[var(--top-m)] px-[30rpx]">
            <view 
                v-for="(item, index) in list" 
                :key="index" 
                class="bg-white rounded-[20rpx] p-[30rpx] mb-[20rpx] shadow-sm"
                @click.stop="toDetail(item)"
            >
                <view class="text-[28rpx] font-bold text-[#333] mb-[16rpx] line-clamp-2">
                    {{ item.announcementTitle }}
                </view>
                <view class="flex items-center text-[24rpx] text-[#999]">
                    <text class="nc-iconfont nc-icon-riliV6xx1 mr-[10rpx]"></text>
                    <text>{{ formatDate(item.createTime) }}</text>
                    <view class="ml-auto flex items-center">
                        <text class="nc-iconfont nc-icon-liulanV6xx1 mr-[8rpx]"></text>
                        <text>{{ item.viewCount }}次浏览</text>
                    </view>
                </view>
            </view>
            <mescroll-empty 
                v-if="!list.length && !loading" 
                :option="{tip: '暂无咨询', icon: img('addon/shop_giftcard/empty.png')}"
            ></mescroll-empty>
        </view>
        <tabbar />
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { img, redirect } from '@/utils/common'
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getGiftCardPageList } from '@/addon/shop_giftcard/api/giftcard';


import { topTabar } from '@/utils/topTabbar';

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let topTabbarData = topTabarObj.setTopTabbarParam({ title: '资讯列表', topStatusBar: { textColor: '#333' }})
/********* 自定义头部 - end ***********/

const list = ref<Array<any>>([]);
const loading = ref<boolean>(true);


onLoad((option: any) => {
  fetchConsultationList();
});

onShow(() => {
})

const fetchConsultationList = () => {
  loading.value = true;
  getGiftCardPageList({}).then((res: any) => {
    list.value = res.data;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  })
}


const toDetail = (data: any) => {
  redirect({ url: '/addon/shop_giftcard/pages/detail', param: { id: data.id } })
}

const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr.replace(/-/g, '/'));
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

</script>

<style lang="scss" scoped>
.consultation-list {
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

:deep(.tab-bar-placeholder) {
  display: none !important;
}

:deep(.u-tabbar__placeholder) {
  display: none !important;
}
</style>
