<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">
        <video v-if="item.type == 'video'" style="width: 100%; height: 100%" :src="item.url" />
        <image v-if="item.type == 'img'" :src="item.url" style="width: 100%; height: 100%" mode="scaleToFill" />
      </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">共{{ itemlist.favorite.comment_num || '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" :key="item.id">
            <view class="huifu">
              <text class="nameText">{{ it.username }}</text>
              <text class="huifuText">回复</text>
              <text class="nameText">{{ it.tousername }}：</text>
              <text>{{ it.comment }}</text>
              <!-- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 -->
            </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: 140rpx"></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: [],
    }
  },
  onLoad(options) {
    // console.log(options.itemId)
    this.itemId = options.itemId
    this.getDetail()
    this.getCommentList()
    // this.userInfo = JSON.parse(options.userInfo)
  },
  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)
      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
    },

    // 筛选排序
    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: 1, //	integer	是	页码
        rows: 10, //	integer	是	条数
      })

      console.log(res)
      this.pingList = 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: 500;
  }
  :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: 500;
    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;
  }
}
</style>