<template>
  <div>
    <div class="video-container">
      <img src="../assets/pc/img/bg@3x.png" alt="" class="back-img" />

      <el-row>
        <el-col :span="14" :push="2">
          <el-card class="video-player">
            <div id="J_prismPlayer" :style="{ height: height + 'px' }">
              <img src="../assets/pc/img/video-img.jpg" alt />
            </div>
            <div class="title">
              <div class="video-title">
                <img src="../assets/pc/img/title-img.jpg" class="title-img" />
                <div class="broadcaster-name">恒瑞测试</div>
                <div class="info">
                  <div class="viewer-num">
                    <i class="el-icon-view icon"></i>观众：588
                  </div>
                  <div class="share">
                    <i class="el-icon-share icon"></i>分享
                  </div>
                </div>
              </div>
              <div class="present">
                <el-popover
                  placement="right"
                  title=""
                  width="450"
                  trigger="click"
                >
                  <div class="present-content">
                    <div class="present-title">打赏</div>
                    <div class="content">
                      <!-- 礼物赠送 -->
                      <div
                        class="item"
                        v-for="(item, i) in presentList"
                        :key="item.img"
                      >
                        <el-popover
                          placement="top-end"
                          title=""
                          width="300"
                          trigger="click"
                        >
                          <div class="present-send">
                            <div class="present-info">
                              <div>
                                <img
                                  :src="item.img"
                                  alt=""
                                  class="present-img"
                                />
                              </div>
                              <div class="present-desc">
                                <p>{{ item.desc }}</p>
                                <div class="present-num">
                                  <div>数量：</div>
                                  <el-input-number
                                    v-model="presentNum"
                                    @change="handleChange"
                                    :min="1"
                                    :max="99"
                                    label=""
                                  ></el-input-number>
                                </div>
                              </div>
                            </div>
                            <div class="present-totalprice">
                              <div>
                                <span>合计：</span
                                ><span style="color: #f04040">{{
                                  item.price
                                }}</span>
                              </div>
                              <div class="send">
                                <el-button type="danger">赠送</el-button>
                              </div>
                            </div>
                          </div>

                          <div slot="reference">
                            <img :src="item.img" alt="" />
                            <p>{{ item.desc }}</p>
                            <p class="price">{{ item.price }}</p>
                          </div>
                        </el-popover>
                      </div>
                    </div>
                  </div>
                  <div class="present-btn" slot="reference">
                    <img src="../assets/pc/img/present.png" alt="" />
                  </div>
                </el-popover>

                <span style="line-height: 30px" class="c-666"> 打赏 </span>
              </div>
            </div>
            <div class="barrage">
              <div class="video-mobile c-666">
                <i class="el-icon-mobile icon"></i>手机观看
              </div>
              <div class="barrage-btn c-666">
                弹幕<el-switch
                  v-model="barrageFlag"
                  active-color="#409EFF"
                  inactive-color="#cccccc"
                >
                </el-switch>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :push="2">
          <el-card class="comments" :style="{ height: commentsHeight + 'px' }">
            <div class="cose-title">聊天互动</div>
            <div
              class="messages-content"
              id="commentsList"
              :style="{ height: minHeight + 'px' }"
              @scroll="getNewComments"
            >
              <div class="item" v-for="(item, i) in list" :key="i">
                <div class="time">2021-01-01 22:22</div>
                <div class="message">
                  <div class="head-img">
                    <img
                      src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1429871452,4246708244&fm=26&gp=0.jpg"
                      alt=""
                    />
                  </div>
                  <div class="word">
                    <div class="user">上海市网友</div>
                    <div class="tidings">{{i }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="send">
              <div class="textbox">
                <el-input
                  v-model="tidings"
                  placeholder="我也来说几句"
                ></el-input>
              </div>
              <div class="send-btn">
                <el-button type="primary">发送</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div
      style="height: 1000px; background-color: #232323; margin-top: 100px"
    ></div>
  </div>
</template>

<script>
import {
  strToObject,
  initMudu,
  getMsgList,
  initPlayer,
} from "../util/video.js";
import "../assets/pc/css/video.scss";
export default {
  data() {
    return {
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
      width: 876,
      height: 492,
      commentsHeight: 629,
      minHeight: 528,
      presentNum: 1,
      barrageFlag: true,
      presentList: [
        {
          img: "https://static.mudu.tv/assets/img/console/reward/call.png",
          desc: "为你打call",
          price: "免费",
        },
        {
          img: "https://static.mudu.tv/assets/img/console/reward/heart.png",
          desc: "怦然心动",
          price: "免费",
        },
        {
          img: "https://static.mudu.tv/assets/img/console/reward/flower.png",
          desc: "鲜花礼盒",
          price: "免费",
        },
        {
          img: "https://static.mudu.tv/assets/img/console/reward/rock.gif",
          desc: "冲天云彩大火箭",
          price: "免费",
        },
        {
          img: "https://static.mudu.tv/assets/img/console/reward/yacht.png",
          desc: "梦幻环游飞艇",
          price: "免费",
        },
      ],
      tidings: "",
      commentApi: {},
      scrollTop: 0,
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      page: 3,
    };
  },

  async created() {
    console.log("--------------------------");
    let scale = this.windowWidth / 1536;
    this.height = parseInt(scale * 492);
    this.width = parseInt(scale * 876);
    this.commentsHeight = this.height + 139;
    this.minHeight = this.commentsHeight - 41 - 33 - 27;
    // 初始化播放器+
    this.commentApi = await initMudu({
      id: "J_prismPlayer",
      width: this.width,
      height: this.height,
    });
    console.log("-----------22222222---------");
    let c = await getMsgList(this.commentApi, 0);
    console.log(c);
    this.scrollToBottom();
  },
  async mounted() {},
  methods: {
    handleChange(value) {
      this.$data.presentNum = value;
      console.log(this.$data.presentNum);
    },
    getComments(page) {
      getMsgList(1);
    },

    //评论显示从下到上
    scrollToBottom() {
      this.$nextTick(() => {
        var container = this.$el.querySelector("#commentsList");
        container.scrollTop = container.scrollHeight;
      });
    },
    getNewComments(e) {
      let top = e.target.scrollTop;
      if (e.target.scrollTop == 0) { 
        console.log("到顶了");
        console.log(this.page);
        if (this.page > 0) {
          this.list.unshift(10, 11, 12, 13, 14, 15, 16, 17, 18, 19, '间隔');
          console.log(this.page);
          console.log(this.list)
          this.page -= this.page;
        }
      }
    },
  },
};
</script>

