<template>
  <div style="padding-top: 14vw">
    <TopNav navTitle="警情分析" />
    <TopSelectTime @chenge:time="onSelectTime" />
    <div class="jqfx_box">
      <compareFx :timeActive="timeActive" :keyIndex="keyIndex" />
      <!-- <van-tabs
        v-model:active="active"
        @click-tab="getNav"
        title-active-color="rgb(60, 156, 255)"
        color="rgb(60, 156, 255)"
        :background="backgroundColor"
        :title-inactive-color="inactive"
      >
        <van-tab title="对比分析">
          <compareFx :timeActive="timeActive" :keyIndex="keyIndex" />
        </van-tab>
        <van-tab title="四高分析">
          <fourTallFx :timeActive="timeActive" :keyIndex="keyIndex" />
        </van-tab>
        <van-tab title="专题分析">
          <dqscFx :timeActive="timeActive" :keyIndex="keyIndex" />
        </van-tab>
      </van-tabs> -->
      <!-- <u-tabs :list="navList" @click="getNav" :activeStyle="{color: '#fff'}"
					:inactiveStyle="{color:'#7188AF'}"
					itemStyle="display:flex;justify-content: space-around;padding-left:15px;padding-right:15px; height:42.5px;">
				</u-tabs> -->
      <!-- </van-sticky> -->
    </div>
  </div>
</template>

<script setup>
import dqscFx from "./dqscFx.vue";
import compareFx from "./compareFx.vue";
import fourTallFx from "./fourTallFx.vue";
import TopNav from "../../../components/topNav.vue";
import TopSelectTime from "../../../components/topSelectTime.vue";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const keyIndex = ref(1);
const active = ref(0);
const backgroundColor = ref("#fff");
const inactive = ref("#333");
const timeActive = ref(0);
// onActivated(() => {
//   const route = useRoute();
//   try {
//     if (route.query.jqlx == "jmjq") {
//       keyIndex.value++;
//     }
//   } catch (error) {}
// });
onMounted(() => {
  if (getStorage("themeSetting") == "light") {
    backgroundColor.value = "#fff";
    inactive.value = "#333";
  } else {
    backgroundColor.value = "#041634";
    inactive.value = "#fff";
  }
});
function getNav(item) {
  active.value = item.name;
}
function onSelectTime(val) {
  timeActive.value = val;
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.jqfx_box {
  padding-bottom: 2vw;
}
::v-deep .van-tabs__nav {
  @include bg_color($background-color-theme);
}
::v-deep .van-tabs__nav--card {
  margin: 0 1vw;
}
</style>
