<template>
  <div id="header">
    <div class="fl list-con">
      <ul class="title-list">
<!--        <li @click="changeRouter(item)" v-for="item in titles.slice(0,2)" :key="item.title">-->
<!--          <span>{{item.title}}</span>-->
<!--        </li>-->
        <li class="mid_title" v-for="item in titles.slice(0,2)" :key="item.title">
          <a :href ="item.name"  class="set-header" target="_top" @click.prevent="changeRouter(item)"><span>{{item.title}}</span></a>
        </li>
        <li class="center">
          <div class="center_title">
            数据治理监控系统
          </div>
        </li>
<!--        <li @click="changeRouter(item)" v-for="item in titles.slice(2,4)" :key="item.title">-->
<!--          <span>{{item.title}}</span>-->
<!--        </li>-->
        <li class="mid_title" v-for="item in titles.slice(2,4)" :key="item.title">
          <a :href ="item.name" class="set-header" target="_top" @click.prevent="changeRouter(item)"><span>{{item.title}}</span></a>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import {useRootStore} from "@/stores/useStore";

export default {
  name: "Header",
  data() {
    return {
      titles:[
        {
          title:'数据治理',
          part:'/other/data-handle',
          name:'data-handle'
        },
        {
          title:'数据监控',
          part:'/other/data-watch',
          name:'data-watch'
        },
        {
          title:'运行监控',
          part:'/other/process-watch',
          name:'process-watch'
        },
        {
          title:'系统管理',
          part:'/other/system-manage',
          name:'system-manage'
        }
      ]
    }
  },
  methods:{
    changeRouter(item){
       this.$router.push({
         name:item.name
       })
      console.log('iassa',item)
      const store = useRootStore()
      store.pageType = item.name
      //localStorage["ptjk-part"] = item.part;
      // this.$router.push({
      //   name:item.name
      // })
      // console.log(this.$request)
      // this.$request({
      //   url:'http://10.81.66.9:9250/LogVisualization/queryLogList',
      //   method:'post',
      //   data:{
      //     unitCode:"",
      //     dateStates:"-1"
      //   }
      // }).then(res => {
      //   console.log(res)
      // })
      //parent.location.href = item.name;
    }
  }
}
</script>

<style scoped lang="scss">
$headerHeight:90px;
#header{
  margin-bottom: 20px;
  height:$headerHeight;
  color: #25a9ee;

  .list-con{

    width: 100%;
    background: url('@/assets/imgs/home/TOP.png') center no-repeat;
    background-size: 100% 100%;
  }
  .title-list{

    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;

    li{
      font-size: 20px;
      cursor: pointer;
      height: $headerHeight;
      padding-top: $headerHeight/3;
      margin: 20px 0px;
      &.mid_title{
        flex: 1;
      }
      .set-header{
        text-decoration : none;
        font-weight: bold;
        color: #25a9ee;
        //background-image:-webkit-linear-gradient(left,#0173ff,#00e3ff,#0173ff);
        //
        //-webkit-background-clip:text;
        //
        //-webkit-text-fill-color:transparent;
      }
      &.center{
        width: calc(35%);
        cursor: default;
        font-weight: bold;
        font-size: 34px;
        margin: 0 $headerHeight;
        letter-spacing: 6px;
        .center_title{
          text-align-last:justify;

          text-align:justify;

          text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
        }
        background-image:-webkit-linear-gradient(left,#0173ff,#00e3ff,#0173ff);

        -webkit-background-clip:text;

        -webkit-text-fill-color:transparent;
      }
    }
  }
}
</style>
