<template>
  <view>
    <view class="topInfoBox flexA">
      <view class="flexA">
        <image :src="itemlist.user.avatar" mode="scaleToFill" />
        <view class="timeText">
          <view>{{ itemlist.user.user_name }}</view>
          <view>{{ itemlist.update_time }}</view>
        </view>
      </view>
    </view>

    <swiper :autoplay="true" :interval="3000" style="height: 420rpx" class="swiper" @change="changeSwiperHandler">
      <swiper-item v-for="item in bannerList" :key="item" class="flexC" @click="prevViewImageHandler(item)">
        <video v-if="item.type == 'video'" style="width: 100%; height: 100%" :src="item.url" />
        <image v-if="item.type == 'img'" :src="item.url" mode="heightFix" />
      </swiper-item>
    </swiper>

    <view slot="indicator" class="indicator">
      <view
        class="indicator__dot"
        v-for="(item, index) in bannerList"
        :key="index"
        :class="[index === current && 'indicator__dot--active']"
      ></view>
    </view>

    <!-- 内容 -->
    <view class="mainBox">
      <view class="titleText">{{ itemlist.title }}</view>
      <view class="centerText">{{ itemlist.content }}</view>
    </view>

    <!-- 评论 -->
    <view class="mainBox2">
      <u-divider></u-divider>
      <view class="flexJ topBox" style="margin-top: 32rpx">
        <view class="pingNumText">共{{ total || '0' }}条评论</view>
        <image style="width: 32rpx; height: 32rpx" src="/static/toggle.png" mode="scaleToFill" @click="rightCate = true" />
        <view class="xia" v-if="rightCate">
          <view class="flexC" @click="sortHandler(0)">时间排序</view>
          <view class="flexC" @click="sortHandler(1)">热度排序</view>
        </view>
      </view>

      <!-- 评论数据 -->
      <view class="pingBox" v-for="(item, index) in pingList" :key="item.id">
        <!-- 头像和点赞 -->
        <view class="pTopBox flexJ">
          <view class="avatarBox flexA">
            <image :src="item.user_avatar" mode="scaleToFill" />
            <view>{{ item.username }}</view>
          </view>
          <view class="zanBox flexA">
            <image
              @click="getCommentFavorite(item.is_favorite, index, item.id)"
              :src="item.is_favorite == 0 ? '/static/zan1.png' : '/static/zan11.png'"
              mode="scaleToFill"
            />
            <view>{{ item.favorite_num }}</view>
          </view>
        </view>
        <!-- 内容 -->
        <view class="contentBox">{{ item.comment }}</view>
        <!-- 回复和时间 -->
        <view class="timeBox flexA">
          <view>{{ item.create_time.slice(5, 16) }}</view>
          <view class="flexC">回复</view>
        </view>

        <!-- 回复评论 -->
        <view class="hPBox" v-if="item.child.length">
          <view v-for="it in item.child.slice(0,2)" :key="item.id">
            <view class="huifu chao">
              <text class="nameText">{{ it.username }}</text>
              <text class="huifuText">回复</text>
              <text class="nameText">{{ it.tousername }}：</text>
              <text>{{ it.comment }}</text>
              <!-- <text >哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</text> -->
            </view>
            <!-- <view class="huifuText">展开</view> -->
          </view>
          <view v-if="item.child_num >= 2" class="flexA huifuText1Box">
            <view class="huifuText1">查看全部{{ item.child_num }}条回复</view>
            <image style="width: 16rpx; height: 24rpx" src="/static/blueRIght.png" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </view>

    <!-- 底部点赞评论收藏 -->
    <view class="bottomBtnBox flexA">
      <view class="favoriteBox flexA">
        <image class="xImg" src="/static/xie.png" mode="scaleToFill" />
        <view>我来说两句...</view>
      </view>

      <!-- 点赞 -->
      <view class="likeBox flexA" style="margin-right: 40rpx">
        <image
          :src="userFavorite_zan == '1' ? '/static/zan11.png' : '/static/zan1.png'"
          mode="scaleToFill"
          @click="favoriteHandler(1)"
        />
        <view>{{ zanNum }}</view>
      </view>

      <!-- 评论 -->
      <view class="likeBox flexA" style="margin-right: 40rpx">
        <image src="/static/icon1.png" mode="scaleToFill" />
        <view>{{ itemlist.favorite.comment_num }}</view>
      </view>

      <!-- 收藏 -->
      <view class="likeBox flexA">
        <image v-if="userFavorite_cang == '0'" src="/static/icon2.png" mode="scaleToFill" @click="favoriteHandler(3)" />
        <u-icon v-else name="star-fill" color="#6e15ff" size="22" @click="favoriteHandler(3)"></u-icon>
        <view>{{ cangNum }}</view>
      </view>
    </view>

    <!-- 底部白盒子 -->
    <view class="fffBox"></view>

    <view v-if="inputState" class="inputBox">
      <view class="flexJ selectBox">
        <view>取消</view>
        <view>发送</view>
      </view>
      <u--textarea
        v-model="value2"
        maxlength="300"
        :showConfirmBar="false"
        focus
        adjustPosition
        placeholder="请输入内容"
        count
      ></u--textarea>
    </view>
    <view style="height: 120rpx"></view>
  </view>
</template>
<script>
import { getDetail, getCommentList, getFavorite, getCommentFavorite } from '@/api'
export default {
  data() {
    return {
      value2: '',
      inputState: false,
      itemId: '',
      itemlist: {},
      // 当前指示器
      current: 0,
      // 轮播图数据
      bannerList: [],
      // 右侧筛选状态
      rightCate: false,
      order: 1,
      // 用户是否点赞
      userFavorite_zan: 0,
      // 点赞数量
      zanNum: 0,
      // 用户是否收藏
      userFavorite_cang: 0,
      // 收藏数量
      cangNum: 0,
      // 评论数据
      pingList: [],
      // 一共多少条评论
      total: 0,
      // 最后一页
      lastPage: 0,
      // 当前页
      curPage: 1,
    }
  },
  onLoad(options) {
    // console.log(options.itemId)
    this.itemId = options.itemId
    this.getDetail()
    this.getCommentList()
    // this.userInfo = JSON.parse(options.userInfo)
  },
  onReachBottom() {
    if (this.curPage == this.lastPage) return uni.showToast({ title: '没有更多回复了~', icon: 'none' })
    this.curPage += 1
    this.getCommentList()
  },
  methods: {
    // 切换轮播图
    changeSwiperHandler(e) {
      // console.log(e)
      this.current = e.detail.current
    },

    // 获取详情数据
    async getDetail() {
      const res = await getDetail({ id: this.itemId })
      this.itemlist = res.data
      const list = JSON.parse(this.itemlist.file)
      if (list.video) {
        this.bannerList.push({ url: JSON.parse(this.itemlist.file).video, type: 'video' })
      }
      list.imgList.forEach(item => {
        this.bannerList.push({ url: item, type: 'img' })
      })
      this.userFavorite_zan = res.data.userFavorite_zan
      this.userFavorite_cang = res.data.userFavorite_cang
      this.zanNum = res.data.favorite.like_num
      this.cangNum = res.data.favorite.collection_num
    },

    // 预览轮播图
    prevViewImageHandler(item){
      console.log(item)
      const list3 = this.bannerList.filter(item => item.type == 'img').map(item => item.url)
      uni.previewImage({
			urls: list3,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
    },

    // 筛选排序
    sortHandler(type) {
      this.rightCate = !this.rightCate
      this.order = type
      this.getCommentList()
    },

    // 获取评论列表
    async getCommentList() {
      const res = await getCommentList({
        id: this.itemId, //	integer	是	论坛id
        order: this.order, //	integer	是	排序 0:时间，1:热度
        page: this.curPage || 1, //	integer	是	页码
        rows: 2, //	integer	是	条数
      })

      console.log(res, '1122')
      this.lastPage = res.data.last_page
      this.total = res.data.total
      this.pingList = this.pingList.concat(res.data.data)
    },

    // 详情点赞收藏
    async getFavorite(type, set) {
      const res = await getFavorite({
        id: this.itemId, //	integer	是	论坛ID
        type: type, //	integer	是	1：点赞,3：收藏
        set: set, //	integer	是	0：取消,1：确认
      })
    },

    // 点赞收藏操作
    favoriteHandler(type) {
      // 点赞
      if (type == 1) {
        // 确认点赞
        if (this.userFavorite_zan == 1) {
          this.userFavorite_zan = 0
          this.getFavorite(1, 0)
          this.zanNum = this.zanNum - 1
        } else {
          // 取消点赞
          this.userFavorite_zan = 1
          this.getFavorite(1, 1)
          this.zanNum = this.zanNum + 1
        }
      }
      // 收藏
      if (type == 3) {
        if (this.userFavorite_cang == 1) {
          this.userFavorite_cang = 0
          this.getFavorite(3, 0)
          this.cangNum = this.cangNum - 1
        } else {
          this.userFavorite_cang = 1
          this.getFavorite(3, 1)
          this.cangNum = this.cangNum + 1
        }
      }
      this.getDetail()
    },

    // 评论点赞操作
    async getCommentFavorite(isF, index, id) {
      console.log(isF, index)
      try {
        const res = await getCommentFavorite({
          id: id, //	integer	是	评论主键ID
          set: isF == 1 ? 0 : 1, //	integer	是	0：取消,1：确认
        })
        if (isF == 1) {
          this.pingList[index].favorite_num -= 1
        } else {
          this.pingList[index].favorite_num += 1
        }
        this.pingList[index].is_favorite = this.pingList[index].is_favorite == 1 ? 0 : 1
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="scss">
.indicator {
  /* @include flex(row); */
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
  margin-bottom: 62rpx;

  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(0, 0, 0, 0.4);
    margin: 0 5px;
    transition: background-color 0.3s;

    &--active {
      background: rgba(0, 0, 0, 0.6);
    }
  }
}
.inputBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24rpx 32rpx 32rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  > .selectBox {
    margin-bottom: 16rpx;
    view:nth-child(1) {
      color: rgba(0, 0, 0, 1);
      font-size: 32rpx;
    }
    view:nth-child(2) {
      color: rgba(33, 83, 212, 1);
      font-size: 32rpx;
    }
  }
}
.topInfoBox {
  padding: 24rpx;
  box-sizing: border-box;
  image {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }
}
.timeText {
  :nth-child(1) {
    color: rgba(0, 0, 0, 0.9);
    font-size: 26rpx;
    font-weight: 700;
  }
  :nth-child(2) {
    color: rgba(0, 0, 0, 0.4);
    font-size: 24rpx;
  }
}
.mainBox {
  padding: 0 24rpx;
  box-sizing: border-box;
  > .titleText {
    color: rgba(0, 0, 0, 0.9);
    font-size: 36rpx;
    font-weight: 700;
    margin-bottom: 24rpx;
  }
  > .centerText {
    color: rgba(0, 0, 0, 0.6);
    font-size: 28rpx;
  }
  margin-bottom: 40rpx;
}
.mainBox2 {
  padding: 32rpx;
  box-sizing: border-box;
}
.pingNumText {
  color: rgba(0, 0, 0, 0.9);
  font-size: 32rpx;
  font-weight: 700;
}
.topBox {
  position: relative;
  margin-bottom: 40rpx;
  .xia {
    width: 256rpx;
    height: 188rpx;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    /* flex-direction: column; */
    background: #fff;
    position: absolute;
    top: 70rpx;
    right: 0rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.2);
    view {
      color: rgba(50, 50, 51, 1);
      font-size: 28rpx;
    }
    :nth-child(1) {
      padding-bottom: 22rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    }
    :nth-child(2) {
      padding-top: 22rpx;
    }
  }
}
.bottomBtnBox {
  background: #fff;
  image {
    width: 40rpx;
    height: 40rpx;
  }
  position: fixed;
  bottom: 60rpx;
  left: 0;
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  > .favoriteBox {
    margin-right: 24rpx;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    border-radius: 38rpx;
    background: rgba(247, 248, 250, 1);
    view {
      color: rgba(179, 179, 179, 1);
      font-size: 28rpx;
      margin-left: 24rpx;
    }
  }
  > .likeBox {
    view {
      color: rgba(0, 0, 0, 0.9);
      font-size: 28rpx;
      margin-left: 8rpx;
      min-width: 42rpx;
    }
  }
}
.fffBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60rpx;
  background: #fff;
}
.xImg {
  width: 32rpx;
  height: 32rpx;
}
.huifuText1Box {
  margin-top: 16rpx;
}
.huifuText1 {
  color: rgba(33, 83, 212, 1);
  font-size: 28rpx;
  margin-right: 10rpx;
}
.pingBox {
  padding-bottom: 32rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  margin-bottom: 32rpx;

  > .pTopBox {
    > .avatarBox {
      color: rgba(0, 0, 0, 0.9);
      font-size: 32rpx;
      font-weight: 700;
      image {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }
    }
    > .zanBox {
      color: rgba(0, 0, 0, 0.9);
      font-size: 28rpx;
      image {
        width: 40rpx;
        margin-right: 8rpx;
        height: 40rpx;
      }
    }
  }
  > .contentBox {
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
    margin-bottom: 16rpx;
    margin-left: 80rpx;
  }
  > .timeBox {
    margin-left: 80rpx;
    margin-bottom: 24rpx;
    view:nth-child(1) {
      color: rgba(0, 0, 0, 0.4);
      font-size: 24rpx;
      margin-right: 48rpx;
    }
    view:nth-child(2) {
      width: 114rpx;
      height: 48rpx;
      border-radius: 56rpx;
      border: 1rpx solid #b88dff;
      color: rgba(110, 22, 255, 1);
      font-size: 24rpx;
    }
  }
  > .hPBox {
    padding: 24rpx;
    box-sizing: border-box;
    background: #f7f8fa;
    margin-left: 80rpx;
  }
}
.huifu {
  > .nameText {
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
    font-weight: 700;
    margin-right: 10rpx;
  }
  > .huifuText {
    color: rgba(0, 0, 0, 0.4);
    font-size: 28rpx;
    margin-right: 10rpx;
  }
  text {
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
  }
}
.chao {
  max-width: 600rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>