<template>
  <el-card
    body-style="{padding:'0px'}"
    style="height: calc(100vh - 113px)"
    class="dashboard-container"
  >
    <el-container style="height: 100%" class="videoService">
      <el-aside
        style="
          padding: 10px 20px 30px 30px;
          box-shadow: rgb(193 193 193) 0px 0px 10px;
        "
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            "
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                justify-content: center;
                width: 250px;
                background: #eee;
                height: 40px;
                color: #2766dd;
              "
            >
              相机列表
              <!-- <span style="color: #2766dd">{{ facilityQuantity }}</span> -->
            </div>
            <!-- <div></div> -->
          </div>
        </div>

        <el-input
          v-model="searchText"
          class="input-with-select"
          placeholder="请输入相机编码或线路名称"
          style="margin-top: 10px"
          suffix-icon="el-icon-search"
          clearable
          @change="cameraTree"
        />
        <div
          style="
            font-size: 14px;
            float: right;
            position: relative;
            top: 8px;
            width: 50px;
            text-align: center;
            color: #f7f8f8;
            background: #2766dd;
            padding: 5px;
            border-radius: 2px;
            cursor: pointer;
          "
          @click="clicks"
        >
          重置
        </div>
        <el-menu
          :default-active="cameraTreeIndex"
          style="
            margin-top: 40px;
            height: calc(100% - 130px);
            visibility: auto;
            overflow-y: auto;
          "
        >
          <div
            style="
              color: #b9b9b9;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            v-if="cameraTreeData.length <= 0"
          >
            暂无数据
          </div>
          <!--1级-->
          <el-submenu v-for="item1 in cameraTreeData" :index="item1.index">
            <template slot="title">
              <div style="height: 100%; display: flex; align-items: center">
                <img
                  src="@/assets/1.png"
                  style="margin-right: 5px; width: 15px"
                />
                <div>{{ item1.name }}</div>
              </div>
            </template>

            <!--2级-->
            <template v-for="item2 in item1.children">
              <template v-if="item2.children.length > 0">
                <!--2级有下级-->
                <el-submenu :index="item2.index">
                  <template slot="title">{{ item2.name }}</template>

                  <!--3级-->
                  <!-- @click="videoPlay(item3.code, item2.index)" -->
                  <el-menu-item
                    v-for="item3 in item2.children"
                    :index="item3.index"
                  >
                    <el-checkbox
                      :disabled="getNum(item3.code)"
                      @change="checkboxClick(item3.code)"
                      v-model="checkboxObj[item3.code]"
                      ><img
                        src="@/assets/2.png"
                        style="
                          width: 20px;
                          height: 15px;
                          margin-bottom: 3px;
                          margin-right: 3px;
                        "
                      />
                      {{ item3.name }}</el-checkbox
                    >
                  </el-menu-item>
                </el-submenu>
              </template>
              <template v-else>
                <!--2级无下级-->
                <!-- @click="videoPlay(item2.code, item2.index)" -->
                <el-menu-item :index="item2.index">
                  <el-checkbox
                    :disabled="getNum(item2.code)"
                    @change="checkboxClick(item2.code)"
                    v-model="checkboxObj[item2.code]"
                    ><img
                      src="@/assets/2.png"
                      style="
                        width: 20px;
                        height: 15px;
                        margin-bottom: 3px;
                        margin-right: 3px;
                      "
                    />
                    {{ item2.name }}</el-checkbox
                  >
                </el-menu-item>
              </template>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>

      <playback
        style="padding: 60px 20px 20px 20px"
        :videoType="videoType"
        @getType="getType"
        :checkboxArr="checkboxArr"
        :cameraCode="cameraCode"
        @tabChange="palyAndPlaybackTabChange"
        :getAllCamera="this.getFirstRedioList"
      ></playback>
    </el-container>
  </el-card>
</template>
  
  <script>
import { mapGetters } from "vuex";
import videoLine from "@/components/videoPlayer/videoLine";
import videoPlayer from "@/components/videoPlayer/videoPlayer";
import playback from "./playback";
// import cameraInfoMessage from "@/components/videoPlayer/cameraInfoMessage";
import {
  cameraTree,
  invite,
  records,
  videoQuantity,
  lineDate,
  videoHistoricalAlarm,
  getAlarm,
  beseGetCameraCode,
} from "@/api/video";

export default {
  name: "videoService",
  components: { videoLine, videoPlayer, playback },
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      checkboxArr: [],
      checkboxObj: {},
      videoList: [],
      type: 0,
      getFirstRedioList: [],
      getSecondRedioList: [],
      isShow: true,
      cameraCode: "", // [摄像机] 当前选择码
      cameraTreeIndex: "-1", // 当前选择
      cameraTreeData: [], // 视频树
      facilityQuantity: "", // 设备数量
      searchText: "",
      videoType: 1, // [摄像机] 当前/历史视频
      cameraInfo: {
        // 当前摄像机信息
        cameraCode: "",
        alarmType: "",
        lineDir: "",
        deptId: "",
        alarmMile: "",
        beginMile: "",
        installLongitude: "",
        releasedTime: "",
      },
      historicalAlarm: {}, // [摄像机]历史数据
    };
  },
  mounted() {
    this.cameraTree();
    // this.videoQuantity();
  },
  methods: {
    clicks() {
      this.checkboxObj = {};
      Object.keys(this.checkboxObj).map((item) => {
        this.checkboxObj[item] = false;
      });

      this.checkboxArr = JSON.parse(JSON.stringify([{}, {}, {}, {}]));
      this.cameraTreeData = JSON.parse(JSON.stringify(this.cameraTreeData));
      
      Array.from(document.querySelectorAll(".el-card__body .el-menu:nth-of-type(1) input")).map(item => {
        if(item.checked){
          item.click()
        }
      })

      this.$forceUpdate();
    },
    getNum(code) {
      var index = this.type === 0 ? 1 : 4;
      var defind =
        this.checkboxArr.filter((res) => res.cameraCode).length === index;
      if (defind) {
        return !this.checkboxArr.filter((res) => res.cameraCode === code)
          .length;
      }
      return defind;
    },
    getType(res) {
      this.type = res;
      var index = this.type === 0 ? 1 : 4;
      this.checkboxArr.length = index;
      Object.keys(this.checkboxObj).map((item) => {
        this.checkboxObj[item] = false;
      });
      for (let index = 0; index < this.checkboxArr.length; index++) {
        // const element = this.checkboxArr[index];
        // if (element) {
        this.checkboxArr[index] = {};
        // }
      }
      this.checkboxArr = JSON.parse(JSON.stringify(this.checkboxArr));
    },
    checkboxClick(key, value) {
      var checkboxArr = JSON.parse(JSON.stringify(this.checkboxArr));
      if (!this.checkboxObj[key]) {
        for (let i = 0; i < checkboxArr.length; i++) {
          if (checkboxArr[i].cameraCode === key) {
            checkboxArr[i] = {};
          }
        }
      } else {
        const data = {
          cameraCode: key,
          value: this.checkboxObj[key],
        };
        for (let index = 0; index < checkboxArr.length; index++) {
          const item = checkboxArr[index];
          if (!item.cameraCode) {
            checkboxArr[index] = data;
            break;
          }
        }
        console.log(key, "fffff");
        beseGetCameraCode(key).then((res) => {
          for (let i = 0; i < this.checkboxArr.length; i++) {
            if (this.checkboxArr[i].cameraCode === key) {
              this.checkboxArr[i].src = res.data.url + "?" + Math.random();
            }
          }
          this.checkboxArr = JSON.parse(JSON.stringify(this.checkboxArr));
        });
      }

      if (
        checkboxArr.filter((item) => item.cameraCode).length > 4 &&
        this.checkboxObj[key]
      ) {
        this.checkboxObj[key] = false;
        this.checkboxObj = JSON.parse(JSON.stringify(this.checkboxObj));
        checkboxArr.splice(checkboxArr.length - 1, 1);
      }

      this.checkboxArr = JSON.parse(JSON.stringify(checkboxArr));
    },
    // 视频播放
    videoPlay(val, index) {
      this.videoType = 1;
      if (index) this.cameraTreeIndex = index;
      this.cameraCode = val;
    },
    // 获取摄像机树
    cameraTree() {
      cameraTree({
        railwayCode: this.searchText,
      }).then((res) => {
        this.cameraTreeData = [];
        // console.log(res.data.children,'dataaaaaaaaaaaaa..................')

        let code = "";

        this.cameraTreeData = res.data.children.map((item, index) => {
          item.index = `${index}`;
          item.label = item.name;
          item.value = item.code;
          item.isSelect = false;

          if (item.children && item.children.length > 0) {
            item.isVideo = false;

            // 第二级
            item.children.map((item2, index2) => {
              this.getFirstRedioList.push(item2);
              console.log(this.getFirstRedioList, "*********");
              item2.index = `${index}-${index2}`;
              item2.label = item2.name;
              item2.value = item2.code;
              item2.isSelect = false;

              if (item2.children && item2.children.length > 0) {
                item2.isVideo = false;

                // 第三级
                item2.children.map((item3, index3) => {
                  item3.index = `${index}-${index2}-${index3}`;
                  item3.label = item3.name;
                  item3.value = item3.code;
                  item3.isSelect = false;
                  item3.isVideo = true;

                  if (code == "") {
                    code = item3.code;
                    this.cameraTreeIndex = item3.index;
                  }

                  return item3;
                });
              } else {
                item2.isVideo = true;
                if (code == "") {
                  code = item2.code;
                  this.cameraTreeIndex = item2.index;
                }
              }

              return item2;
            });
          } else {
            item.isVideo = true;
            if (code == "") {
              code = item.code;
              this.cameraTreeIndex = item.index;
            }
          }

          return item;
        });
        console.log(this.cameraTreeData, "this.cameraTreeData**//////");

        this.$set(this.cameraTreeData);
        if (code) this.videoPlay(code);
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px 30px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

::v-deep .el-submenu__title {
  height: 45px;
}

::v-deep .el-submenu .el-menu-item {
  height: 42px;
  line-height: 42px;
  padding: 0 45px;
  min-width: 200px;
}

::v-deep .el-card__body {
  height: 100%;
  padding: 0;
}

::v-deep .el-menu {
  border: none;
}

.el-menu--horizontal > .el-menu-item.is-active {
  background-color: #20a0ff;
  color: #ffffff;
  height: 35px;
  line-height: 35px;
}

.el-menu-item.is-active {
  background-color: #2766dd;
  color: #ffffff;
}

.el-menu--horizontal > .el-menu-item {
  height: 35px;
  line-height: 35px;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus {
  box-shadow: none;
}

.el-card {
  border: 1px solid#FFFF;
  background-color: #fff;
}
</style>
  
  <style lang="scss">
.videoService {
  .el-aside .el-menu-item.is-active {
    background: #e9f1f7 !important;
    color: #2866dd !important;
  }

  .el-menu-item:hover {
    background: #e4e4e4 !important;
  }
}
.className1 {
  background: #000;
  .jessibuca-container {
    height: calc(100% - 20px);
  }
}
</style>