<template>
  <div class="project-photography main-page">
    <el-col :span="6" class="h100">
      <module-one-1-1 label="项目全景">
        <div class="photography-list">
          <template v-if="photographyList && photographyList.length > 0">
            <el-carousel height="100%" :autoplay="false">
              <el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
                <video controls="controls" class="photography-video" loop="loop">
                  <source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />
                  您的浏览器不支持Video标签。
                </video>
                <div class="photography-list-title">{{ item.videoDate }}</div>
              </el-carousel-item>
            </el-carousel>
          </template>
          <template v-else>
            <div class="photography-list-nodata">
              <div>
                <i class="video-play">
                  <svg
                    class="icon"
                    style="
                      width: 30px;
                      height: 30px;
                      vertical-align: middle;
                      fill: currentColor;
                      overflow: hidden;
                    "
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4551"
                  >
                    <path
                      d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z"
                      fill="#3D3D3D"
                      p-id="4552"
                    />
                  </svg>
                </i>
              </div>
              <div class="photography-list-no-title">暂无数据</div>
            </div>
          </template>
        </div>
      </module-one-1-1>
      <module-one-2-1 label="进行中的计划">
        <div
          class="equipment-list-min equipment-list-min_div quality-target-index-min quality-target-index-min_div"
        >
          <div class="czz-number-img czz-number-img-blue">
            <svg-icon icon-class="notesearch"></svg-icon>
          </div>
          <div>
            <div class="equipment-list-data equipment-list-data_div_top">
              <span>测试计划名称1</span>
            </div>
            <div class="equipment-list-data equipment-list-data_div_bottom">
              <span class="sp-data">{{ it.value || 0 }}</span>
            </div>
          </div>
        </div>
        <div
          class="equipment-list-min equipment-list-min_div quality-target-index-min quality-target-index-min_div"
        >
          <div class="czz-number-img czz-number-img-blue">
            <svg-icon icon-class="notesearch"></svg-icon>
          </div>
          <div>
            <div class="equipment-list-data equipment-list-data_div_top">
              <span>测试计划名称2</span>
            </div>
            <div class="equipment-list-data equipment-list-data_div_bottom">
              <span class="sp-data">{{ it.value || 0 }}</span>
            </div>
          </div>
        </div>
      </module-one-2-1>
    </el-col>
    <el-col :span="18" class="no-title">
      <module-one-3-3 :notitle="true">
        <template v-if="info">
          <div class="right-title">
            <span class="sp-title">{{ info.videoDate }}</span>
          </div>
          <video style="width: 98%" controls>
            <source :src="info.videoUrl" type="video/mp4" />
            您的浏览器不支持Video标签。
          </video>
        </template>
        <div v-else style="text-align: center" class="div-no-data">
          <img src="images/nodata.png" style="width: 120px" />
          <div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
        </div>
      </module-one-3-3>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photographyList: [],
      info: null,
      activeNames: [],
      infoList: {},
    };
  },
  mounted() {
    window.photography = this;
    this.$store.dispatch("ChangeNav", 502);
    this.$bus.$on("projectChange", (prj) => {
      this.selProject = prj;
      this.init();
    });
    this.selProject = this.$store.getters.selProject;
    this.init();
  },
  methods: {
    init() {
      if (!this.selProject) {
        return;
      }
      this.initPhotographyList();
    },
    initPhotographyList() {
      this.$api.detail.photographyList(this.selProject.id).then((d) => {
        this.photographyList = d.data;
      });
    },
  },
};
</script>

<style lang="less">
.project-photography {
  .div-no-data {
    text-align: center;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .no-title {
    .right-title {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sp-title {
      display: inline-block;
      line-height: 72px;
      padding: 0px 40px;
      font-size: 40px;
      background-size: 100% 100%;
      background-image: url("../../assets/images/bgphoto.png");
    }
    video {
      width: 100%;
      height: calc(100% - 201px);
    }
    /deep/ .screen-one-3-3 {
      background-image: none;
      border: solid 1px #409eff5c;
      .module-title {
        display: none;
      }
    }
  }
  .left-list {
    max-height: calc(100% - 40px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
  }
  .screen-one-3-1 {
    height: calc(100% - 20px) !important;
    .left-list {
      padding: 10px 10px 10px 0px;
      .video-item {
        line-height: 40px;
        border: solid 1px #1e8fff83;
        padding: 0px 20px;
        margin-top: 10px;
        position: relative;
        cursor: pointer;
        &:first-child {
          margin-top: 0px;
        }
        .header-icon {
          position: absolute;
          right: 10px;
          top: 10px;
        }
        &.is-active {
          background-color: #089fff;
          color: #fff;
          &:hover {
            background-color: #089fff;
            color: #fff;
          }
        }
        &:hover {
          background-color: #08a0ff95;
          color: #fff;
        }
      }
    }
  }
  /deep/ .screen-one-3-1 {
    .el-collapse {
      border: none;
      margin-top: 4px;

      .el-collapse-item {
      }

      .el-collapse-item__header {
        background-color: #097fca2e;
        color: #089fff;
        border-bottom: dotted 1px #089fff77;
      }

      .el-collapse-item__content {
        padding-bottom: 12px;
      }

      .el-collapse-item__wrap {
        background-color: transparent;
        border: none;
        .img-item {
          margin-top: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          color: #fff;
          position: relative;
        }
        .video-item {
          position: relative;
          line-height: 30px;
          display: flex;
          align-items: center;
          cursor: pointer;
          border-bottom: solid 1px #089fff77;
          .div-date {
            width: calc(90% - 24px);
            text-align: left;
            bottom: 0px;
            color: #089fff;
            padding-left: 24px;
          }
        }
      }
    }
  }
}
</style>
