<template>
  <div class="deviceCamera">
    <el-button
      style="position: absolute; top: 66px; left: 66px"
      size="medium"
      round
      icon="el-icon-back"
      @click="handleBack()"
      >返回</el-button
    >
    <div class="deviceCamera-left">
      <div class="deviceCamera-title">
        <span>{{ data.name }}</span>
        <div class="video">
          <iframe
            width="100%"
            height="100%"
            frameborder="0"
            id="ysOpenDevice"
            :src="iframeSrc"
            allowfullscreen
          >
          </iframe>
        </div>
      </div>
    </div>
    <div class="deviceCamera-right">
      <div class="deviceCamera-right-title">
        <img src="../../assets/img/deviceDetails/ship.png" alt="" />
        <span>25</span>
        <span>船只编号</span>
      </div>
      <div class="deviceCamera-right-content">
        <div class="deviceCamera-item">
          <img
            src="../../assets/img/deviceDetails/gongzuozhuangtai.png"
            alt=""
          />
          <span>正常</span>
          <span>工作状态</span>
        </div>
        <div class="deviceCamera-xiantiao"></div>
        <div class="deviceCamera-item">
          <img src="../../assets/img/deviceDetails/sudu.png" alt="" />
          <span>4m/s</span>
          <span>当前速度</span>
        </div>
      </div>
      <div class="deviceCamera-right-content2">
        <div class="datacontent">
          <div class="data-row">
            <span class="data-label">经度：</span>
            <span>5285</span>
          </div>
          <div class="data-row">
            <span class="data-label">纬度：</span>
            <span>256</span>
          </div>
        </div>
        <div class="datacontent">
          <div class="data-row">
            <span class="data-label">偏航角度：</span>
            <span>6985</span>
          </div>
          <div class="data-row">
            <span class="data-label">俯仰角度：</span>
            <span>6141</span>
          </div>
        </div>
      </div>
      <div class="deviceCamera-right-content3">
        <img src="../../assets/img/deviceDetails/dianyuan.png" alt="" />
        <div class="deviceCamera-right-content3-title">
          <span>电量</span>
          <span>100%</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      data: {
        name: "",
      },
      token: "",
    };
  },
  methods: {
    GetToken() {
      axios
        .post(
          "https://open.ys7.com/api/lapp/token/get",
          {
            appKey: "baf82eae9cce4c7b9306a8b992e25ef8",
            appSecret: "36fb23c7e3afcaf85024139c1468bcb6",
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
              Accept: "application/json",
            },
          }
        )
        .then((res) => {
          this.token = res.data.data.accessToken;
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    },
    handleBack() {
      this.$router.push({
        name: "deviceDetails",
      });
    },
  },
  mounted() {
    const tempData = localStorage.getItem("tempData");
    if (tempData) {
      this.data = JSON.parse(tempData);
    }
    // 通过路由参数获取数据
    // if (this.$route.query.data) {
    //     this.data = JSON.parse(this.$route.query.data)
    // }
    this.GetToken();
  },
  created() {},
  computed: {
    iframeSrc() {
      return `https://open.ys7.com/console/jssdk/pc.html?accessToken=${this.token}&url=ezopen://open.ys7.com/BE4405574/1.hd.live`;
    },
  },
};
</script>
<style lang="scss" scoped>
.deviceCamera::v-deep {
  display: flex;

  .deviceCamera-left {
    width: 1174px;

    .deviceCamera-title {
      > span {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 22px;
        color: #000000;
        margin-top: 99px;
        display: block;
      }
    }

    .video {
      width: 1090px;
      height: 613px;
      margin-left: 42px;
      margin-top: 30px;
    }
  }

  .deviceCamera-right {
    width: 400px;

    // 顶部船信息
    .deviceCamera-right-title {
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 33px;

      > span:nth-child(2) {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 26px;
        color: #000000;
        display: block;
      }

      > span:nth-child(3) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #8c95a4;
        display: block;
      }
    }

    // 船的状态信息
    .deviceCamera-right-content {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      margin-top: 42px;

      .deviceCamera-item {
        display: flex;
        align-items: center;
        flex-direction: column;

        > span:nth-child(2) {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 20px;
          color: #000000;
          display: block;
        }

        > span:nth-child(3) {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #8c95a4;
          line-height: 70px;
        }
      }

      // 中间线条
      .deviceCamera-xiantiao {
        width: 1px;
        height: 116px;
        background: #e2eaf3;
      }
    }

    // 船的轨迹信息
    .deviceCamera-right-content2 {
      display: flex;
      flex-direction: row;
      margin-left: 75px;

      .datacontent {
        display: flex;
        flex-direction: column;

        .data-row {
          display: flex;

          > span:nth-child(2) {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #000000;
            margin: 10px;
          }

          .data-label {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #8c95a4;
            margin: 10px;
          }
        }
      }
    }

    // 电源
    .deviceCamera-right-content3 {
      margin-top: 40px;

      .deviceCamera-right-content3-title {
        > span:nth-child(1) {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #8c95a4;
        }

        > span:nth-child(2) {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 20px;
          color: #000000;
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
