<template>
  <div class="flex">
    <span class="textStyle" :class="{ toRight0: !slideState }">数据管理</span>
    <div class="dataCard" @click="goToDSNDataPage">
      <div class="titleStyle">
        <span>DSN数据</span>
      </div>
      <div class="iconStyle" />
    </div>
    <div class="dataCard" @click="goToITUDataPage">
      <div class="titleStyle">
        <span>ITU数据</span>
      </div>
      <div class="iconStyle" />
    </div>
    <div class="dataCard" @click="goToSTDataPage">
      <div class="titleStyle">
        <span>ST数据</span>
      </div>
      <div class="iconStyle" />
    </div>
    <div class="dataCard" @click="goToESADataPage">
      <div class="titleStyle">
        <span>ESA数据</span>
      </div>
      <div class="iconStyle" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useSlideStateStore } from "@/store/slideState";

const slideStateStore = useSlideStateStore();
const { slideState } = storeToRefs(slideStateStore);
const router = useRouter();

defineProps({
  totalDataNumber: {
    type: String,
    default: "",
  },
  totalPageNumber: {
    type: String,
    default: "",
  },
  totalTargetNumber: {
    type: String,
    default: "",
  },
  successTask: {
    type: String,
    default: "",
  },
  failTask: {
    type: String,
    default: "",
  },
  unusualTask: {
    type: String,
    default: "",
  },
  speed: {
    type: String,
    default: "",
  },
  errorRate: {
    type: String,
    default: "",
  },
});

const goToAllDataPage = () => {
  router.push({
    path: "/osDataDisplay/list",
    query: {
      mode: "综合数据",
      jump: "yes",
    },
  });
};
const goToDSNDataPage = () => {
  router.push({
    path: "/osDataDisplay/list",
    query: {
      mode: "DSN数据",
      jump: "yes",
    },
  });
};
const goToITUDataPage = () => {
  router.push({
    path: "/osDataDisplay/list",
    query: {
      mode: "ITU数据",
      jump: "yes",
    },
  });
};
const goToSTDataPage = () => {
  router.push({
    path: "/osDataDisplay/list",
    query: {
      mode: "ST数据",
      jump: "yes",
    },
  });
};
const goToESADataPage = () => {
  router.push({
    path: "/osDataDisplay/list",
    query: {
      mode: "ESA数据",
      jump: "yes",
    },
  });
};
</script>

<style lang="scss" scoped>
.iconStyle {
  background-image: url("@/assets/picture/data-icon.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 5%;
  display: flex;
  // border: 1.5px solid rgb(193, 188, 188);
  height: 65%;
  width: 50%;
}

.dataCard {
  cursor: pointer;
  background-image: url("@/assets/picture/box2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background: #c6ebfc;
  // border: 1.5px solid rgb(193, 188, 188);
  width: 375px;
  height: 100%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
}

.titleStyle {
  color: #dff6ff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 8px rgba(100, 200, 255, 0.8);
  letter-spacing: 2px;
  margin-top: 15px;
}

.wordStyle {
  font-size: 20px;
  color: #ffffff;
  margin-top: 2%;
}

.textStyle {
  writing-mode: vertical-lr;
  font-size: 22px;
  letter-spacing: 3px;
  color: #ffffff;
  font-weight: 500;
  transform: translateX(-10px);
  transition: 0.2s;
}

.toRight0 {
  transform: translateX(-25px);
}
</style>
