import { getTopicDetail, SetTopTopic, closeTopic, topicStatement, getCommentList, commentStatement } from '../../../../api/clerkOnline'
Page({
  data: {
    detailObj: {},
    remarkObj: { // 评论列表
      statementNum: 0,
      commentsList: []
    },
    pageIndex: 1,
    pageSize: 10,
    remarkType: 'new', // 评论 最新最热类型
    topicId: '',
    topList: [],
    manageFlag: '',//管理员标识：0否，1是
    TopFlag: '',//置顶标识：0否，1是 只有管理员有置顶的权限
    topType: '',//操作类型：1，置顶，2取消
    selfPublishFlag: '',//发布者标识：0否，1是
    attitude: '',//表态 0赞；1踩
    userLike: '',//用户是否赞过：0否，1是
    userDislike: '',//用户是否踩过：0否，1是
    likesTotal: '',
    opposeLTotal: '',
    orderType: '0',   //排序方式 0: 获取最新列表，1: 获取最热列表
    commentList: [],//评论列表
    commentUserLike: '',
    commentUserDislike: "",
    commentUlikesTotal: '',
    commentUopposeLTotal: '',
    commentAttitude: '',
    commentId: '',
    commentIndex: 0,
    loadVisible: false,
    loadType: 'more',
    isShowDetailContent: false,
    isShowDetailRemark: false,
    commentListLength: 0,
    isShow: false,
    iscommentStatement: false,
    remarkTypeLoading:false,
    isBackOpenTopic:true,//true刷新 false不刷新
  },
  async onShow(){
    this.setData({
      isBackOpenTopic:wx.getStorageSync('isBackOpenTopic')
    })
    if(!this.data.isBackOpenTopic){return}
    this.setData({
      // loadVisible: false,
      isShowDetailContent: false,
      isShowDetailRemark: false,
      topicId: wx.getStorageSync('topicId'),
      isShow:false,
      loadVisible: true,
      loadType:'more',
      remarkTypeLoading:true
    })
    await this.getTopicDetail()
    await this.getCommentList()
    this.setData({
      // loadVisible: false,
      isShowDetailContent: true,
      isShowDetailRemark: true,
      remarkTypeLoading:false
    })
  },
  onHide(){
    console.log('hide')
  },
  onLoad(options) {
    wx.setStorageSync('topicId',options.id)
    console.log('onLoad')
  },
  /*******************点赞踩start************************/
  async supportIssueOrProject() {
    if (this.data.userLike == '0' && this.data.userDislike == '0') {
      // 用户未赞过未踩过
      this.setData({
        attitude: "0",
      })
      let obj = {
        topicId: this.data.topicId,
        attitude: this.data.attitude
      }
      if (this.data.userLike == '0') {
        // 点赞
        this.setData({
          'topList.likesTotal': this.data.likesTotal += 1,
          'topList.userLike': '1',
          userLike: '1'
        })
      }
      let res: any = await topicStatement(obj)
      console.log('赞', res)
    } else if (this.data.userLike == '1' || this.data.userDislike == '1') {
      wx.showModal({
        title: '', //提示的标题,
        content: '已表达过态度，不可以更改哦！', //提示的内容,
        showCancel: false, //是否显示取消按钮,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#3CC51F', //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            console.log('用户点击确定')
          }
        }
      });
    }

  },
  async dispportIssueOrProject() {
    if (this.data.userLike == '0' && this.data.userDislike == '0') {
      // 用户未赞过未踩过
      this.setData({
        attitude: "1",
      })
      let obj = {
        topicId: this.data.topicId,
        attitude: this.data.attitude
      }
      if (this.data.userDislike == '0') {
        // 点赞
        this.setData({
          'topList.opposeLTotal': this.data.opposeLTotal += 1,
          'topList.userDislike': '1',
          userDislike: '1'
        })
      }
      let res: any = await topicStatement(obj)
      console.log('赞', res)
    } else if (this.data.userLike == '1' || this.data.userDislike == '1') {
      wx.showModal({
        title: '', //提示的标题,
        content: '已表达过态度，不可以更改哦！', //提示的内容,
        showCancel: false, //是否显示取消按钮,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#3CC51F', //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            console.log('用户点击确定')
          }
        }
      });
    }
  },
  debounceSupportRemark(e: any) {
    this.setData({
      commentId: e.detail.commentId
    })
    this.data.commentList.forEach((element: any, index: number) => {
      if (e.detail.commentId == element.commentId) {
        this.setData({
          commentUserLike: element.userLike,
          commentUserDislike: element.userDislike,
          // @ts-ignore
          commentUlikesTotal: parseInt(element.approveNum),
          commentUopposeLTotal: element.opposeNum,
          commentIndex: index
        })
      }
    })
    // 点击的时候
    if (this.data.commentUserLike == '0' && this.data.commentUserDislike == '0') {
      if (this.data.commentUserLike == '0') {
        // 用户未赞过未踩过
        this.setData({
          commentAttitude: '0',
        })
        console.log('commentAttitude', this.data.commentAttitude)
        // 点赞
        this.setData({
          [`commentList[${this.data.commentIndex}].approveNum`]: this.data.commentUlikesTotal += 1,
          [`commentList[${this.data.commentIndex}].userLike`]: '1',
          commentUserLike: '1'
        })
      }
      this.commentStatement()
    } else if (this.data.commentUserLike == '1' || this.data.commentUserDislike == '1') {
      wx.showModal({
        title: '', //提示的标题,
        content: '已表达过态度，不可以更改哦！', //提示的内容,
        showCancel: false, //是否显示取消按钮,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#3CC51F', //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            console.log('用户点击确定')
          }
        }
      });
    }
  },
  debounceDispportRemark(e: any) {
    this.setData({
      commentId: e.detail.commentId
    })
    this.data.commentList.forEach((element: any, index: number) => {
      if (e.detail.commentId == element.commentId) {
        this.setData({
          commentUserLike: element.userLike,
          commentUserDislike: element.userDislike,
          // @ts-ignore
          commentUlikesTotal: parseInt(element.approveNum),
          // @ts-ignore
          commentUopposeLTotal: parseInt(element.opposeNum),
          commentIndex: index
        })
      }
    })
    // 点击的时候
    if (this.data.commentUserLike == '0' && this.data.commentUserDislike == '0') {
      // 用户未赞过未踩过
      this.setData({
        commentAttitude: "1",
      })
      if (this.data.commentUserDislike == '0') {
        // 点踩
        this.setData({
          [`commentList[${this.data.commentIndex}].opposeNum`]: this.data.commentUopposeLTotal += 1,
          [`commentList[${this.data.commentIndex}].userDislike`]: '1',
          commentUserDislike: '1'
        })
      }
      this.commentStatement()
    } else if (this.data.commentUserLike == '1' || this.data.commentUserDislike == '1') {
      wx.showModal({
        title: '', //提示的标题,
        content: '已表达过态度，不可以更改哦！', //提示的内容,
        showCancel: false, //是否显示取消按钮,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#3CC51F', //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            console.log('用户点击确定')
          }
        }
      });
    }
  },
  /*******************点赞踩end************************/
  // 最新最热 评论列表切换
  async changeRemarkType(e: any) {
    if (this.data.iscommentStatement) {
      return wx.showModal({
        title: '', //提示的标题,
        content: '表态正在生成,请稍等切换', //提示的内容,
        showCancel: false, //是否显示取消按钮,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#3CC51F', //确定按钮的文字颜色,
      });
    }
    // this.setData({
    //   remarkType: e.detail.type,
    // })
    this.setData({
      remarkType: e.detail.type,
      isShow: false,
      loadVisible: true,
      loadType: 'more',
      remarkTypeLoading:true,
    })
    if (e.detail.type == "hot") {
      this.setData({
        commentList: [],
        pageIndex: 1,
        orderType: '1',
      })
      await this.getCommentList()
      this.setData({
        remarkTypeLoading:false
      })
    } else if (e.detail.type == "new") {
      this.setData({
        commentList: [],
        pageIndex: 1,
        orderType: '0',
      })
      await this.getCommentList()
      this.setData({
        remarkTypeLoading:false
      })
    }
    
  },
  /***********************关闭,置顶 **************************/
  closeContent() {
    wx.showModal({
      title: '确认要将本条内容关闭吗？', //提示的标题,
      content: '关闭后，在群内不显示话题内容,管理后台保留数据，可以查看', //提示的内容,
      showCancel: true, //是否显示取消按钮,
      cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
      cancelColor: '#000000', //取消按钮的文字颜色,
      confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
      confirmColor: '#04BCA0', //确定按钮的文字颜色,
      success: res => {
        if (res.confirm) {
          this.closeTopic()
          wx.showToast({
            title: '关闭话题成功', //提示的内容,
            icon: 'success', //图标,
            duration: 2000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
          wx.setStorageSync('isBackOpen', false)
          wx.navigateTo({ url: '/subpages/clerkOnline/pages/myGroup/myGroup' });
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    });
  },
  fixedTop() {
    if (this.data.TopFlag == '1') {
      this.setData({
        topType: '2'
      })
      wx.showModal({
        title: '确认要将本条内容取消置顶吗？', //提示的标题,
        content: '取消置顶后，话题会按照发布时间排序需要在群内滑动查找内容', //提示的内容
        showCancel: true, //是否显示取消按钮,
        cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: '#000000', //取消按钮的文字颜色,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#04BCA0', //确定按钮的文字颜色,
        success: async res => {
          if (res.confirm) {
            await this.SetTopTopic()
            wx.showToast({
              title: '取消置顶成功', //提示的内容,
              icon: 'success', //图标,
              duration: 2000, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
            this.setData({
              TopFlag: '0'
            })
            wx.setStorageSync('isBackOpen', false)
            // wx.navigateTo({ url: '/subpages/clerkOnline/pages/myGroup/myGroup' });
          } else if (res.cancel) {
          }
        }
      });
    } else if (this.data.TopFlag == '0') {
      this.setData({
        topType: '1'
      })
      wx.showModal({
        title: '确认要将本条内容置顶吗？', //提示的标题,
        content: '置顶后，话题会被群成员优先看到查看内容', //提示的内容
        showCancel: true, //是否显示取消按钮,
        cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: '#000000', //取消按钮的文字颜色,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#04BCA0', //确定按钮的文字颜色,
        success: async (res) => {
          if (res.confirm) {
            await this.SetTopTopic()
            wx.showToast({
              title: '置顶成功', //提示的内容,
              icon: 'success', //图标,
              duration: 2000, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
            this.setData({
              TopFlag: '1'
            })
            wx.setStorageSync('isBackOpen', false)
            // wx.navigateTo({ url: '/subpages/clerkOnline/pages/myGroup/myGroup' });
          } else if (res.cancel) {
          }
        }
      });
    }

  },
  // 置顶的请求
  async SetTopTopic() {
    let obj = {
      topicId: this.data.topicId,
      topType: this.data.topType
    }
    let res: any = await SetTopTopic(obj)

  },
  // 关闭话题
  async closeTopic() {
    try {
      let res: any = await closeTopic(this.data.topicId)
      console.log('关闭', res)
    } catch{

    }
  },
  /***********************去回复页 **************************/
  replyRemark(e: any) {
    wx.setStorageSync('isBackOpenTopic',false)
    wx.navigateTo({
      url: `/subpages/clerkOnline/pages/remarkOrReply/remarkOrReply?type=${e.detail.type}&topicId=${e.detail.topicId}&faCommentId=${e.detail.commentId}`
    })
  },
  /***********************去评论页 **************************/
  commentsIndex(e: any) {
    wx.setStorageSync('isBackOpenTopic',false)
    console.log('e.currentTarget.dataset.topicid', e.currentTarget.dataset)
    wx.navigateTo({
      url: `/subpages/clerkOnline/pages/remarkOrReply/remarkOrReply?type=${e.currentTarget.dataset.type}&topicId=${e.currentTarget.dataset.topicid}`
    })
  },

  /***********************获取话题详情内容 **************************/
  async getTopicDetail() {
    try {
      let res: any = await getTopicDetail(this.data.topicId)
      this.setData({
        topList: res.data,
        manageFlag: res.data.manageFlag,
        selfPublishFlag: res.data.selfPublishFlag,
        TopFlag: res.data.topFlag,
        userLike: res.data.userLike,
        userDislike: res.data.userDislike,
        //@ts-ignore
        likesTotal: res.data.likesTotal - 0,
        //@ts-ignore
        opposeLTotal: res.data.opposeLTotal - 0
      })
      console.log('res话题详情', res)
    } catch{

    }

  },
  /***********************获取话题详情评论列表 **************************/
  async getCommentList() {
    this.setData({
      loadVisible: true,
      loadType: 'more',
      isShow: false,
      // commentList:[]
    })
    let obj = {
      pageIndex: this.data.pageIndex,
      pageSize: this.data.pageSize,
      topicId: this.data.topicId,
      orderType: this.data.orderType
    }
    try {
      let res: any = await getCommentList(obj)
      if(this.data.pageIndex==1){
        this.setData({
          commentList: res.data,
          commentListLength: res.data.length,
          loadVisible: false,
        })
      }else {
        this.setData({
          commentList: this.data.commentList.concat(res.data),
          commentListLength: res.data.length,
          loadVisible: false,
        })
      }
      

      if (this.data.commentListLength < this.data.pageSize) {
        console.log('6666666666666666666')
        this.setData({
          loadVisible: true,
          loadType: 'none'
        })
      }
      if (this.data.pageIndex==1 && this.data.commentListLength == 0) {
        this.setData({
          isShow: true,
          loadVisible: false,
        })
      }
    } catch{
      this.setData({
        loadVisible: false
      })
    }
  },
  /***************************评论点赞 ******/
  async commentStatement() {
    this.setData({
      iscommentStatement: true
    })
    let obj = {
      attitude: this.data.commentAttitude,
      topicId: this.data.topicId,
      commentId: this.data.commentId
    }
    try {
      let res: any = await commentStatement(obj)
      this.setData({
        iscommentStatement: false
      })
    } catch{
      this.setData({
        iscommentStatement: false
      })
    }
  },
  async onReachBottom() {
    if(this.data.remarkTypeLoading){return }
    if (this.data.commentListLength < this.data.pageSize) {
      return
    }
    this.setData({
      pageIndex: ++this.data.pageIndex,
    })
    await this.getCommentList()
  },
})