<template>
  <div class="m-topnav">
    <div class="back" style="cursor: pointer" @click="goBack()">
      <img src="~@/assets/images/shuju/main/back.png" alt="/" />
    </div>
    <div class="title">{{ customerName }}数据智能分析平台</div>
    <div class="selectArea" v-if="$route.path == '/dataBoard/satisfactionEval/index'">
      <el-select @change="setSelectName" v-model="value" popper-class="selectPopClass">
        <el-option v-for="(item, index) in options" v-if="item.agencyLevel === 'grid'" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </div>
    <!-- <div class="btn-back" @click="toPage('/')">
			<img class="z-default" src="~@/assets/images/shuju/main/back.png" />
			<img class="z-on" src="~@/assets/images/shuju/main/back-on.png" />
			<span>返回</span>
		</div> -->
    <!-- <div class="nav-list z-left">
      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/renfang/index' }" @click="toPage('/dataBoard/renfang/index')">
        <span>人房总览</span>
      </div>
      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/sida/index' }" @click="toPage('/dataBoard/sida/index')">
        <span>四大清单</span>
      </div>
      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/fifteen/index' }" @click="toPage('/dataBoard/fifteen/index')">
        <span>十五分钟生活圈</span>
      </div>
    </div>-->
    <div class="nav-list">
      <div class="nav-item" :class="{ 'z-on': $route.path.indexOf('/dataBoard/overview') != -1 }" @click="toPage('/dataBoard/overview/index')">
        <span>概览</span>
      </div>
      <div class="nav-item" :class="{ 'z-on': $route.path.includes('/organizational') }" @click="toPage('/organizational/dangTree')">
        <span>组织架构</span>
      </div>
      <div class="nav-item" :class="{ 'z-on': $route.path.indexOf('/dataBoard/renfang') != -1 }" @click="toPage('/dataBoard/renfang/index')">
        <span>人房数据</span>
      </div>
      <div class="nav-item" :class="{ 'z-on': $route.path.includes('/satisfactionEval') }" @click="toPage('/dataBoard/satisfactionEval/index')">
        <span>满意度评价</span>
      </div>
    </div>
    <!-- <div class="msg">
      <div class="weather">
        <img v-if="weather.weather == '小雨'" src="~@/assets/images/shuju/main/weather/xiaoyu.png" />
        <img v-if="weather.weather == '中雨'" src="~@/assets/images/shuju/main/weather/zhongyu.png" />
        <img v-if="weather.weather == '大雨'" src="~@/assets/images/shuju/main/weather/dayu.png" />
        <img v-if="weather.weather == '雷雨'" src="~@/assets/images/shuju/main/weather/leiyu.png" />
        <img v-if="weather.weather == '雷暴'" src="~@/assets/images/shuju/main/weather/leibao.png" />
        <img v-if="weather.weather == '雨雪'" src="~@/assets/images/shuju/main/weather/yuxue.png" />
        <img v-if="weather.weather == '阴'" src="~@/assets/images/shuju/main/weather/yin.png" />
        <img v-if="weather.weather == '雾'" src="~@/assets/images/shuju/main/weather/wu.png" />
        <img v-if="weather.weather == '风'" src="~@/assets/images/shuju/main/weather/feng.png" />
        <img v-else-if="weather.weather == '雪'" src="~@/assets/images/shuju/main/weather/xue.png" />
        <img v-else-if="weather.weather == '多云'" src="~@/assets/images/shuju/main/weather/duoyun.png" />
        <img v-else src="~@/assets/images/shuju/main/weather/qing.png" />
        <div>{{ weather.temperature }}℃</div>
        <div>{{ weather.weather }}</div>
      </div>-->
    <div class="date">
      <div class="dateFlex">
        <div class="dateFlex_mw">
          <div class="date-month">{{ showMonth }}</div>
          <div class="date-week">{{ showWeek }}</div>
        </div>
        <div class="date-time">{{ showTime }}</div>
      </div>
    </div>
    <!-- </div>  -->
    <!-- <nav v-if="false" class="m-navbar">
      <div class="navbar__header">
        <h1 class="navbar__brand" @click="$router.push({ name: 'home' })">
          <a class="navbar__brand-lg" href="javascript:;">{{ customerName }}</a>
          <a class="navbar__brand-mini" href="javascript:;">{{ customerName.slice(0, 2) }}</a>
        </h1>
      </div>
      <div class="navbar__body">
        <el-menu class="navbar__menu mr-auto" mode="horizontal">
          <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
            <svg class="icon-svg navbar__icon-menu navbar__icon-menu--switch" aria-hidden="true">
              <use xlink:href="#icon-outdent"></use>
            </svg>
          </el-menu-item>
          <el-menu-item index="2" @click="refresh()">
            <svg class="icon-svg navbar__icon-menu" aria-hidden="true">
              <use xlink:href="#icon-sync"></use>
            </svg>
          </el-menu-item>
        </el-menu>
        <el-menu :default-active="$store.state.mainShuju.activeName" :unique-opened="true" :collapseTransition="false" mode="horizontal" class="navbar__menu mr-auto z-div">
          <el-menu-item index="index" @click="toIndexPage">
            <span>首页</span>
          </el-menu-item>
          <template v-for="(menu, idx) in $store.state.mainShuju.menuList">
            <li class="sub-menu" :class="$store.state.mainShuju.activeName == menu.id ? 'z-on' : ''" v-if="menu.children" :key="menu.id" @click="gotoRouteHandle(menu.id, idx)">
              <span>{{ menu.name }}</span>
              <div class="sub-menu-list">
                <div :class="$store.state.mainShuju.activeName == subMenu.id ? 'z-on' : ''" :key="subMenu.id" @click="gotoRouteHandle(subMenu.id, subIndex)" v-for="(subMenu, subIndex) in menu.children">
                  {{ subMenu.name }}
                </div>
              </div>
            </li>
            <el-menu-item v-else :key="menu.id" :menu="menu" :index="menu.id" @click="gotoRouteHandle(menu.id, idx)">
              <span>{{ menu.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
        <el-menu class="navbar__menu" mode="horizontal"> -->
    <!-- <el-menu-item index="1">
            <el-dropdown placement="bottom"
                         :show-timeout="0">
              <el-button size="mini">{{ $t('_lang') }}</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(val, key) in i18nMessages"
                                  :key="key"
                                  @click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item> -->
    <!-- <el-menu-item index="2">
            <a href="//www.renren.io/"
               target="_blank">
              <svg class="icon-svg navbar__icon-menu"
                   aria-hidden="true">
                <use xlink:href="#icon-earth"></use>
              </svg>
            </a>
          </el-menu-item> -->
    <!-- <el-menu-item index="3" @click="fullscreenHandle()">
            <svg class="icon-svg navbar__icon-menu" aria-hidden="true">
              <use xlink:href="#icon-fullscreen"></use>
            </svg>
          </el-menu-item>
          <el-menu-item index="4" class="navbar__avatar">
            <el-dropdown placement="bottom" :show-timeout="0">
              <span class="el-dropdown-link">
                <img src="~@/assets/img/staff-default-avatar.png" />
                <span>{{ $store.state.user.realName }}</span>
                <i class="el-icon-arrow-down"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t("updatePassword.title") }}</el-dropdown-item>
                <el-dropdown-item @click.native="logoutHandle()">{{ $t("logout") }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
        </el-menu> -->
    <!-- </div> -->
    <!-- 弹窗, 修改密码 -->
    <!-- <update-password-work v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password-work> -->
    <!-- </nav> -->
  </div>
</template>
<script>
import { messages } from "@/i18n";
import UpdatePasswordWork from "@/views/main-navbar-update-password-work";
import dateFormat from "dai-js/tools/dateFormat";
import nextTick from "dai-js/tools/nextTick";
import { requestGet } from "@/js/dai/request";

export default {
  inject: ["refresh"],
  data() {
    return {
      showHeader: true,
      i18nMessages: messages,
      updatePassowrdVisible: false,
      customerName: "",
      showWeek: "",
      showTime: "",
      showMonth: "",
      value: 0,
      weather: {
        weather: "晴",
        temperature: "--",
      },
      options: [],
    };
  },
  components: {
    UpdatePasswordWork,
  },
  created() {
    this.changeCustomerName();
    const customerId = localStorage.getItem("customerId");
    let siteconfigElement = window.SITE_CONFIG["menuShujuList"];
    //暂时 亿联街道和 微笑崂山显示 社区治理-》多元化菜单
    if ("04c0d396e298f13e57aa5904a657eaa6" != customerId && "3fdd0380deff5b30f45376cdf995d1c1" != customerId) {
      for (let index in siteconfigElement) {
        if (siteconfigElement[index].id == "6") {
          let newMenuArr = siteconfigElement[index].children.filter((item) => item.id !== "duoyuanfuwufenxi");
          siteconfigElement[index].children = newMenuArr;
        }
      }
    }
    this.$store.state.mainShuju.menuList = siteconfigElement;
    const pollTime = async () => {
      this.computeCurrentTime();
      await nextTick(1000);
      pollTime();
    };
    pollTime();
    // this.getWeatherData();
  },
  computed: {},
  mounted() {
    this.getOrgList();
  },
  methods: {
    getChooseLabel(key) {
      const name = this.options.filter((item) => item.value === key)[0].level;
      return name;
    },

    getOrgList() {
      let params = {};
      if (this.options.length) {
        params = { orgId: this.value, level: this.getChooseLabel(this.value) };
      }
      console.log(params);
      this.$http.post(`/gov/org/agency/maporg`, params).then(async ({ data: { data } }) => {
        console.log(data);
        this.value = data.id;
        this.$store.dispatch("chooseArea/chooseName", {
          orgId: data.id,
          level: data.level,
        });
        let children = await this.dealTreeData(data.children);
        if (data.parentId) {
          this.options = [
            {
              ...data,
              value: data.parentId,
              label: data.parentName,
            },
            {
              ...data,
              value: data.id,
              label: data.name,
            },
            ...children,
          ];
        } else {
          this.options = [
            {
              ...data,
              value: data.id,
              label: data.name,
            },
            ...children,
          ];
        }
      });
    },
    dealTreeData(treeData, level = 0) {
      const data = treeData.map((item) => ({
        ...item,
        value: item.id,
        label: item.name,
        children: item.children && item.children.length ? this.dealTreeData(item.children, level++) : null,
      }));
      return data;
    },
    setSelectName(index) {
      /*      this.$store.dispatch("chooseArea/chooseName", {
              orgId: this.options[index].id,
              level: this.options[index].level
            });*/
      this.getOrgList();
    },
    computeCurrentTime() {
      // let now = new Date();
      // let wk = now.getDay();
      // this.showWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][wk];
      // this.showTime = dateFormat(now, "yyyy-MM-dd hh:mm:ss");
      this.showMonth = this.$moment().format("MMM Do");
      this.showWeek = this.$moment().format("dddd");
      this.showTime = this.$moment().format("LT");
    },
    toPage(path) {
      this.$router.push({
        path,
      });
    },
    toIndexPage() {
      this.$router.replace("/");
    },

    goBack() {
      this.$router.push("/main/home");
    },
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle(menuId, idx) {
      var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter((item) => item.meta.menuId === menuId)[0];
      if (route) {
        this.$router.push({
          name: route.name,
        });
        this.$store.state.mainShuju.activeName = menuId;
      }
    },
    changeCustomerName() {
      this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
    },
    async getWeatherData() {
      const url = "https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e";
      const { data, code, msg } = await requestGet(url, {
        city: this.$store.state.user.areaCode,
      });
      if (code === 0) {
        this.weather = data.lives[0];
      } else {
        // return this.$message.error("网络错误");
      }
    },
  },
};
</script>
<style lang="scss" scoped src="@/assets/scss/dataBoardMain.scss"></style>
