<!--  -->
<template>
  <div>
    <div class="baselistbox_top">
      <div class="baselistbox_top_title">
        <p @click="goBackPage()" style="cursor: pointer;">
          <i class="el-icon-back"></i>
          <span>返回</span>
        </p>
        <p>监控回放</p>
      </div>
    </div>
    <div style="height: 430px" id="wrap">
      <div id="playbox"></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import "./imouplayer";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      baseid: "",
      player: null,
      playerOption: {
        url: "",
        kitToken: "",
        // 是否自动播放
        autoplay: true,
        // 是否显示控制台
        controls: true,
        // 是否开启静音
        automute: false,
        themeData: [
          {
            area: "header",
            fontColor: "#F18D00",
            backgroundColor: "#FFFFFF",
            activeButtonColor: "#0E72FF",
            buttonList: [
              {
                show: true,
                id: "deviceName",
                name: "设备名称",
                position: "left",
              },
              {
                show: true,
                id: "channalId",
                name: "设备通道",
                position: "left",
              },
              {
                show: true,
                id: "cloudVideo",
                name: "云录像",
                position: "right",
              },
              {
                show: true,
                id: "localVideo",
                name: "本地录像",
                position: "right",
              },
            ],
          },
          {
            area: "footer",
            fontColor: "#F18D00",
            backgroundColor: "#FFFFFF",
            activeButtonColor: "#0E72FF",
            buttonList: [
              {
                show: true,
                id: "play",
                name: "播放",
                position: "left",
              },
              {
                show: true,
                id: "mute",
                name: "音量控制",
                position: "left",
              },
              {
                show: true,
                id: "talk",
                name: "语音对讲",
                position: "left",
              },
              {
                show: true,
                id: "capture",
                name: "截图",
                position: "left",
              },
              {
                show: true,
                id: "definition",
                name: "清晰度控制",
                position: "right",
              },
              {
                show: true,
                id: "PTZ",
                name: "云台控制",
                position: "right",
              },
              {
                show: true,
                id: "webExpend",
                name: "网页全屏",
                position: "right",
              },
              {
                show: true,
                id: "extend",
                name: "全屏控制",
                position: "right",
              },
            ],
          },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //返回上一页
    goBackPage() {
      this.$router.go(-1);
    },
    getmontoken() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=camera.camera_manage.get_camera_dh_token",
        data: this.qs.stringify({
          device_id: this.baseid,
        }),
      }).then((res) => {
        console.log(res);
        if (res.data.data) {
          const url = `imou://open.lechange.com/${this.baseid.slice(
            0,
            this.baseid.indexOf("-")
          )}/${this.baseid.slice(
            this.baseid.indexOf("-") + 1
          )}/2?streamId=1&recordType=localRecord`;
          this.playerOption.url = url;
          console.log(url);
          const kitToken = res.data.data.result.data.kitToken;
          this.playerOption.kitToken = kitToken;
          this.initLive();
        }
      });
    },
    initLive() {
      if (this.player) {
        this.player.destroy();
      }
      this.player = new ImouPlayer("#playbox");
      // const url = $('#url').value.trim();
      // const kitToken = $('#kitToken').value.trim();
      const url = this.playerOption.url;
      const kitToken = this.playerOption.kitToken;
      const urlArr = [];
      url.split("%").forEach(function (item, index) {
        const obj = {
          url: item,
          kitToken: kitToken,
          talk: {
            success: (msg) => {
              console.log("type", msg);
            },
            failed: (msg) => {
              console.log("failed", msg);
            },
          },
        };
        urlArr.push(obj);
      });
      // const width = window.innerWidth;
      var emel = document.getElementById("wrap");
      const width = this.checkMobile() ? emel.clientWidth : window.innerWidth;
      console.log(width);
      const height = this.checkMobile()
        ? parseInt((width * 7.5) / 16)
        : window.innerHeight;
      // const height = window.innerHeight;
      const params = {
        src: urlArr,
        width: width,
        height: height,
        isEdit: this.playerOption.isEdit,
        autoplay: this.playerOption.autoplay,
        controls: this.playerOption.controls,
        automute: this.playerOption.automute,
        themeData: this.playerOption.themeData,
      };
      // console.log(params, '11111111111111111111111111');
      // this.player.setup(params);
      setTimeout(() => {
        this.player.setup(params);
      }, 1000);
    },
    checkMobile() {
      return true;
      if (!navigator) return false;
      const reg = /(iPhone|iPod|Android|ios|SymbianOS)/i;
      return reg.test(navigator.userAgent);
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.baseid = this.$route.query.id;
    this.getmontoken();
    //  var player = new ImouPlayer('#playbox');
    //  const url = $('#url').value.trim();
    //    console.log(this.$route.query.id)
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.baselistbox_top {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  .baselistbox_top_title {
    width: 100%;
    height: 65px;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    line-height: 25px;
    p:first-child {
      font-size: 14px;
      margin-right: 20px;
    }
    p:last-child {
      font-size: 18px;
      font-weight: 700;
    }
  }
}
#playbox {
  width: 90%;
  height: 90%;
}
</style>