<template>
  <div class="box">
    <div class="boxTop" ref="boxTop">
      <img
        class="img"
        src="../images/369a8784c99e23f956099a59f7bdfa1.png"
        alt=""
        srcset=""
      />
      <span>数据中心</span>
      <div class="divSpan">
        ∣<span @click="tab1" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }"
          >产品系统介绍</span
        >
        ∣
        <span @click="tab2" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }"
          >产品视频介绍</span
        >
      </div>
    </div>
    <div class="boxB" style="height: 100%" ref="box" v-show="show">
      <!-- <img id="img"  @click="imgClick" src="@/assets/pdf.png"  /> -->
      <!-- ppt -->
      <div
        class="divImg"
        v-for="item in PPTList"
        :key="item.id"
        @click="imgClick(item)"
      >
        <img class="imgs" :src="item.picUrl" />
        <span style="color: rgb(7, 216, 253)">{{ item.resourceName }}</span>
      </div>
    </div>
    <div class="boxB" style="height: 100%" v-show="!show">
      <!-- mp4 -->
      <div
        class="divImg"
        v-for="item in MP4List"
        :key="item.id"
        @click="videoMp4(item)"
      >
        <img class="imgs" :src="item.picUrl" />
        <span style="color: rgb(7, 216, 253)">{{ item.resourceName }}</span>
      </div>
    </div>
    <!-- <video v-if="showvideo"
      controls
      autoplay
      src="/device-boot/resource/play1?id=c4e4616e3aa630e5c3883807985a6cb8"
    /> -->
    <el-dialog
      :close-on-click-modal="false"
      :title="titleVideo"
      :visible.sync="showvideo"
      v-if="showvideo"
      width="90%"
      :append-to-body="true"
    >
      <!-- v-if="showvideo" -->
      <video style="height: 85vh" controls="controls" autoplay :src="src" />
    </el-dialog>
    <!-- <el-dialog :close-on-click-modal="false"
      title="PPT目录"
      :visible.sync="dialogVisible"
      
      width="60%"
      :append-to-body="true"
    >
      <div class="imgDiv" ref="imgDiv">
        <img
          id="img1"
          @click="clickImg('./static/pdf/XTJS.pdf')"
          src="@/assets/XTJS.png"
        />
        <img
          id="img2"
          @click="clickImg('./static/pdf/XTYY.pdf')"
          src="@/assets/YYJS.png"
        />
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import { queryData, play } from "@/api/center/DropEvent.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      flag: 0,
      show: true,
      dialogVisible: false,
      MP4List: [],
      PPTList: [],
      src: "",
      showvideo: false,
      titleVideo: "",
    };
  },
  created() {
    this.infoZ();
    this.infoO();
  },

  mounted() {
    // document.getElementById("img").style.height =
    //   this.$refs.box.offsetHeight - this.$refs.boxTop.offsetHeight - 20 + "px";

    // el-dialog__body
    this.tab1();
  },

  methods: {
    infoZ() {
      queryData({
        type: 0,
        state: 0,
      }).then((res) => {
        this.PPTList = res.data;
      });
    },
    infoO() {
      queryData({
        type: 1,
        state: 0,
      }).then((res) => {
        this.MP4List = res.data;
      });
    },
    async videoMp4(e) {
      let message = null;
      message = this.$message({
        showClose: true,
        message: "  视频加载中，请稍等......",
        iconClass: "el-icon-loading",
        duration: 0,
      });
      this.titleVideo = e.resourceName;
      await play({
        id: e.id,
      })
        .then((res) => {
          this.src = window.URL.createObjectURL(res);
          message.close();
        })
        .catch(() => {
          message.close();
        });
      this.showvideo = true;
    },
    async imgClick(e) {
      // await play({
      //   id: e.id,
      // }).then((res) => {
      window.open(e.resUrl);
      // });
      // let height = document.getElementsByClassName("el-dialog__body");

      // setTimeout(() => {
      //   let height =
      //     document.getElementsByClassName("el-dialog__body")[0].offsetHeight +
      //     "px";
      //   document.getElementById("img1").style.height = height;
      //   document.getElementById("img2").style.height = height;
      // }, 100);
    },
    clickImg(e) {
      let test = window.open(e); // 直接写成这样的地址
    },
    tab1() {
      this.infoZ();
      this.flag = 0;
      this.show = true;
    },
    tab2() {
      this.infoO();
      this.flag = 1;
      this.show = false;
    },
  },
  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../css/home.less");
@font-face {
  font-family: sszh;
  src: url("../fonts/sszh.ttf"); /* IE9+ */
}
.box {
  width: 100%;
  height: 100%;
  .boxTop {
    display: flex;
    align-items: center;
    height: 8%;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 0.85rem;
    line-height: 8%;
    // background-color: #29707f;
    letter-spacing: 1px;
    color: #07d8fd;
    cursor: pointer;
    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
    .img {
      height: 100%;
      padding: 0 1.5%;
      cursor: pointer;
    }
    .divSpan {
      padding-left: 5%;
      font-size: 0.85rem;
      color: #fff;
    }
  }
  .boxBot {
    height: 90%;
    // background-color: rgb(41, 16, 16);
  }
  .boxB {
    padding: 10px;
    height: 90% !important;
    width: 100%;
    /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
    background-size: cover;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    left: 0;
    top: 9%;
  }
  .divImg {
    height: 80px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 1%;
  }
  .imgs {
    vertical-align: bottom;
    cursor: pointer; //鼠标滑过变成小手
    height: 100% !important;
  }
}
::v-deep .el-dialog {
  // background-color: transparent;
  border: 1px solid #1697de;
  background-color: rgba(33, 57, 83, 0.6);

  .el-dialog__header {
    // background-color: transparent ;
    background-color: rgba(33, 57, 83, 0.6);

    border-bottom: 1px solid #1697de;
  }
  .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: rgb(7, 216, 253);
  }
}
.imgDiv {
  display: flex;
  width: 100%;
  justify-content: space-around;
  img {
    width: 45%;
    vertical-align: bottom;
    cursor: pointer; //鼠标滑过变成小手
  }
}
::v-deep .el-dialog {
  margin-top: 2% !important;
}
::v-deep .el-dialog__body {
  padding: 10px;
  max-height: none !important;
  display: flex;
  justify-content: center;
}
</style>
