<template>
  <el-container class="cim-header">
    <el-row class="tw-w-full tw-flex tw-flex-row">
      <div style="width: 380px" class="tw-flex tw-flex-row tw-items-center">
        <h1 class="tw-text-36 tw-ml-5">{{ APPS_TITLE }}</h1>
      </div>
      <div style="flex: 1" class="tw-flex tw-flex-row tw-items-center">
        <div class="tw-text-22  tw-mr-10 tw-font-semibold tw-cursor-pointer"
             v-for="(item,index) in menu"
             :key="index"
             @click="goPage(item,index)"
             style="height: 75px;position: relative;text-align: center"
        >
          <img
              v-if="index === selectMenu"
              class="cim-header-menu-select" src="/public/images/img13.png" alt="">
          <span style="line-height: 90px">{{ item.title}}</span>
        </div>
      </div>

      <div style="width: 200px" class="tw-flex tw-flex-row tw-items-center tw-justify-end">
        <Weather/>
      </div>
      <div style="width: 120px" class="tw-flex tw-flex-row tw-items-center tw-justify-center">
        <div class="tw-flex" @click="goPage(null,null,'/main/serverSupermarket')">
          <img class="tw-mr-5" src="/public/images/img10.png" alt="">
        </div>
        <el-dropdown>
            <span class="el-dropdown-link">
              <div class="tw-mr-10">
                  <img src="/public/images/img11.png" alt="">
                </div>
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goPage(null,null,'/main/personalCenter')">账号信息</el-dropdown-item>
              <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-row>
  </el-container>
</template>

<script>
import {computed, defineComponent, onMounted, reactive, ref} from "vue";
import Weather from "../../weather/Weather.vue";
import {useRoute, useRouter} from 'vue-router'
import {APPS_TITLE} from "/public/config/server";
import {toRefs} from "@vueuse/core";

export default defineComponent({
  name: 'Header',
  components: {Weather},
  setup() {
    const router = useRouter()
    let data = reactive({
      APPS_TITLE: APPS_TITLE,
      appsList: [
        {
          title: "首页",
          path: "SY",
        }, {
          title: "规划管控专题",
          path: "GHGKZT",
        }, {
          title: "不动产专题",
          path: "BDCZT",
        }, {
          title: "交通专题",
          path: "JTZT",
        }, {
          title: "违建监测",
          path: "WJZT",
        }, {
          title: "综合管网",
          path: "ZHGW",
        }, {
          title: "旅游专题",
          path: "LYZT",
        }],
      selfMenuList: [
        {
          title: "服务超市",
          path: "YYGL",
          url: "/main/serverSupermarket"
        },
        {
          title: "应用管理",
          path: "YYGL",
          url: "/main/application",
        }, {
          title: "我的服务",
          path: "WDFW",
          url: "/main/serviceCenter"
        }, {
          title: "我的工具",
          path: "WDGJ",
          url: "/main/toolCenter"
        }, {
          title: "申请进度",
          path: "SQJD",
          url: "/main/applyCenter",
        },
      ],
      publicMenuList: [
        {
          title: "服务超市",
          path: "YYGL",
        },
      ],
      pageType: "APP",  // APP  SERVER
      selectMenu: 0
    })
    let menu = computed({
      get: () => {
        let route = useRoute();
        let path = route.path;
        if (path === '/main/cim') {
          data.pageType = "APP"
          return data.appsList
        } else {
          data.pageType = 'SERVER'
          return data.selfMenuList
        }
      },
      set: (v) => {
        // 接受传递来的参数
      }
    })
    let methods = {
      goPage(item, index, url) {
        if (index !== null)
          data.selectMenu = index
        if (url) {
          router.push({
            path: url
          })
          return false
        }
        if (data.pageType === 'APP') {
        } else {
          if (item.url) {
            router.push({
              path: item.url
            })
          }
        }
      },
      logout() {
        // localStorage.clear()
        localStorage.setItem("Token","");
        localStorage.setItem("username","");
        this.$router.push("/");
      }
    };
    return {
      ...methods,
      ...toRefs(data),
      menu
    };
  },
});
</script>

