<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 @click="deleteComment(item)" style="color: #333333;">删除</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="onClick(item)">
        <van-row>
          <van-col span="8" class="image">
            <van-image width="8rem" height="5rem" lazy-load :src="item.cover" style="vertical-align: text-bottom;">
              <template v-slot: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 setup>
import { mainStore } from '@/store'

import icon_player from '@images/bofang@2x.png'
import no_image from '@images/que-shuju@2x.png'
import icon_avatar from '@images/que-touxiang@2x.png'

import { ref, reactive, onMounted, onActivated } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import axios from '@/utils/axios';
import _ from 'lodash'
import { Toast, Dialog } from 'vant';
import { addPages, store } from '@/hooks/useKeepAlive'

const $route = useRoute();
const $router = useRouter();

// 我的留言接口联调
const loading = ref(false);
const finished = ref(false);
const commentList = ref([])
let limit = ref(10);
let offset = ref(0)

// 因为不能让空图标提前出来的写法
const finishedTextStatus = ref(false);
const emptyStatus = ref(false);

const onLoad = () => {
  axios.get('/srv/?a=my_comment', {
    params: {
      limit: limit.value, 
      offset: offset.value
    }
  })
  .then(res => {
    if (res.data.code === 1) {
      _.each(res.data.data, item => {
        let arr = _.split(item.target_name, '@'); // 分割评论的动作和姓名
        item.c_action = arr[0]; // 评论动作
        item.c_name = arr[1]; // 评论姓名
      })
      commentList.value = _.concat(commentList.value, res.data.data);
      commentList.value = _.uniqBy(commentList.value, 'id');
      offset.value = commentList.value.length;
      loading.value = false;
      // 数据全部加载完成
      if (!res.data.data.length) {
        // 加载状态结束
        finished.value = true;
      }
      if (!commentList.value.length) {
        finishedTextStatus.value = false;
        emptyStatus.value = true;
      }
    } else {
      console.warn(res);
      if (!res.data.show) return false;
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err); 
  })
}

const onClick = (item) => { // 跳转作品详情页
  $router.push({
    path: '/client/videoDetail',
    query: {
      prod_id: item.prod_id,
      perf_id: item.perf_id
    }
  });
}

const deleteComment = (item) => { // 删除评论
  Dialog.confirm({
    title: '温馨提示',
    message: '是否确认删除该评论？',
    confirmButtonColor: '#713610'
  })
    .then(() => {
      axios.post('/srv/?a=del_comment', {
        comment_id: item.id
      })
      .then(res => {
        if (res.data.code === 1) {
          // 移除当前选中评论，避免刷新页面
          _.remove(commentList.value, comment => comment.id === item.id);
          Toast.success('删除成功');
        } else {
          console.warn(res);
          if (!res.data.show) return false;
          Toast({
            icon: 'close',
            message: res.data.msg
          });
        }
      })
      .catch(err => {
        console.error(err); 
      });
    })
    .catch(() => {
      // on cancel
    });
}

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

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

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

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

<script>
import mixin from 'common/mixin';

export default {
  name: 'message',
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</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;
    }
  }
}
.raw-ref {
  padding: 1rem; 
  background-color: #F7F7F7;
  .image {
    position: relative;
  }
  .text {
    line-height: 2; 
    margin-left: 1rem;
  }
}
</style>