<style lang="scss" scoped>
@media (min-width: 1024px) {
  .checkbox_item_container {
    width: 70%;
  }
} /*>=1024的设备*/

@media (min-width: 1100px) {
  .checkbox_item_container {
    width: 70%;
  }
} /*>=1100的设备*/
@media (min-width: 1280px) {
  .checkbox_item_container_size {
    width: 70%;
  }
}

/*>=1280的设备*/

@media (min-width: 1366px) {
}

@media (min-width: 1440px) {
}

@media (min-width: 1680px) {
}
@media (min-width: 1920px) {
  .checkbox_item_container_size {
    width: 50%;
  }
}
.vm-video-list .ant-comment-inner {
  padding: 0;
}
.vm-video-list .bg:after {
  content: '';
  width: 110%;
  height: 110%;
  position: absolute;
  left: -5%;
  top: -5%;
  background: inherit;
  filter: blur(20px);
  z-index: 2;
}
.tu-title {
  margin-left: -12px;
  margin-right: -7px;
  padding-left: 210px;
  background: url(//static.yximgs.com/s1/i/qr-bg.77ae5df.jpg) no-repeat;
  background-size: auto;
  background-size: 210px;
  height: 245px;
  text-align: center;
}
.qr-title {
  display: flex;
  justify-content: center;
  position: relative;
  .img-big {
    width: 200px;
    height: 200px;
    border: 1px solid #f2f2f2;
  }
  .reset {
    width: 200px;
    height: 200px;
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding: 60px 15px;
  }
}
.back-top {
  position: fixed;
  width: 50px;
  height: 100px;
  right: 0;
  bottom: 100px;
  cursor: pointer;
}
</style>
<style lang="scss">
.ant-comment-content-detail {
  word-wrap: break-word;
  word-break: normal;
}
.ant-comment-content-detail p {
  word-wrap: break-word;
  word-break: normal;
  white-space: initial !important;
}
.vm-video-list .ant-card-actions li span {
  width: 90%;
}
.vm-video-list .ant-card-actions li .ant-input-group {
  width: 100%;
}
.vm-video-list .ant-card-actions li .ant-input-group-addon {
  width: 0;
}
.ant-comment-nested {
  margin-left: 10px;
}
.ant-comment-content-author-name {
  width: 100%;
}
.xiaoshi .ant-modal-footer {
  display: none;
}
</style>
<template>
  <div class="vm-video-list">
    <a-row class="image-list-heading vm-panel">
      <div class="panel-heading">{{ title }}</div>
      <a-row type="flex" align="middle" justify="space-between" class="panel-body">
        <div class="search-bar">
          <a-button type="primary" icon="plus" style="margin-right:10px" @click="addUser">新增账号</a-button>
          <a-select
            showSearch
            placeholder="选择账号"
            notFoundContent="暂无账号，赶紧去添加一个吧"
            optionFilterProp="children"
            style="width: 300px"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
            :filterOption="filterOption"
          >
            <a-select-option
              :value="item.ksid"
              v-for="(item,index) of options"
              :key="index"
            >{{item.userName}}</a-select-option>
          </a-select>
        </div>
      </a-row>
    </a-row>
    <a-row class="image-list" :gutter="16" style="padding:0 8px">  
      <a-col
        :lg="6"
        :sm="12"
        class="vm-margin"
        v-for="(item,index) of dataShow"
        :key="index"
        style="padding:0"
      >
        <a-card hoverable style="margin:0 15px">
          <div
            slot="cover"
            style="display:flex;justify-content:center;position:relative;height:300px;"
          >
            <div
              class="bg"
              style="overflow:hidden;position:relative;width:100%;height:100%"
              :style="{backgroundImage: 'url(' +item.thumbnailUrl+')', backgroundSize:'cover', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
            >
              <a
                :href="'https://live.kuaishou.com/u/'+item.user.id+'/'+item.photoId+'?did=web_582ac3583a8eb520aaca065b372d1a1c'"
                target="_blank"
                style="width: 100%;height: 100%;position: absolute;z-index: 100;"
              ></a>
            </div>

            <img
              :src="item.poster"
              alt
              style="height:300px;width:auto;position:absolute;z-index:10;top:0"
            />
          </div>

          <template class="ant-card-actions" slot="actions">
            <a-input placeholder="请输入评论内容" v-model="item.keyword" style="width:100%">
              <div slot="addonAfter" @click="addComment(item,index)">评论</div>
            </a-input>
          </template>
          <div style="position:relative">
            <div
              style="width:100%;height:200px;position: absolute;z-index:3;background:white;display:flex;justify-content:center;align-items:center"
              v-if="item.loading"
            >
              <img src="./images/loading.gif" alt />
            </div>
            <div
              style="height:200px;overflow-y:auto;"
              class="scrollBox"
              @scroll="scrollGet(item,index)"
            >
              <div style="margin-bottom:15px;height:50px">
                {{item.caption}}
                <br />
                <a-icon type="heart" />
                {{item.likeCount}}
                <a-icon type="highlight" style="margin-left:10px" />
                {{item.commentCount}}
                <a-icon type="play-circle" style="margin-left:10px" />
                {{item.viewCount}}
              </div>
              <div v-show="item.commentList.length>0">
                <a-comment v-for="(items,idx) of item.commentList" :key="idx">
                  <span
                    slot="actions"
                    v-if="items.subComments.length>0"
                    @click="items.show=!items.show"
                    style="color:blue"
                  >更多评论</span>
                  <p slot="author">
                    {{items.authorName}}
                    <span style="float:right">{{items.timestamp|formatDate}}</span>
                  </p>
                  <div slot="content" style="display: flex;justify-content: space-between;">
                    <p style="width:75%">
                      <!-- <input type="checkbox" style="margin-right:5px" name id /> -->
                      {{items.content}}
                    </p>
                    <div style="white-space: nowrap;">
                      <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
                      <span @click="remove(item,items,index)" style="margin-right:5px">删除</span>
                    </div>
                  </div>
                  <div v-if="items.subComments.length>0" v-show="items.show">
                    <a-comment v-for="(itemSub,idxSub) of items.subComments" :key="idxSub">
                      <a slot="author">{{itemSub.authorName}}</a>
                      <div slot="content" style="display: flex;justify-content: space-between;">
                        <p style="width:75%">{{itemSub.content}}</p>
                        <div>
                          <span style="margin-right:5px" @click="backAdd(item,items)">回复</span>
                          <span @click="remove(item,itemSub,index)" style="margin-right:5px">删除</span>
                        </div>
                      </div>
                    </a-comment>
                  </div>
                </a-comment>
              </div>
              <div
                v-show="item.commentList.length<=0"
                style="height:130px;display:flex;justify-content:center;align-items:center"
              >暂无评论</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <!-- <div class="back-top" v-show="scollTop>300" @click="backTop">
      <a-icon type="arrow-up" style="font-size:30px" />
    </div> -->
    <a-back-top :visibilityHeight='200'/>
    <a-modal title="扫描二维码登录" v-model="showCode" @cancel="showCode = false" class="xiaoshi">
      <div style="display:flex;justify-content: space-around">
        <div class="tu-title"></div>
        <div class="qr-title">
          <img :src="qrcode" alt class="img-big" />
          <div style="position:absolute;bottom:10px">
            请使用
            <span style="color:#ff5000">快手APP</span>扫码登录
          </div>
          <div class="reset" style v-show="showShare">
            <div style="margin-bottom:5px">
              <img :src="url" alt />
            </div>
            <p>{{showTitle}}</p>
            <span @click="addUser" style="color:red;cursor: pointer;" v-show="showSpan">刷新</span>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import axios from 'axios'
var interval, objTimer
var a = 0

import {
  getLoginQr,
  getUserList,
  getLoginStatus,
  getVideoList,
  getCommentList,
  commentDelete,
  commentAdd
} from '@api/video.js'
export default {
  name: 'videoList',
  components: {
    ACol,
    ARow
  },

  data: function() {
    return {
      title: '视频列表',
      dataShow: [], // data for showing
      data: [],
      options: [],
      showTwo: false,
      showCode: false,
      lastTime: null, //最后一次点击的时间
      currentTime: null, //当前点击的时间
      timeOut: 60 * 1000, //设置超时时间： 1分钟,
      requestId: '',
      qrcode: '',
      showTitle: '',
      showShare: false,
      showSpan: false,
      ksid: null,
      pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
      scollY: null, // 离底部距离有多少
      scollTop: null,
      pcursor: null,
      repltTo: 0,
      replyToCommentId: 0,
      length: 0,
      url: 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
    }
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    }
  },
  methods: {
    scrollGet(item, i, e) {
      var b = document.getElementsByClassName('scrollBox')[i]
      if (b.scrollHeight - b.scrollTop < 250 && item.pcursor != 'no_more') {
        if (b.scrollHeight - b.scrollTop > 235 && item.pcursor != 'no_more') {
          alert(1)
          this.getCommentList(this.ksid, this.dataShow[i].photoId, item.pcursor).then(dataOne => {
            this.dataShow[i].loading = false
            if (dataOne && this.dataShow[i]) {
              var pcursor = dataOne.pcursor
              this.dataShow[i].pcursor = pcursor
              var dataNew = dataOne.commentList.map(item => {
                return {
                  ...item,
                  show: false
                }
              })
              this.dataShow[i].commentList.push(...dataNew)
              this.dataShow[i].pcursor = pcursor
            } else {
              this.dataShow[i].commentList = []
            }
          })
        }
      } else {
        return
      }
    },
    handleChange(value) {
      this.ksid = value
      this.dataShow = []
      clearInterval(interval)
      this.getVideoList(value, null)
      //   this.getTest()
    },
    handleBlur() {
      console.log('blur')
    },
    handleFocus() {
      console.log('focus')
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getUserList() {
      getUserList().then(res => {
        if (res.code == 0) {
          this.options = res.result
        } else {
          this.options = []
        }
      })
    },
    addUser() {
      this.showCode = true
      getLoginQr().then(res => {
        if (res.code == 0) {
          this.showShare = false
          this.qrcode = res.result.qrcode
          this.requestId = res.result.requestId
        }
      })
    },
    getVideoList(ksid, pcursor) {
      var that = this
      getVideoList({ ksid: ksid, pcursor: pcursor }).then(res => {
        if (res.code == 0) {
          var data = res.result.data.publicFeeds.list.map(item => {
            return {
              ...item,
              commentList: [],
              loading: true,
              keyword: ''
            }
          })
          this.pcursor = res.result.data.publicFeeds.pcursor
          this.dataShow.push(...data)
          for (let i = 0; i < that.dataShow.length; i++) {
            that.dataShow[i].loading = false
            if (that.dataShow[i].commentCount > 0) {
              that.getCommentList(ksid, that.dataShow[i].photoId, null).then(dataOne => {
                that.dataShow[i].loading = false
                if (dataOne && that.dataShow[i]) {
                  var pcursor = dataOne.pcursor
                  that.dataShow[i].pcursor = pcursor
                  that.dataShow[i].commentList = dataOne.commentList.map(item => {
                    return {
                      ...item,
                      show: false
                    }
                  })
                } else {
                  that.dataShow[i].commentList = []
                }
              })
            } else {
              that.dataShow[i].loading = false
            }
          }
        }
      })
    },
    getCommentList(ksid, photoId, pcursor) {
      return new Promise(function(resolve) {
        getCommentList({ ksid: ksid, photoId: photoId, pcursor: pcursor }).then(res => {
          if (res.code == 0) {
            var data = res.result.data.shortVideoCommentList
            resolve(data)
          }
        })
      })
    },
    sleep(d) {
      return new Promise(resolve => setTimeout(resolve, d))
    },
    remove(allItem, item, index) {
      allItem.loading = true
      if (res.result.result == 109) {
        this.$message.error('授权已过期，请重新扫码登录')
        allItem.loading = false
      } else {
        commentDelete({ ksid: this.ksid, photoId: allItem.photoId, commentId: item.commentId }).then(res => {
          this.getCommentList(this.ksid, allItem.photoId, null).then(dataOne => {
            allItem.loading = false
            this.dataShow[index].commentList = []
            if (dataOne && this.dataShow[index]) {
              var pcursor = dataOne.pcursor
              this.dataShow[index].pcursor = pcursor
              this.dataShow[index].commentList = dataOne.commentList.map(item => {
                return {
                  ...item,
                  show: false
                }
              })
            } else {
              this.dataShow[index].commentList = []
            }
          })
        })
      }
    },
    getScrollTop: function() {
      var scrollTop = 0,
        bodyScrollTop = 0,
        documentScrollTop = 0
      if (document.body) {
        bodyScrollTop = document.body.scrollTop
      }
      if (document.documentElement) {
        documentScrollTop = document.documentElement.scrollTop
      }
      scrollTop = bodyScrollTop - documentScrollTop > 0 ? bodyScrollTop : documentScrollTop
      return scrollTop
    },
    //浏览器视口的高度
    getScrollHeight: function() {
      var scrollHeight = 0,
        bodyScrollHeight = 0,
        documentScrollHeight = 0
      if (document.body) {
        bodyScrollHeight = document.body.scrollHeight
      }
      if (document.documentElement) {
        documentScrollHeight = document.documentElement.scrollHeight
      }
      scrollHeight = bodyScrollHeight - documentScrollHeight > 0 ? bodyScrollHeight : documentScrollHeight
      return scrollHeight
    },
    //浏览器视口的高度
    getWindowHeight: function() {
      var windowHeight = 0
      if (document.compatMode == 'CSS1Compat') {
        windowHeight = document.documentElement.clientHeight
      } else {
        windowHeight = document.body.clientHeight
      }
      return windowHeight
    },
    scrollChange: function() {
      var _this = this,
        currentPage = { page: this.page }
      _this.scollY = this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight()
      // 把下拉刷新置为false，防止多次请求
      if (this.scollY >= -100) {
        if (this.page > this.pageTotal) {
          return false
        }
        if (!this.pullRefreshss) {
          return false
        }
        _this.getVideoList(_this.ksid, _this.pcursor)
        // _this.getTest()
        _this.pullRefreshss = false
      } else {
        // 其他时候把下拉刷新置为true
        _this.pullRefreshss = true
      }
    },
    backTop() {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
    addComment(item, index) {
      var word = item.keyword.substring(this.length)
      item.loading = true
      var params = {
        ksid: this.ksid,
        photoId: item.photoId,
        content: word,
        replyToCommentId: this.replyToCommentId,
        repltTo: this.repltTo
      }
      commentAdd(params).then(res => {
        if (res.code == 0) {
          if (res.result.result == 109) {
            this.$message.error('授权已过期，请重新扫码登录')
            item.loading = false
          } else {
            this.getCommentList(this.ksid, item.photoId, null).then(dataOne => {
              item.loading = false
              this.dataShow[index].commentList = []
              if (dataOne && this.dataShow[index]) {
                var pcursor = dataOne.pcursor
                this.dataShow[index].pcursor = pcursor
                this.dataShow[index].commentList = dataOne.commentList.map(item => {
                  return {
                    ...item,
                    show: false
                  }
                })
              } else {
                this.dataShow[index].commentList = []
              }
            })
          }

          this.length = 0
          item.keyword = ''
        }
      })
    },
    backAdd(item, items) {
      // authorId  commentId
      item.keyword = '回复' + items.authorName + ':'
      this.length = item.keyword.length
      this.repltTo = items.authorId
      this.replyToCommentId = items.commentId
    },
    setInterOut() {
      var that = this
      if (that.showCode) {
        setTimeout(function() {
          getLoginStatus({ requestId: that.requestId }).then(res => {
            if (res.code == 0) {
              if (res.result) {
                if (res.result.status == 1) {
                  that.url = 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
                  that.showShare = false
                } else {
                  that.url = 'http://static.yximgs.com/s1/i/qr-timeout.36ec907.svg'
                  that.showShare = true
                  that.showSpan = true
                  that.showTitle = res.result.msg
                  if (res.result.status == 3) {
                    that.url = 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
                    that.showSpan = false
                    that.showCode = false
                    that.getUserList()
                  } else if (res.result.status == 2) {
                    that.url = 'http://static.yximgs.com/s1/i/qr-confirm.f32a3c5.svg'
                    that.showSpan = false
                  }
                }
              }
            }
          })
        }, 0)
      }
    }
  },
  watch: {
    showCode(n, o) {
      if (!n) {
        window.clearInterval(objTimer)
      } else {
        objTimer = window.setInterval(this.setInterOut, 1000)
      }
    }
  },
  distoryed() {
    clearInterval(interval)
    window.clearInterval(objTimer)
  },
  mounted: function() {
    this.$nextTick(() => {
      var that = this
      this.getUserList()
      window.onscroll = function() {
        that.scollTop = that.getScrollTop()
        if (that.ksid) {
          if (that.pcursor != 'no_more') {
            that.scrollChange()
          }
        }
      }
    })
  }
}
</script>
