<template>
  <modulen>
    <template #title>视频监控</template>
    <template #end></template>
    <div class="ex-dideo-cont">
      <div class="ex-tab-top">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in tabList"
            :key="index"
            :label="item.unitName"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="ex-moniter-out">
        <div class="ex-mo-item" v-for="(item, index) in videoList" :key="index">
          <div class="ex-mo-til">{{ item.name }}</div>
          <div class="ex-mo-cont">
            <videoPlayerList
              :url="item.url"
              :code="item.code"
            ></videoPlayerList>
          </div>
        </div>
        <!-- <div class="ex-mo-item">
          <div class="ex-mo-til">B</div>
          <div class="ex-mo-cont"></div>
        </div> -->
      </div>
    </div>
  </modulen>
</template>

<script>
import { serviceareaVideo } from "@/api/expressway.js";
import { getVideoUrl } from "@/api/operation";
import videoPlayerList from "./videoPlayList.vue";
export default {
  components: { videoPlayerList },
  data() {
    return {
      activeName: '0',
      tabList: [{
        label: '潼南服务区',
        name: 'tn'
      }],
      videoList: [],
      query: {
        dimension: '',
        level: ''
      }
    }
  },
  computed: {
    selectRoad() {
      return this.$store.state.road.selectRoadId
    },
  },
  watch: {
    getAppDate(newVal) {
      this.query.timeflag = newVal
      this.getData()
    },
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel
      const roadId = newVal ? newVal[level - 1] : ''
      this.query.level = level
      this.query.dimension = roadId
      this.getData()
    }
  },
  mounted() {

  },
  methods: {
    //服务区树结构
    async getData() {
      const data = await serviceareaVideo(this.query)
      let servevideoList = []
      data.msgContent.forEach((item, index) => {
        const isFilter = servevideoList.filter(ele => ele.unitName == item.unitName)
        if (isFilter.length > 0) {
          servevideoList.forEach(val => {
            if (val.unitName == item.unitName) {
              val.videolist.push({
                videoId: item.videoId,
                videoName: item.videoName
              })
            }
          })
        } else {
          item.videolist = []
          item.videolist.push({
            videoId: item.videoId,
            videoName: item.videoName
          })
          servevideoList.push(item)
        }
      });
      this.tabList = servevideoList
      this.getVideo(this.tabList[0].videolist)
    },
    // tab选择器数据改变
    handleClick(tab) {
      this.getVideo(this.tabList[tab.index].videolist)
    },
    getVideo(list) {
      this.videoList = []
      const _that = this
      list.forEach(async (ele, index) => {
        if (index < 2) {
          const resurl = await getVideoUrl(ele.videoId);
          if (resurl && resurl.success && resurl.data) {
            _that.videoList.push({
              url: resurl.data,
              name: ele.videoName,
              code: ele.videoId
            })
          }
        }

      });
    }

  }
}
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.ex-dideo-cont {
  width: 100%;
  .ex-tab-top {
    margin-top: vh(20);
  }
  .ex-moniter-out {
    margin-top: vh(15);
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .ex-mo-item {
    width: 49%;
  }
  .ex-mo-til {
    width: 100%;
    height: vh(17);
    line-height: vh(17);
    padding-left: 10px;
    font-size: VW(13);
    background: linear-gradient(90deg, #4a9bff, transparent, transparent);
  }
  .ex-mo-cont {
    width: 100%;
    height: vh(130);
    border: 1px solid #5277c0;
    padding: 1px;
  }
}
::v-deep .el-tabs__item {
  color: #bbcad8 !important;
  text-shadow: none;
  padding: 0 2px !important;
  height: 20px !important;
  line-height: 20px !important;
  margin-left: 12px;
}
::v-deep .el-tabs__nav-prev {
  line-height: 20px !important;
  color: #fff;
  background: #27496e;
}
::v-deep .el-tabs__nav-next {
  line-height: 20px !important;
  color: #fff;
  background: #27496e;
}

::v-deep .el-tabs__item:hover {
  background: #4999ff;
  color: #fff !important;
}
::v-deep .el-tabs__item.is-active {
  background: #4999ff;
  color: #fff !important;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0 !important;
}
::v-deep .el-tabs__active-bar {
  height: 0 !important;
}
</style>