<script lang="ts" setup>
import { ref } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';

// 当前选中的tab
const activeTab = ref('comment');
//评论模拟数据
const comments = ref([
  {
    name: '张三',
    content:
      '干的不错!12问题解决的很迅速干的不错问题解决的很迅速!干的不错，问题解决的很迅速!干的不错，问题解决的很迅速!',
    time: '一天前',
    child: [
      {
        name: '张三',
        content: '谢谢站长支持！',
      },
    ],
  },
  {
    name: '李四',
    content:
      '干的不错!12问题解决的很迅速干的不错问题解决的很迅速!干的不错，问题解决的很迅速!干的不错，问题解决的很迅速!',
    time: '三天前',
  },
  {
    name: '王五',
  },
]);

const replyOpen = ref({}) as any;
const toggleReply = (index: any) => {
  replyOpen.value[index] = !replyOpen.value[index];
};
// 查阅统计数据
const consultStats = ref({
  readCount: 2,
  unreadCount: 1,
  readers: ['东冬', '世鹏'],
  unreaders: ['张三'],
});

// 处理tab切换
const handleTabChange = (tab: string) => {
  activeTab.value = tab;
};

// 获取名字的最后两个字
const getLastTwoChars = (name: string) => {
  return name.slice(-2);
};
</script>

<template>
  <div class="consult-container">
    <!-- Tabs切换 -->
    <ElTabs v-model="activeTab" @tab-change="handleTabChange" class="mb-4">
      <ElTabPane :label="'评论'" name="comment" />
      <ElTabPane :label="`${consultStats.readCount}人已阅`" name="read" />
      <ElTabPane :label="`${consultStats.unreadCount}人未阅`" name="unread" />
    </ElTabs>

    <!-- 人员列表 -->
    <div v-if="activeTab === 'comment'" class="readers-list">
      <div v-for="(item, index) in comments" :key="index" class="comment_item">
        <div class="reader-item mb-2 mr-2" style="flex-shrink: 0">
          {{ getLastTwoChars(item.name) }}
        </div>
        <div class="comment_content">
          <span style="font-size: 15px; font-weight: 900">{{ item.name }}</span>
          <div>{{ item.content }}</div>
          <div>
            <span style="color: #a4aab2">{{ item.time }}</span>
            <span class="reply_btn" @click="toggleReply(index)">回复</span>
          </div>
          <div
            v-if="item.child && item.child.length > 0"
            style="
              margin-left: 16px;
              margin-top: 8px;
              border-left: 2px solid #dcdfe6;
              padding-left: 8px;
            "
          >
            <div v-for="value in item.child">
              <div>
                <span>{{ value?.name }}：</span>
                <span>{{ value?.content }}</span>
              </div>
            </div>
          </div>
          <div
            style="margin-left: 16px; margin-top: 8px"
            v-if="replyOpen[index]"
          >
            <el-input
              maxlength="200"
              style="width: 240px"
              placeholder="请输入内容"
              show-word-limit
              type="textarea"
            />
            <div style="margin-top: 8px">
              <el-button type="primary" size="small">提交</el-button>
              <el-button size="small" @click="() => toggleReply(index)"
                >收起</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="activeTab === 'read'" class="readers-list">
      <div
        v-for="(reader, index) in consultStats.readers"
        :key="index"
        class="reader-item mb-2 mr-2"
      >
        {{ getLastTwoChars(reader) }}
      </div>
    </div>

    <div v-else class="readers-list">
      <div
        v-for="(unreader, index) in consultStats.unreaders"
        :key="index"
        class="reader-item unread mb-2 mr-2"
      >
        {{ getLastTwoChars(unreader) }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment_item {
  display: flex;
  // align-items: center;
  // justify-content: space-between;
  width: 100%;
  // padding: 8px 16px;
  border-radius: 4px;
  // background-color: #f5f7fa;
  margin-bottom: 8px;
  font-size: 12px;
  color: #606266;

  .comment_content {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    .reply_btn {
      float: right;
      color: #409eff;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.consult-container {
  width: 100%;
  padding: 16px 0;
  font-size: 14px;

  .readers-list {
    display: flex;
    flex-wrap: wrap;
  }

  .reader-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #409eff;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background-color: #66b1ff;
      transform: scale(1.1);
    }

    &.unread {
      background-color: #dcdfe6;
      color: #606266;

      &:hover {
        background-color: #e4e7ed;
      }
    }
  }
}
</style>
