<template>
  <div style=" height: 370px; background-color: #fff;">
    <ul class="jc-video-list">
      <li>
        <a
          href="javascript:void(0);"
          @click="play_video('https://cnmwth.oss-cn-shenzhen.aliyuncs.com/Video/WhyThePointManagement.mp4')"
        >
          <div class="display-cell">
            <img src="static/images/img_PointDesign.png">
          </div>
          <div class="display-cell textbox">
            <div class="v-text" style="text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
              <h4
                style="width:auto; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;"
              >{{$t('dashboard.jcnr_title1')}}</h4>{{$t('dashboard.jcnr_title2')}}
            </div>
          </div>
        </a>
      </li>
      <li>
        <a
          href="javascript:void(0);"
          @click="play_video('https://cnmwth.oss-cn-shenzhen.aliyuncs.com/Video/PointManagement.mp4')"
        >
          <div class="display-cell">
            <img src="static/images/img_Integral_management_landing.png">
          </div>
          <div class="display-cell textbox">
            <div class="v-text" style="text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
              <h4
                style="width:auto; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;"
              >{{$t('dashboard.jcnr_title3')}}</h4>{{$t('dashboard.jcnr_title4')}}
            </div>
          </div>
        </a>
      </li>
      <li>
        <a
          href="javascript:void(0);"
          @click="play_video('https://cnmwth.oss-cn-shenzhen.aliyuncs.com/Video/HowtoPoint1.mp4')"
        >
          <div class="display-cell">
            <img src="static/images/img_Integral_management_implementation.png">
          </div>
          <div class="display-cell textbox">
            <div class="v-text" style="text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
              <h4
                style="width:auto; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;"
              >{{$t('dashboard.jcnr_title5')}}</h4>{{$t('dashboard.jcnr_title6')}}
            </div>
          </div>
        </a>
      </li>
    </ul>

    <div id="video-box-com" :class="{'video-box-g': true, 'open':video_show}" v-show="video_show_box">
      <div class="video-box-g-src">
        <div style="height: 100%; position: relative; ">
          <a
            href="javascript:void(0);"
            class="video-close"
            id="_vclose"
            onclick="if(window.location.href.indexOf('dashboard') < 0){ document.getElementById('video-box-com').parentNode.removeChild(document.getElementById('video-box-com'))}"
            @click="hidevideo"
            v-show="video_show===false"
          >✕</a>
          <a
            href="javascript:void(0);"
            class="video-close"
            @click="video_show = false"
            v-show="video_show===true"
          >✕</a>
          
          <video
            style="height: 100%; width:100%;"
            class="video-js vjs-default-skin"
            controls
            preload="none"
            width="100%"
            height="100%"
            :poster="playerOptions.poster"
            data-setup="{}"
          >
            <source :src="playerOptions.src" type="video/mp4">
            <track
              kind="captions"
              src="../shared/example-captions.vtt"
              srclang="en"
              label="English"
            >
            <track
              kind="subtitles"
              src="../shared/example-captions.vtt"
              srclang="en"
              label="English"
            >
            <p
              class="vjs-no-js"
            >To view this video please enable JavaScript, and consider upgrading to a web browser that
              <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
          </video>
        </div>
      </div>
      <div class="video-box-mark"></div>
    </div>

    <!-- 广告代码 -->
    <div v-if="adv_box_mark_show1 && $store.getters.user_info.company_info.is_official == 0">
      <div style="position: fixed; top:0; right:750px; z-index:99;">
        <div style="position: relative;">
          <a
            href="javascript:void(0);"
            style="width:30px; height: 30px; -webkit-border-radius: 20px; display: none; position:fixed; right:-10px; top:-15px; line-height: 30px; text-align: center; z-index:9;background-color:#f00; color:#fff;-moz-border-radius: 20px;border-radius: 20px;"
            @click="adv_box_mark_show1 = false"
          >✕</a>
          <img src="static/images/adv_top.png">

          <div
            @click="adv_box_mark_show = true"
            style="position:absolute; cursor: pointer; bottom:0; height: 80px; left:0; right:0;"
          ></div>
        </div>
      </div>

      <div
        class="adv-box-mark"
        style="background-color: rgba(0,0,0,0.6); position: fixed; top:0; left:0; right:0; bottom:0; z-index:9999;"
        @click="adv_box_mark_show=false"
        v-show="adv_box_mark_show"
      >
        <div
          style="width:880px; margin:0 auto; position: fixed; top:50%; margin-top:-240px; left:50%; margin-left:-440px; height: 480px;"
        >
          <a
            href="javascript:void(0);"
            style="width:30px; height: 30px; -webkit-border-radius: 20px; display: block; position:absolute; right:-15px; top:-15px; line-height: 30px; text-align: center; z-index:9;background-color:#000; color:#fff;-moz-border-radius: 20px;border-radius: 20px;"
            @click="adv_box_mark_show = false"
          >✕</a>
          
          <img width="880" style="display: block;" src="static/images/adv_center.png">
        </div>
      </div>
    </div>
    <!-- 广告代码 -->
  </div>
</template>

<script>
import Vue from "vue";
require("video.js/dist/video-js.css");
require("vue-video-player/src/custom-theme.css");
import { videoPlayer } from "vue-video-player";
Vue.prototype.video_show_box = false;
Vue.prototype.video_show = false;
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },

  data() {
    return {
      adv_box_mark_show: false,
      adv_box_mark_show1: false,
      adv_box_height: 400,
      video_show_box: this.video_show_box,
      video_show: this.video_show,
      playerOptions: {
        src:
          "https://cnmwth.oss-cn-shenzhen.aliyuncs.com/Video/WhyThePointManagement.mp4",
        poster:
          "https://cnmwth.oss-cn-shenzhen.aliyuncs.com/images/img_Target_Management02_curt.jpg" //你的封面地址
      },

      list: null,
      listQuery: {
        page: 1,
        limit: 5,
        type: this.type,
        sort: "+id"
      },
      loading: false
    };
  },
  created() {
    //计算广告图高度
    let wh = window.innerHeight;
    this.adv_box_height = wh - 60;

    if (this.$store.getters.user_info.company_info.is_official == 0) {
      this.$nextTick(() => {
        if (
          document.querySelectorAll('[added="1"]').length > 0 ||
          this.$store.getters.user_info.is_creator == 0
        ) {
          this.$set(this.playerOptions, "src", "");
          this.video_show_box = false;
          this.video_show = false;
          this.$nextTick(() => {
            if (document.querySelectorAll('[added="1"] video').length > 0) {
              document.querySelectorAll('[added="1"] video')[0].load();
            }
          });
        } else {
          if (document.getElementById("video-box-com")) {
            document.getElementById("video-box-com").setAttribute("added", 1);
            document.body.appendChild(document.getElementById("video-box-com"));
          }
        }
      });
    } else {
      this.video_show = false;
      this.video_show_box = false;
    }

    this.getList();
  },
  methods: {
    hidevideo() {
      this.video_show_box = false;
      this.$set(this.playerOptions, "src", "");
      this.$nextTick(() => {
           if (document.querySelectorAll('[added="1"] video').length > 0){
                document.querySelectorAll('[added="1"] video')[0].load();
           }
        // document.querySelectorAll('[added="1"] video')[0].load();
      });
    },
    play_video(src) {
      this.video_show_box = true;
      this.video_show = true;
      this.$set(this.playerOptions, "src", src);
      this.$nextTick(() => {
        if(document.getElementById("video-box-com")){
          document.getElementById("video-box-com").setAttribute("added", 1);
          document.body.appendChild(document.getElementById("video-box-com"));
        }
        if (document.querySelectorAll('[added="1"]').length > 1) {
          document
            .querySelectorAll('[added="1"]')[0]
            .parentNode.removeChild(
              document.querySelectorAll('[added="1"]')[0]
            );
        }
        document.querySelectorAll('[added="1"] video')[0].load();
      });
    },
    getList() {
      this.list = [
        {
          title: "教程标题",
          txt: "教程内容教程内容"
        },
        {
          title: "教程标题",
          txt: "教程内容教程内容"
        },
        {
          title: "教程标题",
          txt: "教程内容教程内容"
        }
      ];

      this.loading = true;
    }
  }
};
</script>
<style>
.jc-video-list {
  display: table;
  padding: 15px;
  margin: 0;
  padding-top: 0;
}
.jc-video-list .display-cell {
  display: table-cell;
  position: relative;
  top: 0;
  color: #333;
  vertical-align: top;
}
.jc-video-list .display-cell.textbox:before {
  content: " ";
  background-color: #eee;
  height: 1px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.jc-video-list a {
  position: static !important;
  display: block;
  color: #999;
}
.jc-video-list li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: auto;
}
.jc-video-list img {
  height: 80px;
  vertical-align: top;
  padding: 5px;
}
.jc-video-list .v-text {
  padding: 0px 15px;
  line-height: 1.75;
  font-size: 14px;
  color: #999;
  height: 80px;
  overflow: hidden;
}
.jc-video-list .v-title {
  padding: 0px 15px;
  line-height: 1.75;
  font-size: 14px;
}
.jc-video-list a:hover .v-text {
  color: #999;
}
.jc-video-list a .v-text h4 {
  color: #333;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  margin: 0;
  margin-top: 10px;
}
.jc-video-list a:hover .v-text h4 {
  color: #38a2ff;
}

.jc-video-list a:hover img {
  opacity: 0.8;
}

.video-box-g.open .video-box-mark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 4000;
}
.video-box-g.open .video-close {
  display: block;
  background-color: #f00;
  z-index: 4002;
  color: #fff;
}
.video-box-g .video-box-g-src {
  height: 200px;
  width: 300px;
  position: fixed;
  z-index: 4001;
  bottom: 0;
  left: 0;
  background-color: #fff;
  box-shadow: 0 0 30px #333;
  border-radius: 3px;
}

.video-box-g.open .video-box-g-src {
  height: 400px;
  width: 600px;
  position: absolute;
  z-index: 4001;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -200px;
  background-color: #fff;
}
.video-close {
  position: absolute;
  top: -15px;
  right: -15px;
  display: block;
  font-size: 24px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: #f00;
  z-index: 4002;
  color: #fff;
}
.video-close:hover {
  color: #eee;
  background-color: #ff4b59;
}
.video-box-g .vjs-big-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -1.5em;
  margin-top: 0.75em;
}
</style>
