<template>
  <FromBottomDialog
    :page-id="pageId"
    :model-value="modelValue"
    :show-heng-gang="false"
    mask-mode="light"
    :height="height"
    tag="comment"
    mode="white"
    @update:model-value="(e) => emit('update:modelValue', e)"
    @cancel="cancel"
  >
    <template #header>
      <div class="title">
        <div class="num">{{ _formatNumber(comments.length) }}条评论</div>
        <div class="right">
          <Icon icon="ic:round-close" class="close-btn" @click.stop="cancel" />
        </div>
      </div>
    </template>

    <div class="comment">
      <div v-if="loading" class="loading-tip">加载中...</div>
      <div v-else-if="comments.length" class="wrapper">
        <div class="items">
          <div v-for="(item, i) in comments" :key="item.comment_id || i" class="item">
            <div class="main">
              <div class="content">
                <img :src="_checkImgUrl(item.avatar)" alt="" class="head-image" />
                <div class="comment-container">
                  <div class="name">{{ item.nickname }}</div>
                  <div class="detail" :class="{ gray: item.user_buried }">
                    {{ item.user_buried ? '该评论已折叠' : item.content }}
                  </div>
                  <div class="time-wrapper">
                    <div class="left">
                      <div class="time">
                        {{ _time(item.create_time)
                        }}{{ item.ip_location ? ` · ${item.ip_location}` : '' }}
                      </div>
                      <div class="reply-text">回复</div>
                    </div>
                    <div class="right-actions">
                      <div class="love" :class="{ loved: item.user_digged }" @click="loved(item)">
                        <Icon
                          v-show="item.user_digged"
                          icon="icon-park-solid:like"
                          class="love-image"
                        />
                        <Icon
                          v-show="!item.user_digged"
                          icon="icon-park-outline:like"
                          class="love-image"
                        />
                        <span v-if="item.digg_count">{{ _formatNumber(item.digg_count) }}</span>
                      </div>
                      <div class="love" @click="item.user_buried = !item.user_buried">
                        <Icon
                          v-if="item.user_buried"
                          icon="icon-park-solid:dislike-two"
                          class="love-image"
                        />
                        <Icon v-else icon="icon-park-outline:dislike" class="love-image" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.sub_comment_count" class="replies">
              <template v-if="item.showChildren">
                <div v-for="(child, ci) in item.children" :key="ci" class="reply">
                  <div class="content">
                    <img :src="_checkImgUrl(child.avatar)" alt="" class="head-image small" />
                    <div class="comment-container">
                      <div class="name">{{ child.nickname }}</div>
                      <div class="detail">{{ child.content }}</div>
                      <div class="time-wrapper">
                        <div class="left">
                          <div class="time">
                            {{ _time(child.create_time)
                            }}{{ child.ip_location ? ` · ${child.ip_location}` : '' }}
                          </div>
                          <div class="reply-text">回复</div>
                        </div>
                        <div
                          class="love"
                          :class="{ loved: child.user_digged }"
                          @click="loved(child)"
                        >
                          <Icon
                            v-show="child.user_digged"
                            icon="icon-park-solid:like"
                            class="love-image"
                          />
                          <Icon
                            v-show="!child.user_digged"
                            icon="icon-park-outline:like"
                            class="love-image"
                          />
                          <span>{{ _formatNumber(child.digg_count) }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <div v-if="loadChildren && loadChildrenItemCId === item.comment_id" class="more">
                加载中...
              </div>
              <div v-else class="more" @click="handShowChildren(item)">
                <div class="gang" />
                <span>展开{{ item.showChildren ? '更多' : `${item.sub_comment_count}条` }}回复</span>
                <Icon icon="ep:arrow-down-bold" />
              </div>
            </div>
          </div>
        </div>
        <p class="no-more">暂时没有更多了</p>
      </div>
      <p v-else class="empty">暂无评论</p>

      <div class="input-toolbar">
        <div class="toolbar">
          <div class="input-wrapper">
            <input
              v-model="commentText"
              class="comment-input"
              type="text"
              placeholder="善语结善缘，恶言伤人心"
            />
            <Icon icon="mdi:emoticon-outline" class="emoji-icon" @click="_no" />
          </div>
          <Icon
            v-if="commentText"
            icon="mdi:arrow-up-circle"
            class="send-btn"
            @click="send"
          />
        </div>
      </div>
    </div>
  </FromBottomDialog>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref, watch } from 'vue'
import FromBottomDialog from '@/components/dialog/FromBottomDialog.vue'
import {
  _checkImgUrl,
  _formatNumber,
  _no,
  _sleep,
  _time,
  sampleSize,
} from '@/utils'
import { fetchVideoComments, type VideoCommentItem } from '@/mock/homeData'

const props = defineProps({
  pageId: { type: String, default: 'home-index' },
  videoId: { type: String, default: '' },
  modelValue: { type: Boolean, default: false },
  height: { type: String, default: 'calc(var(--vh, 1vh) * 70)' },
})

const emit = defineEmits<{ 'update:modelValue': [boolean]; close: [] }>()

const comments = ref<VideoCommentItem[]>([])
const commentText = ref('')
const loading = ref(false)
const loadChildren = ref(false)
const loadChildrenItemCId = ref('')

function cancel() {
  emit('update:modelValue', false)
  emit('close')
}

async function getData() {
  loading.value = true
  const res = await fetchVideoComments(props.videoId)
  loading.value = false
  if (res.success) {
    comments.value = res.data
  } else {
    comments.value = []
  }
}

function loved(row: VideoCommentItem) {
  if (row.user_digged) {
    row.digg_count--
  } else {
    row.digg_count++
  }
  row.user_digged = !row.user_digged
}

async function handShowChildren(item: VideoCommentItem) {
  loadChildrenItemCId.value = item.comment_id
  loadChildren.value = true
  await _sleep(500)
  loadChildren.value = false
  if (item.showChildren) {
    item.children = (item.children || []).concat(sampleSize(comments.value, 3))
  } else {
    item.children = sampleSize(comments.value, 3)
    item.showChildren = true
  }
}

function send() {
  if (!commentText.value.trim()) return
  comments.value.unshift({
    comment_id: `local-${Date.now()}`,
    create_time: Math.floor(Date.now() / 1000),
    ip_location: '本地',
    content: commentText.value,
    user_buried: false,
    user_digged: false,
    digg_count: 0,
    nickname: '我',
    avatar: _checkImgUrl(''),
    sub_comment_count: 0,
    showChildren: false,
    children: [],
  })
  commentText.value = ''
}

watch(
  () => props.modelValue,
  (visible) => {
    if (visible) getData()
    else comments.value = []
  },
)
</script>

<style scoped lang="less">
.title {
  box-sizing: border-box;
  width: 100%;
  height: 40rem;
  padding: 0 15rem;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 10rem 10rem 0 0;

  .num {
    font-size: 12rem;
    font-weight: bold;
    text-align: center;
    color: #000;
  }

  .right {
    position: absolute;
    right: 15rem;
    z-index: 9;

    .close-btn {
      color: #000;
      background: rgb(242, 242, 242);
      padding: 4rem;
      font-size: 16rem;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}

.comment {
  color: #000;
  width: 100%;
  background: #fff;
  min-height: 100%;
  position: relative;

  .loading-tip,
  .empty {
    padding: 40rem;
    text-align: center;
    color: #999;
    font-size: 14rem;
  }

  .wrapper {
    width: 100%;
    padding-bottom: 60rem;
  }

  .no-more {
    text-align: center;
    font-size: 12rem;
    color: #ccc;
    padding: 16rem 0 8rem;
  }

  .items {
    width: 100%;

    .item {
      width: 100%;
      margin-bottom: 15rem;

      .main {
        width: 100%;
        padding: 5rem 0;
        display: flex;
      }

      .replies {
        padding-left: 55rem;

        .reply {
          padding: 5rem 0 5rem 5rem;
          display: flex;
        }

        .more {
          font-size: 13rem;
          margin: 5rem;
          display: flex;
          align-items: center;
          color: gray;
          cursor: pointer;

          .gang {
            background: #d5d5d5;
            width: 20rem;
            margin-right: 10rem;
            height: 1px;
          }

          span {
            margin-right: 5rem;
          }

          svg {
            font-size: 10rem;
          }
        }
      }

      .content {
        width: 100%;
        display: flex;
        font-size: 14rem;

        .head-image {
          margin-left: 15rem;
          margin-right: 10rem;
          width: 37rem;
          height: 37rem;
          border-radius: 50%;
          object-fit: cover;
          flex-shrink: 0;

          &.small {
            width: 20rem;
            height: 20rem;
          }
        }

        .comment-container {
          flex: 1;
          margin-right: 20rem;

          .name {
            color: var(--second-text-color);
            margin-bottom: 5rem;
          }

          .detail {
            margin-bottom: 5rem;
            line-height: 1.4;

            &.gray {
              color: var(--second-text-color);
            }
          }

          .time-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13rem;

            .left {
              display: flex;
              align-items: center;

              .time {
                color: #c4c3c3;
                margin-right: 10rem;
              }

              .reply-text {
                color: var(--second-text-color);
              }
            }

            .right-actions {
              display: flex;
              gap: 10rem;
            }

            .love {
              color: gray;
              display: flex;
              align-items: center;
              cursor: pointer;

              &.loved {
                color: rgb(231, 58, 87);
              }

              .love-image {
                font-size: 17rem;
                margin-right: 4rem;
              }
            }
          }
        }
      }
    }
  }

  .input-toolbar {
    border-radius: 10rem 10rem 0 0;
    background: white;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 3;
    border-top: 1px solid #e2e1e1;

    .toolbar {
      display: flex;
      align-items: center;
      padding: 10rem 15rem;

      .input-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 5rem 10rem;
        background: #eee;
        border-radius: 20rem;

        .comment-input {
          flex: 1;
          border: none;
          background: transparent;
          outline: none;
          font-size: 14rem;
        }

        .emoji-icon {
          font-size: 22rem;
          color: #666;
          margin-left: 8rem;
          cursor: pointer;
        }
      }

      .send-btn {
        font-size: 28rem;
        color: #fe2c55;
        margin-left: 12rem;
        cursor: pointer;
      }
    }
  }
}
</style>
