import {Component} from '@angular/core';
import {formatDistance} from 'date-fns';

@Component({
  selector: 'app-experience-square-information',
  templateUrl: './experience-square-information.component.html',
  styleUrls: ['./experience-square-information.component.scss']
})
export class ExperienceSquareInformationComponent {
//  头像
  avatarSrc: string | undefined = "assets/images/page-mine/myAvatar.png";
  ngSize: number | null = null;
  //分享框弹出
  isVisible = false;

  constructor() {
  }

  showModal(): void {
    this.isVisible = true;
  }

  handleOk(): void {
    console.log('Button ok clicked!');
    this.isVisible = false;
  }

  handleCancel(): void {
    console.log('Button cancel clicked!');
    this.isVisible = false;
  }

  //点赞等逻辑
  likeActive = false;
  dislikeActive = false;

  toggleLike() {
    this.likeActive = !this.likeActive;
    if (this.likeActive) {
      this.dislikeActive = false;
    }
  }

  toggleDislike() {
    this.dislikeActive = !this.dislikeActive;
    if (this.dislikeActive) {
      this.likeActive = false;
    }
  }

  //留言框
  messageContent = '';

  uploadImage() {
    // 处理上传图片逻辑
  }

  sendEmoji() {
    // 处理发送表情逻辑
  }

  handleKeyDown(event: KeyboardEvent) {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault();
      // 处理发送逻辑
    }
  }

  sendMessage() {
    // 处理发送逻辑
  }

  //评论条数
  commentCount: string = '345' + '条';
  //评论列表数据
  data = [
    {
      author: 'User1',
      avatar: 'path/to/avatar1.jpg',
      content: 'This is the first comment.',
      likes: 10,
      dislikes: 5,
      isParent: true,
      children: [
        {
          author: 'User2',
          avatar: 'path/to/avatar2.jpg',
          content: 'This is a nested comment.',
          likes: 5,
          dislikes: 2,
          expanded: false,
        }
      ],
      // 添加一个属性来记录子评论的显示状态，默认为false
    }
  ];
  //评论点赞
  likes = 0;
  dislikes = 0;
  time = formatDistance(new Date(), new Date());

  like(): void {
    this.likes = 1;
    this.dislikes = 0;
  }

  dislike(): void {
    this.likes = 0;
    this.dislikes = 1;
  }

  //评论子集打开
  toggleExpand(comment: any) {
    console.log(comment)
    if (comment.children.expanded) {
      comment.children.expanded = !comment.children.expanded;
    } else {
      comment.children.expanded = !comment.children.expanded;
    }
  }

  //右侧卡片
  gridStyle = {
    width: '100%',
    textAlign: 'center'
  };
}
