<template>
  <el-container class="newcim-header">
    <el-row class="tw-w-full tw-flex tw-flex-row tw-items-center">
      <el-col :span="6" class="flex tw-justify-start tw-items-center">
        <img style="width: 37px;height:34px;margin-right:10px;margin-left: 20px;" src="/public/images/cim/logo-white.png" />
<!--        <img style="width: 173px;height:23px;margin-right:10px;margin-top:4px;" src="/public/images/cim/logo-title.png" />-->
        <span style="height:23px;margin-right:10px;margin-top:-18px;color: #FFFFFF;font-size: 28px;">{{ title }}</span>
      </el-col>
      <el-col :span="14" class="flex tw-justify-center">
        <div class="newcim-header-center tw-flex tw-flex-row">

          <!-- <div class="newcim-nav" v-for="(item,index) in navList" :key="index" @click="navClick(item)">
            <div>{{item.name}}</div>
            <img v-if="item.name==title" class="img" src="/public/images/cim/activebg.png" />
          </div> -->
        </div>
      </el-col>
      <el-col :span="4" class="flex tw-justify-end">
        <div style="width: 120px" class="tw-flex tw-flex-row tw-items-center tw-justify-center">
          <div class="tw-flex">
            <img class="tw-mr-5" style="width: 26px;height:28px;margin-top: -5px;" @click="goPage('/')" src="/public/images/cim/home.png" alt="">
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              <div class="tw-mr-10" style="display: flex;align-items: center;">
                  <img style="width: 26px;height:28px;margin-top: -5px;" src="/public/images/cim/user.png" alt="">
              </div>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goPage('/usercenter/myinfo')">账号信息</el-dropdown-item>
                <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </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',
  props: ['title'],
  components: {Weather},
  setup(props,context) {
    const router = useRouter()
    let data = reactive({
      title: props.title,
      navList:[]
    })
    watch(
        () => props.title,
        (newVal, oldVal) => {
          data.title = newVal
        }
    )
    onMounted(() => {
        methods.getMenu()
    })
    let methods = {
        navClick(item){
            data.title = item.name
            router.push({
                path: '/cim',
                query:{
                    id: item.id,
                    title: item.name,
                    type: item.page_code
                }
            })
            context.emit('change-menu-nav', item)
        },
        getMenu() {
            getMethodCommon("/CimApplication/GetSysCimList", {}).then(res => {
                if (res.code === 200) {
                    data.navList = res.result
                }
            })
        },
        goPage(path) {
            router.push(
                {
                    path: path
                }
            )
        },
        logout() {
            localStorage.clear()
            router.push({path: "/login"})
        }
    };

    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>
<style scoped>
.newcim-header{
    width: 100%;
    height: 57px;
    background: url("/images/cim/headerbg.png");
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    z-index: 9;
}
.newcim-nav{
    white-space: nowrap;
    font-size: 16px;
    font-family: PangMenZhengDao;
    font-weight: 600;
    color: #54B3EB;
    /* text-shadow: 1px 2px 1px #B9BFCF; */
    margin: 0 22px;
    background: linear-gradient(-3deg, #76A2ED 0.146484375%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    position: relative;
}
.newcim-nav .img{
    width: 150%;
    height: 45px;
    position: absolute;
    top: 8px;
    left: -23%;
}
.newcim-header-center{
  margin-top: -10px;
}
</style>


