<template>
  <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''"
    @load="onLoad">
    <div v-for="(item, key) in commentList" :key="key" class="comment">
      <div class="comment-wrapper">
        <van-row style="font-size: 0.9rem;">
          <van-col span="4">
            <van-image v-if="item.avatar" round width="3rem" height="3rem" :src="item.avatar" />
            <van-image v-else round width="3rem" height="3rem" :src="icon_avatar" />
          </van-col>
          <van-col span="15">
            <p>{{ item.name }}</p>
            <p>{{ item.kg_name }}</p>
          </van-col>
          <van-col span="5" style="text-align: right;">
            <p style="color: #333333; position: relative;" @click="deleteComment(item.id)">
              删除
              <span v-if="item.is_new" class="spot">·</span>
            </p>
            <p>{{ item.comment_time }}</p>
          </van-col>
        </van-row>
        <van-row>
          <van-col>
            <span style="color: #222222;">{{ item.c_action }}<span style="color: #0B3A72;">@{{ item.c_name }}</span>：{{
              item.note
              }}</span>
          </van-col>
        </van-row>
      </div>

      <div class="raw-ref" @click="goToVideoDetail(item)">
        <van-row>
          <van-col span="8" class="image">
            <van-image width="8rem" height="5rem" fit="cover" :src="item.cover" style="vertical-align: text-bottom;">
              <template #error>加载失败</template>
            </van-image>
            <!-- <div style="position: absolute; top: 2rem; left: 3rem;">
              <van-image width="2rem" height="2rem" :src="icon_player" style="vertical-align: text-bottom;"> </van-image>
            </div> -->
          </van-col>
          <van-col span="14" class="text">
            <p style="font-size: 1.15rem;">{{ item.perf_name }}</p>
            <p style="color: #999999;">{{ item.book_name }} ｜ {{ item.localism_type }}</p>
          </van-col>
        </van-row>
      </div>
    </div>
  </van-list>
  <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无留言" />
</template>

<script lang="ts" setup>
// import { mainStore } from '@/store'
import { no_image, icon_avatar } from '@/utils/generateIcons.js'
import { onActivated } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import _ from 'lodash'
import { Toast, Dialog } from 'vant';
// import { addPages } from '@/hooks/useKeepAlive'
import goToVideoDetail from '@/router/methods/videoDetail'
import { delCommentAPI } from '@/api/C/me'
import { myCommentTimeAPI } from '@/api/C/perf'
import { useMessageList } from '@/composables';

const { onLoad, commentList, loading, finished, finishedTextStatus, emptyStatus, } = useMessageList();

onBeforeRouteLeave(async () => {
  // 更新留言阅读情况
  await myCommentTimeAPI({ optr_type: 'my_comment' });
})

const deleteComment = (id: string) => { // 删除评论
  Dialog.confirm({
    title: '温馨提示',
    message: '是否确认删除该评论？',
    confirmButtonColor: '#713610'
  })
    .then(async () => {
      const result = await delCommentAPI({ comment_id: id });
      if (result) {
        // 移除当前选中评论，避免刷新页面
        _.remove(commentList.value, comment => comment.id === id);
        Toast.success('删除成功');
        if (!commentList.value.length) {
          onLoad()
        }
      }
    })
    .catch(() => {
      // on cancel
    });
}

/****************** keepAlive 模块 *******************/

// TAG: keepAlive 缓存页面
// addPages()

onActivated(() => { // keepAlive 重置后执行回调
});

/*********************************************************/
</script>

<style lang="less" scoped>
.comment-wrapper {
  color: #999999;
  padding: 1rem;
  line-height: 1.75;
  .reply-wrapper {
    background: #F7F7F7;
    border-radius: 10px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    color: #0B3A72;

    .content {
      color: #222222;
    }
  }
  .spot {
    color: red;
    font-size: 2rem;
    position: absolute;
    right: -0.5rem;
    top: -1.75rem;
  }
}

.raw-ref {
  padding: 1rem;
  background-color: #F7F7F7;

  .image {
    position: relative;
  }

  .text {
    line-height: 2;
    margin-left: 1rem;
  }
}
</style>