<template>
  <u-sticky bgColor="#06b9d3" zIndex="999999999999999999999999">
    <u-navbar title="我的评论" :autoBack="true" bgColor="#06b9d3" safeAreaInsetTop :titleStyle="{ color: '#fff' }" leftIconColor="#fff"></u-navbar>
    <u-tabs :list="list1" @click="clickTabsItemHandler" lineColor="#fff" lineWidt="18" lineHeight="3" :scrollable="false" :activeStyle="{ fontSize: '34rpx', color: '#fff', fontWeight: 700 }" :inactiveStyle="{ fontSize: '34rpx', color: '#fff' }"></u-tabs>
  </u-sticky>
  <image src="/static/images/commentBg.png" class="mineCom-bg" mode="aspectFill" />

  <view class="mineCom Zindex">
    <template v-if="pageList.records.length">
      <view class="mineCom-item" v-for="_ in pageList?.records" :key="_.id">
        <view class="" style="margin-bottom: 50rpx">
          <view class="flexA">
            <view>
              <image :src="_?.user?.avatar ? proxy.$h.downFile(_?.user?.avatar) : '/static/images/commentBg.png'" class="mineCom-avatar" mode="aspectFill" />
            </view>
            <view>
              <view class="flexA">
                <view class="mineCom-username">{{ _?.user?.nickname }}</view>
                <view class="mineCom-toptag" v-if="_?.consultationWay">{{ proxy.$h.optObjectValue('consultationWay', _?.consultationWay) }}</view>
              </view>
              <view class="mineCom-time">{{ _?.time }}</view>
            </view>
          </view>
        </view>

        <view class="flexA" style="margin-bottom: 16rpx">
          <view class="mineCom-text">评分：</view>
          <view style="margin-right: 6rpx; color: #ffc525; font-size: 26rpx">{{ _?.star }}分</view>
          <u-rate :count="5" v-model="_.star" allowHalf activeColor="#ffc525" readonly></u-rate>
        </view>
        <view class="mineCom-text">评价：{{ _?.content }}</view>
        <!-- 未回复 -->
        <template v-if="_.isReply == 0">
          <u-line margin="30rpx 0"></u-line>
          <view class="flexD" style="width: 100%">
            <view style="width: 170rpx">
              <up-button color="#05B8D2" shape="circle" text="回复" throttleTime="1500" @click="proxy.$h.jumpUrl(`/pages2/message/reply?id=${_?.id}&detailData=${JSON.stringify(_)}`)"></up-button>
            </view>
          </view>
        </template>
        <!-- 已回复 -->
        <template v-if="_.isReply == 1">
          <view class="mineCom-grayBg" style="margin-top: 30rpx">
            <view class="flexJ" style="margin-bottom: 14rpx">
              <view class="mineCom-time">回复:</view>
              <view class="mineCom-time">{{ _?.replyTime }}</view>
            </view>
            <view class="mineCom-text">{{ _?.replyContent }}</view>
          </view>
        </template>
      </view>
      <view class="mineCom-empty flexC">已加载全部</view>
    </template>
    <!-- 列表为空 -->
    <template v-else>
      <view class="flexCCol" style="margin-top: 170rpx">
        <image src="/static/images/commentEmpty.png" class="mineCom-emptyImg" mode="aspectFill" />
        <view class="mineCom-time">没有更多数据</view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onShow, onReachBottom } from '@dcloudio/uni-app'
import { getComment_list } from '../../api'
import { MessageListParamsType, PageListType, CommentListItemType } from '../../types'

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const list1 = [{ name: '待回复' }, { name: '已回复' }]

const pageList = ref<PageListType<CommentListItemType>>({ records: [] })

const params = ref<MessageListParamsType>({
  type: 1,
  pageNo: 0
})

const clickTabsItemHandler = e => {
  params.value.type = e.index + 1
  getListHandler(true)
}

const getListHandler = async (refresh: boolean) => {
  refresh ? ((params.value.pageNo = 1), pageList.value.records.splice(0)) : params.value.pageNo++

  const { result }: { result: PageListType<CommentListItemType> } = await getComment_list(params.value)

  if (!result.records.length) return

  result.records.map(_ => pageList.value?.records.push(_))
}

onShow(() => getListHandler(true))

onReachBottom(() => getListHandler(false))
</script>

<style>
page {
  background: #f7f8fa !important;
}
</style>

<style lang="scss" scoped>
.mineCom-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 396rpx;
}
.mineCom {
  box-sizing: border-box;
  padding: 112rpx 24rpx 0;
  &-emptyImg {
    width: 216rpx;
    height: 216rpx;
    margin-bottom: 50rpx;
  }
  &-grayBg {
    box-sizing: border-box;
    padding: 32rpx;
    border-radius: 24rpx;
    background: #f8f8fa;
  }
  &-text {
    color: #323233;
    font-size: 26rpx;
  }
  &-item {
    box-sizing: border-box;
    padding: 28rpx 24rpx;
    background: #fff;
    border-radius: 24rpx;
    margin-bottom: 22rpx;
  }
  &-avatar {
    width: 92rpx;
    height: 92rpx;
    min-width: 92rpx;
    min-height: 92rpx;
    border-radius: 50%;
  }
  &-username {
    margin: 0 16rpx;
    color: #323233;
    font-size: 30rpx;
    font-weight: 700;
  }
  &-time {
    color: #999999;
    font-size: 26rpx;
    margin-left: 16rpx;
    margin-top: 8rpx;
  }
  &-toptag {
    color: #05b8d2;
    font-size: 22rpx;
    font-weight: 700;
    box-sizing: border-box;
    padding: 2rpx 10rpx;
    border: 1rpx solid #05b8d2;
    border-radius: 8rpx;
  }
  &-empty {
    margin: 36rpx auto 0;
    color: #999999;
    font-size: 26rpx;
  }
}
</style>