<template>
  <div style="
      display: flex;
      align-items: center;
      background-color: #e2e2e2;
      height: 20px;
      padding: 5px 10px;
    ">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>{{ line }}</el-breadcrumb-item>

      <el-breadcrumb-item>{{ mileagePosition }}</el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ rank == '1' ? '上行' : '下行' }}
      </el-breadcrumb-item>

      <el-breadcrumb-item>{{ cameraCoding }}</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>{{ mileagePosition }}</el-breadcrumb-item> -->
    </el-breadcrumb>
    <div style="flex: 1" />
    <div v-if="showElectric && electricQuantity" style="display: flex; align-items: center; margin-right: 10px">
      <img src="@/assets/2.png" style="width: 20px; height: 15px; margin-right: 5px" />
      {{ electricQuantity }}%
    </div>
    <!-- <div>{{ countDownText }}</div> -->
  </div>
</template>

<script>
import { formatTime } from "@/utils/utils";
import { lineDate, lineDateProPost } from "@/api/video";

// videoLine
export default {
  name: "VideoLine",
  props: {
    cameraCode: {
      type: String,
      default() {
        return "";
      },
    },
    allCamera: {
      type: Array,
      default() {
        return "";
      },
    },
    items: {
      type: String,
      default() {
        return "";
      },
    },
    showElectric: {
      type: Boolean,
      default: true,
    }
  },
  watch: {
    allCamera: {
      handler(newVal) {
        console.log(newVal, "allallallallallallallallallall");
        newVal.filter((item, index) => {
          if (index < 4) {
            console.log(item.code, "itrrrrrrrr");
            this.cameraCode = item.code;
            this.getData(item.code);
          }
        });
      },
    },
    cameraCode: {
      handler(newValue) {
        this.getData();
      },
      immediate: true,
    },
    items: {
      handler(newValue) {
        console.log(newValue, "itemsitemsitemsitemsitems");
        if (newValue) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      cameraCode: "",
      line: "",
      mileagePosition: "",
      ranks: "",
      rank: "",
      electricQuantity: "",
      cameraCoding: "",
      countDownTimer: "",
      countDownText: "",
    };
  },
  mounted() {
    this.countDown();
  },
  beforeDestroy() {
    this.countDown("stop");
  },
  methods: {
    // 获取视频上方数据
    getData() {
      console.log(this.items, this.items === "1", "this.itemsthis.items");
      if (this.items === "1") {
        return;
      }
      console.log(this.items, "items");
      if (this.items) {
        lineDateProPost({
          id: this.items.id,
          railwayCode: this.items.railwayCode,
          alarmMile: this.items.alarmMile,
        }).then((res) => {
          if (res.code == 200) {
            console.log(res, "ressssss");
            this.line = res.data.railwayCodeName;
            this.mileagePosition = res.data.alarmMiles;
            this.ranks = res.data.lineDirStr;
            this.electricQuantity = res.data.electricity;
            this.cameraCoding = res.data.cameraCode;
            this.$store.state.lineDateProPost = res.data;
          } else {
            this.clearData();
          }
        });
        return;
      }
      console.log(this, "cameraCodecameraCodecameraCodecameraCode");
      lineDate(this.cameraCode).then((res) => {
        console.log(res, "2222");
        if (res.code == 200) {
          this.line = res.data[0];
          this.mileagePosition = res.data[1];
          this.rank = res.data[2];
          this.electricQuantity = res.data[4];
          this.cameraCoding = res.data[3];
        } else {
          this.clearData();
        }
      });
    },
    // 请除数据
    clearData() {
      this.line = "";
      this.mileagePosition = "";
      this.electricQuantity = "";
      this.cameraCoding = "";
    },
    // 倒计时
    countDown(type) {
      if (this.countDownTimer) clearInterval(this.countDownTimer);

      if (type === "stop") {
        return false;
      } else {
        this.countDownTimer = setInterval(() => {
          const time = new Date().getTime() / 1000;
          this.countDownText = formatTime(time, "Y.M.D h:m:s");
        }, 1000);
      }
    },
  },
};
</script>
