<template>
  <header>
    <div class="flex flex v-center between relative">
      <nav class="flex">
        <router-link :to="`/datav/subOneVideoInsp?departId=`+ deptId" v-slot="{ isActive }">
          <span>视频督察</span>
          <img :src="isActive ? Img2 : Img1" alt=""/>
        </router-link>
        <router-link :to="`/datav/subOneSceneInsp?departId=`+deptId" v-slot="{ isActive }">
          <span>监督管理</span>
          <img :src="isActive ? Img2 : Img1" alt=""/>
        </router-link>
        <router-link :to="`/datav/subOneCaseVerif?departId=`+ deptId" v-slot="{ isActive }">
          <span>案件核查</span>
          <img :src="isActive ? Img2 : Img1" alt=""/>
        </router-link>

      </nav>
      <h1>
        <router-link :to="`/datav/subOneGlobal?departId=`+ deptId" >
          <span>{{ departName  }}数字督察一体化平台</span>
        </router-link>
      </h1>
      <nav class="flex right">
        <router-link :to="`/datav/subOneJwpy?departId=`+ deptId" v-slot="{ isActive }">
          <span>民意感知</span>
          <img :src="isActive ? Img2 : Img1" alt=""/>
        </router-link>
        <router-link :to="`/datav/subOneMailVisits?departId=`+ deptId" v-slot="{ isActive }">
          <span>信访投诉</span>
          <img :src="isActive ? Img2 : Img1" alt=""/>
        </router-link>
        <router-link  :to="`/datav/subOneRightsComfort?departId=`+ deptId"  v-slot="{ isActive }">
          <span>维权抚慰</span>
          <img :src="isActive ? Img2 : Img1" alt=""/>
        </router-link>
      </nav>
    </div>
  </header>
</template>
<script setup>
import Img1 from '/imgs/datav/base.png'
import Img2 from '/imgs/datav/base_active.png'
import useUserStore from "@/stores/modules/user";
const props =defineProps({
  departId:{
    default:null
  },
  departName:{
    type:String,
    default:'长沙公安'
  }
})

const userStore = useUserStore();

let deptId = ref();
let departName = ref()
watch(()=>props.departId,(newVal)=>{
  console.log('new',newVal)
  if(newVal == null){
    console.log(userStore.user)
    deptId.value= userStore.user.departId;
    departName.value =userStore.user.departName;
  }else{

    deptId.value = newVal;
    departName.value = props.departName
  }
},{deep:true,immediate:true})






</script>
<style lang="scss" scoped>
header {
  color: #fff;
  margin-bottom: 20px;
  position: relative;

  &::before {
    display: block;
    content: "";
    position: absolute;
    width: 73.5%;
    height: 213px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("/imgs/datav/bg-1.png");
    z-index: 0;
  }

  h1 {
    font-family: PangMenZhengDao;
    font-size: 48px;
    line-height: 1;
    letter-spacing: 2px;
    margin: 0;
    white-space: nowrap;
  }

  nav {
    a {
      color: inherit;
      text-decoration: none;
      text-align: center;
      font-size: 19px;
    }

    span {
      display: block;
    }

    img {
      display: block;
      margin-top: -12px;
    }

    &.right {
      img {
        transform: scaleX(-1);
      }
    }
  }
}

:deep() {
  a {
    color: inherit;
    text-decoration: none;
  }
}
</style>
