<template>
  <div id="videoPreview">
    <el-dialog
      :visible.sync="diavos"
      width="840px"
      @opened="isOkBf"
      @close="clears"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">视频预览</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="clears" />
        </div>
      </div>
      <div>
        <div id="player" v-if="listData.sectionType === 1"></div>
        <div id="playerzb" v-if="listData.sectionType === 2"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clears">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      vodPlayerJs: "https://player.polyv.net/script/player.js",
      vid: "",
      vidzb: "",
      playerJs:
        "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
      uidzb: "egsxlptzdq",
      fileSetting: {
        desc: "i am desc", // 描述
        cataid: "1639399775001", // 分类ID 可以后端传递 也可以不写 或写死
        tag: "i am tag", // 标签
        luping: 0, // 是否开启视频课件优化处理，对于上传录屏类视频清晰度有所优化：0为不开启，1为开启
        keepsource: 1, // 是否源文件播放（不对视频进行编码）：0为编码，1为不编码
      },
      diavos: false,
      listData: {}, //数据
    };
  },
  methods: {
    diavosFun(item) {
      if (item.sectionType === 1) {
        this.vid = item.recordingUrl;
      }
      if (item.sectionType === 2) {
        this.vidzb = item.liveUrl;
      }
      this.listData = item;
      this.diavos = true;
    },
    isOkBf() {
      if (this.listData.sectionType === 1) {
        this.loadPlayerScript(this.loadPlayer);
      }
      if (this.listData.sectionType === 2) {
        this.loadPlayerScriptzb(this.loadPlayerzb);
      }
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
        this.player.on("serverError", (...params) => {
          this.$message.error(returnTitle(params[1]));
          console.log(params);
        });
      }
    },
    loadPlayer() {
      var self = this;
      const polyvPlayer = window.polyvPlayer;
      self.player = polyvPlayer({
        wrap: "#player",
        width: 800,
        height: 533,
        vid: self.vid,
        teaser_show: 0,
        playsafe: function (vid, next) {
          self.$api.obtainpolyvvideosign(vid).then((res) => {
            next(res.data);
          });
        },
      });
    },
    /**
     * @param {String} 关闭视频窗口-销毁实例
     */
    clears() {
      this.diavos = false;
      if (this.listData.sectionType === 1 && this.player) {
        this.player.destroy();
      }
      if (this.listData.sectionType === 2 && this.playerzb) {
        this.playerzb.destroy();
      }
      this.listData = {};
    },
    loadPlayerScriptzb(callback) {
      if (!window.polyvLivePlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.playerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },

    loadPlayerzb() {
      var self = this;
      const polyvLivePlayer = window.polyvLivePlayer;
      self.playerzb = polyvLivePlayer({
        wrap: "#playerzb",
        width: 800,
        height: 533,
        uid: self.uidzb,
        vid: self.vidzb,
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>
