<template>
  <el-container class="market-header">
    <img class="market-header-bg" src="/public/images/img34.png" alt="">
    <div class="market-header-context">
      <el-row class="tw-w-full tw-flex tw-flex-row tw-items-center">
        <el-col :span="6" class="flex tw-justify-start">
          <span class="market-header-title">{{cimTitle}}</span>
        </el-col>
        <el-col :span="12">
          <div class="flex" v-if="navIsShow=='manage'">
            <div class="market-header-menu" v-for="(item,index) in navMangageData" :key="index"
               :class="navManageIndex==index?'market-header-menu-active':''" @click="navManageClick(item,index)">
              <img src="/public/images/img35.png" alt="" v-if="navManageIndex==index">
              <span>{{ item.label }}</span>
            </div>
          </div>
          <div  class="flex" v-else>
            <div class="market-header-menu" v-for="(item,index) in navData" :key="index"
               :class="navIndex==index?'market-header-menu-active':''" @click="navClick(index)">
              <img src="/public/images/img35.png" alt="" v-if="navIndex==index">
              <span>{{ item }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="flex tw-justify-end">
          <div style="width: 140px" class="tw-flex tw-flex-row tw-items-center tw-justify-center">
            <div class="tw-flex" @click="goPage('/')">
              <img class="tw-mr-5" src="/public/images/home1.png" alt="">
            </div>
            <div class="tw-flex" v-if="!isLogin" @click="goPage('/login')">
              <span>登录&nbsp;|&nbsp;</span>
            </div>
            <div class="tw-flex" v-if="!isLogin" @click="goPage('/register')">
              <span>注册</span>
            </div>
            <el-dropdown v-if="isLogin">
              <span class="el-dropdown-link">
                <div class="tw-mr-10" style="display: flex;align-items: center;">
                    <img src="/public/images/user1.png" alt="">
                </div>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <el-dropdown-item @click="goPage('/main/serviceCenter')">服务管理</el-dropdown-item>
                  <el-dropdown-item @click="goPage('/main/toolCenter')">工具管理</el-dropdown-item>
                  <el-dropdown-item @click="goPage('/main/application')">应用管理</el-dropdown-item>
                  <el-dropdown-item @click="goPage('/main/applyCenter')">进度查询</el-dropdown-item> -->
                  <el-dropdown-item @click="goPage('/main/personalCenter')">账号信息</el-dropdown-item>
                  <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </div>

  </el-container>
</template>

<script>
import {defineComponent, onMounted, reactive, watch} from "vue";
import Weather from "../../weather/Weather.vue";
import {useRouter} from 'vue-router'
import {toRefs} from "@vueuse/core";
import {getMethodCommon} from "../../../api/common";
export default defineComponent({
  name: 'MarketHeader',
  components: {Weather},
  setup(props) {
    const router = useRouter()
    let data = reactive({
      navIndex: 0,
      navData: ['数据服务超市', '工具服务超市'],
      navManageIndex: 0,
      navMangageData:[
        { label: '服务管理', path: '/usercenter/myservice' },
        { label: '工具管理', path: '/usercenter/mytool' },
        { label: '应用管理', path: '/main/application' },
        { label: '进度查询', path: '/usercenter/myapply' },
        { label: '密钥管理', path: '/usercenter/mykey' }
      ],
      isLogin: null,
      cimTitle: '时空大数据平台',
      navIsShow: '',
    })
    data.navIndex = router.currentRoute.value.query.status
    data.navManageIndex = router.currentRoute.value.query.status
    data.navIsShow = router.currentRoute.value.query.type
    onMounted(() => {
      data.isLogin = localStorage.getItem('Token') || null
      methods.getTitles()
    })
    let methods = {
      goPage(path) {
        router.push(
            {
              path: path
            }
        )
      },
      navClick(index) {
        data.navIndex = index
        let path = "/serverSupermarket"
        router.push(
            {
              path: path,
              query: {
                status: index
              }
            }
        )
        console.log('pp', path)
      },
      navManageClick(item,index){
        data.navManageIndex = index
        let path = item.path
        router.push(
            {
              path: path,
              query: {
                status: index,
                type: data.navIsShow
              }
            }
        )
      },
      logout() {
        // localStorage.clear()
        localStorage.setItem("Token","");
        localStorage.setItem("username","");
        router.push({path: "/login"})
      },
      getTitles(){
        getMethodCommon("/CimApplication/GetCimTitle", {}).then(res => {
          data.cimTitle = res.result
        })
      }
    };

    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>

