<template>
  <el-container class="flex newcim-header">
    <div class="flex ai-c max-h" style="width: 600px;">
      <span class="header-title">农业农村时空大数据平台底座</span>
    </div>
    <div class="flex">
      <div v-for="(item,index) in navList" :key="index" class="flex fz-16 fc-w nav-ul">
        <div class="flex nav-li ai-c jc-c" :class="navIndex==index?'active':''" @click="sendMapButton(item, index)">{{ item }}</div>
      </div>
      <div class="flex fz-16 fc-w nav-ul" v-if="navIndex == 3">
        <div class="flex nav-liother ai-c jc-c">土地资源</div>
        <div class="flex nav-liother ai-c jc-c">房屋</div>
        <div class="flex nav-liother nav-liotherlang ai-c jc-c">农业生产设施</div>
        <div class="flex nav-liother ai-c jc-c">水域</div>
      </div>
    </div>
    <div style="margin-top:-50px" class="flex-1 mr-2 tw-flex tw-flex-row tw-items-center tw-justify-end" >
      <span class="fc-w fz-16 cursor" @click="logout()">退出登录</span>
    </div>
    <!-- <el-row class="tw-w-full tw-flex tw-flex-row tw-items-center">
      <el-col :span="10">
        <div class="flex ai-c" style="width: 600px;">
          <span class="header-title">农业农村时空大数据平台底座</span>
        </div>
      </el-col>
      <el-col :span="10" class="flex ta-l">
        <div v-for="(item,index) in navList" :key="index" class="flex fz-16 fc-w nav-ul">
          <div class="flex nav-li ai-c jc-c" :class="navIndex==index?'active':''" @click="sendMapButton(item, index)">{{ item }}</div>
        </div>
      </el-col>
      <el-col :span="4" class="flex tw-justify-end">
        <div style="width: 120px;margin-top:-70px" class="tw-flex tw-flex-row tw-items-center tw-justify-center" >
          <span class="fc-w fz-16 cursor" @click="logout()">退出登录</span>
        </div>
      </el-col>
    </el-row> -->
  </el-container>
</template>

<script>
import {defineComponent, reactive, watch,onMounted} from "vue";
import Weather from "../../weather/Weather.vue";
import {useRouter} from 'vue-router'
import {toRefs} from "@vueuse/core";
import {getMethodCommon, postMethodCommon} from '../../../api/common';
export default defineComponent({
  name: 'CimHeader',
  components: {Weather},
  setup(props,context) {
    const router = useRouter()
    let data = reactive({
      navList:["产权交易","产业园区","特色产业","农业资源"],
      navIndex: null,
    })
    onMounted(() => {
        
    })
    let methods = {
        sendMapButton(item,index){
          context.emit('send-map-serve', item)
          data.navIndex = index
        },
        logout() {
            localStorage.clear()
            router.push({path: "/login"})
        }
    };

    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>
<style scoped>
.newcim-header{
    width: 100%;
    height: 90px;
    background: url("/images/headernew.png") no-repeat;
    position: fixed;
    top: 0;
    z-index: 11;
}

.newcim-header-center{
  margin-top: -40px;
}
.header-title{
  font-size: 34px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-align: left;
  padding-left: 30px;
  /* text-shadow: 0px 0px 20px rgba(0,112,255,0.8); */
  background: linear-gradient(180deg, #FFFFFF 0%, #E3F5FF 76%, #9AD3FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-ul{
 margin-top: 53px;
}
.nav-liother{
  width: 85px;
  height: 20px;
  margin-left: 10px;
  cursor: pointer;
  background: url("/images/navli.png");
  background-size: 100% 100%;
  font-size: 10px;
}
.nav-liotherlang{
  width: 105px;
}
.nav-li{
  width: 170px;
  height: 40px;
  margin-left: 10px;
  cursor: pointer;
  background: url("/images/navli.png");
  background-size: 100% 100%;
}
.nav-li.active{
  background: url("/images/navliactive.png");
  background-size: 100% 100%;
  border: none;
}
</style>


