<template>
  <div class="router_banner">
    <div
      class="router_management"
      v-for="(routerObj, index) in routerList"
      :key="index"
    >
      <div
        class="first_level"
        v-if="routerObj.isShow === 'all' || routerObj.isShow === isManufacturer"
        @click="showLink(index)"
        :class="{ selectStyle: isShowLink[index] }"
        @mouseenter="enterDiv(index)"
        @mouseleave="leaveDiv(index)"
      >
        <!-- 模块下有子路由 -->
        <div class="title" v-if="!routerObj.path">
          <div
            class="icon"
            :style="{ backgroundImage: 'url(' + routerObj.img1 + ')' }"
            v-if="!isShowLink[index] && isHover[index]"
          ></div>
          <div
            class="icon"
            :style="{ backgroundImage: 'url(' + routerObj.img2 + ')' }"
            v-else
          ></div>
          <p>{{ routerObj.title }}</p>
          <div class="switch">
            <img src="../img/switch2.png" v-if="!isShowLink[index]" />
            <img src="../img/switch1.png" v-else />
          </div>
        </div>
        <!-- 模块下没有子路由 -->
        <div v-else class="first_level">
          <router-link :to="routerObj.path" tag="li" class="title">
            <div
              class="icon"
              :style="{ backgroundImage: 'url(' + routerObj.img1 + ')' }"
              v-if="!isShowLink[index] && isHover[index]"
            ></div>
            <div
              class="icon"
              :style="{ backgroundImage: 'url(' + routerObj.img2 + ')' }"
              v-else
            ></div>
            <p @click="getNavTitle(routerObj.title, '')">
              {{ routerObj.title }}
            </p>
            <div class="switch">
              <img src="../img/switch2.png" v-if="!isShowLink[index]" />
              <img src="../img/switch1.png" v-else />
            </div>
          </router-link>
        </div>
      </div>
      <!-- 模块的子路由 -->
      <div
        v-if="routerObj.list.length"
        class="second_level"
        v-show="isShowLink[index]"
      >
        <div v-for="(list, index) in routerObj.list" :key="index">
          <router-link
            v-if="list.isShow === 'all' || list.isShow === isManufacturer"
            :to="list.path"
            tag="li"
          >
            <p
              @click="getNavTitle(routerObj.title, list.title)"
              :class="{ blueColor: list.path === routerPath }"
            >
              - {{ list.title }}
            </p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isManufacturer: {
      type: String,
      default: "manufacturer",
    },
  },
  data() {
    return {
      isShowLink: [true, false, false, false], // 四个大模块
      isHover: [true, true, true, true],
      routerList: [
        {
          title: "数据管理",
          path: "", // 空表示与子路由，非空是点击跳转的路由
          img1: require("../img/edit-manage1.png"), // 没点击的背景图
          img2: require("../img/edit-manage2.png"), // 点击了的背景图
          isShow: "all", // 厂商和经销商都有权限
          list: [
            {
              title: "上传记录",
              path: "/uploadRecord",
              isShow: "manufacturer", // 只有厂商有权限
            },
            {
              title: "链接上传", // 厂商的链接上传
              path: "/uploadLinks",
              isShow: "manufacturer", // 厂商有权限
            },
            {
              title: "链接上传", // 经销商链接上传
              path: "/uploadLink",
              isShow: "distributor", // 经销商有权限
            },
            {
              title: "上传资料",
              path: "/uploadInfor",
              isShow: "manufacturer", // 只有厂商有权限
            },
            {
              title: "资料列表",
              path: "/inforList",
              isShow: "distributor", // 只有经销商有权限
            },
          ],
        },
        {
          title: "账号管理", // 厂商的账号管理
          path: "/accountIndex",
          img1: require("../img/User-Settings1.png"),
          img2: require("../img/User-Settings2.png"),
          list: [],
          isShow: "manufacturer", // 厂商有权限
        },
        {
          title: "账号管理",
          path: "/accountManage",
          img1: require("../img/User-Settings1.png"),
          img2: require("../img/User-Settings2.png"),
          list: [],
          isShow: "distributor", // 经销商有权限
        },
        {
          title: "参数设置",
          path: "/parameterIndex",
          img1: require("../img/Setting1.png"),
          img2: require("../img/Setting2.png"),
          list: [],
          isShow: "manufacturer", // 只有厂商有权限
        },
      ],
    };
  },
  computed: {
    routerPath: function () {
      return this.$route.path;
    },
  },
  methods: {
    getNavTitle: function (navTitle1, navTitle2) {
      // 点击路由的时候，修改导航栏
      this.$emit("change_nav", navTitle1, navTitle2);
    },
    // 展开、关闭router栏
    showLink: function (i) {
      let flag = this.isShowLink[i];
      this.isShowLink = [false, false, false, false];
      this.isShowLink.splice(i, 1, !flag);
    },
    // 鼠标移入变白色背景
    enterDiv: function (i) {
      this.isHover.splice(i, 1, false);
    },
    // 鼠标移出变蓝色背景
    leaveDiv: function (i) {
      this.isHover.splice(i, 1, true);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.router_banner {
  width: 100%;
  border-top: 10px solid #eee;
  .router_management {
    width: 100%;
    .first_level {
      display: flex;
      height: 35px;
      align-items: center;
      &:hover {
        cursor: pointer;
        background-color: rgb(0, 86, 160);
        color: #fff;
        .title {
          color: #fff;
        }
        p {
          color: #fff;
        }
      }
      .title {
        font-size: 14px;
        display: flex;
        padding: 0 10px;
        justify-content: space-around;
        .icon {
          width: 26px;
          height: 26px;
          background-size: contain;
          background-repeat: no-repeat;
          img {
            width: 26px;
            height: 26px;
          }
        }
        .switch {
          width: 11px;
          height: 11px;
          margin-left: 20px;
          img {
            width: 11px;
            height: 11px;
          }
        }
        p {
          font-size: 14px;
          margin-left: 9px;
        }
      }
    }
    .second_level {
      li {
        width: 100%;
        height: 38px;
        line-height: 38px;
        text-align: center;
        p {
          &:hover {
            cursor: pointer;
            color: rgb(0, 86, 160);
          }
        }
      }
    }
  }
}
// 选中变色
.blueColor {
  color: #0056a0;
}
.selectStyle {
  background-color: rgb(0, 86, 160);
  color: #fff;
  .title {
    color: #fff;
  }
  p {
    color: #fff;
  }
}
</style>
