<template>
  <div>
    <Dropdown
      trigger="hover"
      style="margin-left: 20px"
      placement="bottom"
      @on-click="changemenu"
    >
      <a href="javascript:void(0)">
        {{ $t("99200003") }}
        <Icon type="ios-arrow-down"></Icon>
      </a>
      <DropdownMenu slot="list" class="dropDownClass">
        <DropdownItem
          v-for="(item, i) in list"
          :key="i"
          :name="item.code"
          @mouseover.native="mouseOver($event)"
          @mouseleave.native="mouseLeave($event)"
          >{{ $t(item.name) }}</DropdownItem
        >
      </DropdownMenu>
    </Dropdown>
  </div>
</template>
<script>
import { initRouter } from "@/libs/router-util"; // 新增  引入动态菜单渲染
import { localSave } from "@/libs/util";
export default {
  data() {
    return {
      list: [],
      active: "",
    };
  },
  created() {
    this.initblocklist();
  },
  methods: {
    initblocklist() {
      this.axios
        .request({
          url: "/config/User/GetRootModules",
          method: "get",
        })
        .then((res) => {
          if (res.data.ret == 1) {
            this.list = res.data.data;
          } else {
            window_warning(this.$t(res.data.msg));
          }
        });
    },
    changemenu: function (value) {
      // console.log('目录模块点击事件触发')
      // console.log(value)
      this.$store.commit("setmenuitem", value);
      var data = {
        block: this.$store.state.user.blockitem,
      };
      initRouter(this.$store.state.user.blockitem, false); // 新增 调用方法,动态生成路由,
      localSave("sigerdatablockitem", JSON.stringify(data));
    },
    mouseOver: function (e) {
      e.target.style.backgroundColor = "#2D8CF0";
      e.target.style.color = "#eee";
    },
    mouseLeave: function (e) {
      e.target.style.backgroundColor = "#ffffff";
      e.target.style.color = "#666666";
    },
  },
};
</script>
<style lang="less" scoped>
</style>
