<template>
  <div class="deviceDetails">
    <div class="deviceDetails-box">
      <div class="deviceDetails-title">
        <img
          src="../../assets/img/deviceDetails/pathPlan.png"
          alt=""
          @click="handlePathPlan()"
        />
        <img
          src="../../assets/img/deviceDetails/navigation.png"
          alt=""
          @click="handleNavigation()"
        />
        <img
          @click="handleFixedPoint()"
          src="../../assets/img/deviceDetails/fixedPoint.png"
          alt=""
        />
        <img
          @click="handleFeedingToushi()"
          src="../../assets/img/deviceDetails/Feeding.png"
          alt=""
        />
        <img
          @click="handleCamera()"
          src="../../assets/img/deviceDetails/Camera.png"
          alt=""
        />
        <img
          @click="handleReturn()"
          src="../../assets/img/deviceDetails/return.png"
          alt=""
        />
      </div>
      <div class="deviceDetails-content">
        <div class="device-box" @click="handleHistory()">
          <img src="../../assets/img/deviceDetails/lishi.png" alt="" />
          <span>历史记录</span>
        </div>
        <div class="device-box" @click="handleWater()">
          <img src="../../assets/img/deviceDetails/water.png" alt="" />
          <span>水质检测</span>
        </div>
        <div class="device-box" @click="handleFeeding()">
          <img src="../../assets/img/deviceDetails/toushi.png" alt="" />
          <span>投食记录</span>
        </div>
        <div class="device-box" @click="handleError()">
          <img src="../../assets/img/deviceDetails/guzhang.png" alt="" />
          <span>错误信息</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {},
    };
  },
  methods: {
    handleFeedingToushi() {
      this.$router.push({
        path: "/index/FeedingToushi",
      });
    },
    handleFixedPoint() {
      this.$router.push({
        path: "/index/FixedPoint",
      });
    },
    handleNavigation() {
      this.$router.push({
        path: "/index/PointNavigation",
      });
    },
    handlePathPlan() {
      this.$router.push({
        path: "/index/PathPlan",
      });
    },
    handleWater() {
      this.$router.push({
        path: "/index/waterQuality",
      });
    },
    handleFeeding() {
      this.$router.push({
        path: "/index/FeedingRecord",
      });
    },
    handleError() {
      this.$router.push({
        path: "/index/errorRecord",
      });
    },
    handleHistory() {
      this.$router.push({
        path: "/index/deviceHistory",
      });
    },
    handleCamera() {
      const tempData = localStorage.getItem("tempData");
      if (tempData) {
        this.data = JSON.parse(tempData);
      }
      this.$router.push({
        path: "/index/deviceCamera",
        query: {
          // data: JSON.stringify(this.data) // 序列化对象/数组
        },
      });
    },
    handleReturn() {
      this.$confirm("此操作将一键返航, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "返航成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消返航",
          });
        });
    },
  },
  mounted() {
    // 通过路由参数获取数据
    // if (this.$route.query.data) {
    //     this.data = JSON.parse(this.$route.query.data)
    // }
  },
  created() {},
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.deviceDetails::v-deep {
  width: 1594px;
  height: calc(100vh * 905 / 1080);
  background: #ffffff;
  border-radius: 12px;

  .deviceDetails-box {
    padding-top: 144px;
    padding-left: 30px;

    .deviceDetails-title {
      display: flex;
      align-items: center;

      > img {
        margin-left: 25px;
        cursor: pointer;
      }
    }

    .deviceDetails-content {
      display: flex;
      align-items: center;
      justify-content: center;

      .device-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 66px;
        cursor: pointer;
      }
    }
  }
}
</style>
