<template>
  <div class="menu">
    <img src="../assets/imgs/home_img_logo.png" alt class="logo" />
    <div
      style="float: right; cursor: pointer; position: relative"
      class="user_hover"
    >
      <span
        v-if="userInfo.user_name && userInfo.user_name != ''"
        class="user"
        >{{ userInfo.user_name }}</span
      >
      <span v-else @click="gotopage('login')" class="user">请登录</span>
      <img
        :class="userInfo.picture_path && false ? 'user_pic' : 'user_default'"
        src="../assets/imgs/home_ic_user.png"
      />
      <span class="has_msg" v-if="unreadMessageCount > 0"></span>
      <!-- 菜单图片不需要动态渲染，只用ui给的图标 -->
      <div
        v-if="userInfo.user_name && userInfo.user_name != ''"
        class="user_menu"
      >
        <div
          v-for="(item, index) in user_arr"
          :key="index + 700"
          @mouseleave.stop="change_now_hover(-1)"
          @mouseenter.stop="change_now_hover(index)"
          @click="gotopage(item.visit_url)"
        >
          {{ item.menu_name }}
          <span
            v-if="unreadMessageCount > 0 && item.visit_url === '/user/notice'"
            class="width_num"
            v-text="unreadMessageCount"
          ></span>
        </div>
        <div @click="gotopage('logout')">退出登录</div>
      </div>
      <div
        v-if="userInfo.user_name && userInfo.user_name != ''"
        class="sj"
        :style="now_hover == 0 ? { backgroundColor: '#e56600' } : {}"
      ></div>
    </div>
    <div
      v-if="show_shop_menu"
      style="float: right; cursor: pointer; position: relative"
      class="shop_hover"
      @click="gotopage('/shop/shopping_cart')"
    >
      <div class="car">
        <el-badge
          v-if="menuCartNum != 0"
          :value="menuCartNum"
          :max="99"
          class="number"
        ></el-badge>
        <img src="../assets/imgs/home_ic_shop.png" alt class="car_img" />
      </div>
      <div
        v-if="userInfo.user_name && userInfo.user_name != ''"
        class="shop_menu"
      >
        <div class="shop_list_title">最近加入的服务：</div>
        <div
          v-for="(item, index) in shopping_list"
          :key="'shopping' + index"
          class="shop_list_cell shop_line"
        >
          <img
            :src="
              item.service_id == 0 ? item.application.logo : item.service.cover
            "
            class="shop_img"
          />
          <div class="shop_cell_msgs">
            <p @click="getDetail(item.id)" class="shop_cell_name over_one">
              {{
                item.service_id == 0
                  ? item.application.app_name
                  : item.service.name
              }}
            </p>
            <p class="shop_cell_msg bover_one">
              {{
                item.service_id == 0
                  ? item.application.ywly_name
                  : item.service.sectors_name
              }}
            </p>
            <p class="shop_cell_msg over_one">
              {{
                item.service_id == 0
                  ? item.application.org_name
                  : item.service.organization_name
              }}
            </p>
          </div>
          <div>
            <img
              @click.stop="deleteItem(item.id)"
              src="../assets/imgs/ic_delete.png"
              alt
            />
          </div>
        </div>
        <div class="shop_footer">
          <el-button @click="settlement" size="small" class="shop_settlement"
            >去购物车申请结算</el-button
          >
        </div>
      </div>
      <div
        v-if="userInfo.user_name && userInfo.user_name != ''"
        class="shop_sj"
      ></div>
    </div>

    <div style="float: right">
      <div
        v-for="(item, index) in menu_arr"
        :key="index + 200"
        class="menu_box user_hover"
        @click="navAction(item.visit_url)"
        :style="{ color: now_menu == item.visit_url ? '#fff' : '' }"
      >
        {{ item.menu_name }}
        <div
          class="user_menu"
          v-if="item.Child && item.Child.length"
          style="left: 30px"
        >
          <div
            v-for="(v, indexs) in item.Child"
            :key="indexs + 700"
            @mouseleave.stop="change_now_hover(-1)"
            @mouseenter.stop="change_now_hover(indexs)"
            @click.stop="gotoChildPage(v, item.visit_url)"
          >
            {{ v.menu_name }}
          </div>
        </div>
        <div
          class="sj"
          v-if="item.Child && item.Child.length"
          :style="
            now_hover == 0
              ? { backgroundColor: '#e56600', left: '60px' }
              : { left: '60px' }
          "
        ></div>
        <div class="bottom_show" v-if="now_menu == item.visit_url"></div>
      </div>
    </div>
  </div>
</template>

<script>
const gisServiceUrl = window.serviceConfig.gisServiceRoot;
const state = window.serviceConfig.state;
export default {
  data() {
    return {
      menu_arr: [],
      now_menu: "",
      user_arr: [
        // { name: "个人档案", path: "/user/user_info" },
        // { name: "消息通知", path: "/user/message" },
        // { name: "订单管理", path: "/user/order_list" },
        // { name: "关于BD-aPaaS", path: "" },
        // { name: "退出登录", path: "logout" }
      ],
      shopping_list: [],
      menuCartNum: 0,
      now_hover: -1,
      show_shop_menu: false,
    };
  },
  mounted() {
    this.getNowMenu();
    this.getList();
  },
  computed: {
    getMenuCartState() {
      return this.$store.state.menuCartState;
    },
    userInfo() {
      return this.$store.state.userInfo || {};
    },
    unreadMessageCount() {
      return this.$store.state.unreadMessageCount;
    },
    getRouter() {
      return this.$route.path;
    },
  },
  watch: {
    getMenuCartState(newVal) {
      this.getList();
    },
    getRouter(val) {
      if (
        val == "/services_shop" ||
        val == "/technical_support" ||
        val == "/workplace"
      ) {
        this.now_menu = val;
      }
    },
  },
  methods: {
    change_now_hover(n) {
      this.now_hover = n;
    },
    gotopage(n) {
      if (n == "logout") {
        if (state == "needLogin") {
          window.location.href =
            gisServiceUrl +
            `/portal/sharing/rest/oauth2/signout?client_id=arcgisonline&redirect_uri=${window.location.protocol}//${window.location.host}/iam/api/logout`;
        } else {
          window.location.href = "/iam/api/logout";
        }
      } else if (n == "login") {
        let path = this.$route.path;
        window.location.href = "/iam/login/#/login?ReturnUrl=" + path;
      } else {
        this.$router.push(n);
      }
    },
    settlement() {
      this.$router.push({ name: "shoppingCart" });
    },
    deleteItem(id) {
      let query = [id];
      this.$api.serviceShop.delShoppingCart(query).then((response) => {
        if (response.data.success == 1) {
          this.$store.commit("setCartState");
          this.getList();
        }
      });
    },
    getDetail() {
      // if you want goto detail page, you should give me the type at first
      // at here, we will goto shopping cart
      this.$router.push({ name: "shoppingCart" });
    },
    navAction(path) {
      this.now_menu = path;
      this.$router.push(path);
    },
    gotoChildPage(v, parent) {
      if (v.visit_url) {
        if (v.visit_url == "/fwgl/" || v.visit_url == "/yygl/") {
          this.$router.push(v.visit_url + this.$store.getters.level);
        } else if (parent == "/services_shop") {
          this.$store.commit("serviceShopMenuAct", v.visit_url);
          this.$router.push(v.visit_url);
        } else {
          this.$router.push(v.visit_url);
        }
        this.now_menu = parent;
      }
    },
    getList() {
      this.$api.serviceShop.getShoppingCart().then((response) => {
        if (response.data.success == "1") {
          this.menuCartNum = response.data.data.valid
            ? response.data.data.valid.length
            : 0;
          this.shopping_list = response.data.data.valid
            ? response.data.data.valid.slice(0, 3)
            : [];
        } else {
          console.log(response.data.message);
        }
      });
    },
    getMenuIndex() {
      this.now_menu = this.$route.path;
      console.log(this.now_menu);
    },
    getNowMenu() {
      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
        if (response.data.success == 1) {
          let arr =
            (response.data.data[0] && response.data.data[0].Child) || [];
          let shop_index = arr.findIndex(
            (item) => item.visit_url == "/shop/shopping_cart"
          );
          if (shop_index != -1) {
            arr.splice(shop_index, 1);
            this.show_shop_menu = true;
          } else {
            this.show_shop_menu = false;
          }
          let user_index = arr.findIndex((item) => item.visit_url == "/user");
          if (user_index != -1) {
            this.user_arr = arr[user_index].Child;
            arr.splice(user_index, 1);
          } else {
          }
          this.menu_arr = arr;
          this.getMenuIndex();
        }
      });
    },
  },
};
</script>

<style scoped>
.menu {
  width: 100%;
  height: 58px;
  background-color: #0f2683;
  color: #8390ee;
  line-height: 58px;
}
.logo {
  float: left;
  margin: 15px 0 0 40px;
  cursor: pointer;
}
.user {
  float: right;
  display: inline-block;
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 20px;
  font-size: 16px;
}
.user_pic {
  float: right;
  margin-right: 10px;
  margin-top: 26px;
  width: 30px;
  height: 30px;
}
.user_default {
  float: right;
  margin-right: 10px;
  margin-top: 18px;
}
.car {
  float: right;
  width: 50px;
  text-align: center;
  position: relative;
}
.number {
  position: absolute;
  background-color: #e56600;
  border-radius: 11px;
  color: #fcefd6;
  line-height: 18px;
  height: 20px;
  text-align: center;
  left: 45px;
  top: 18px;
  z-index: 2;
}
.car_img {
  position: relative;
  top: 7px;
}
.menu_box {
  float: right;
  width: 185px;
  font-size: 16px;
  height: 58px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.menu_box:nth-of-type(1) {
  margin-right: 52px;
}
.bottom_show {
  width: 24px;
  height: 5px;
  background-color: #e56600;
  border-radius: 3px;
  position: absolute;
  bottom: 4px;
  left: calc(50% - 12px);
}
.user_menu {
  /* width: 135px; */
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
  border-radius: 8px;
  position: absolute;
  top: 56px;
  left: -20px;
  overflow: hidden;
  font-size: 14px;
  display: none;
  z-index: 1;
  text-align: center;
}
.shop_menu {
  width: 280px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
  border-radius: 8px;
  position: absolute;
  top: 56px;
  left: -20px;
  overflow: hidden;
  display: none;
  z-index: 1;
  padding: 10px 20px;
}
.user_hover:hover .user_menu {
  display: block;
}
.user_hover:hover .sj {
  display: block;
}
.shop_hover {
  height: 100%;
  margin-right: 80px;
}
.shop_hover:hover .shop_menu {
  display: block;
}
.shop_hover:hover .shop_sj {
  display: block;
}
.user_menu div {
  /* width: 135px; */
  height: 44px;
  line-height: 44px;
  padding: 0 30px;
  text-align: center;
  color: #0d1847;
}
.user_menu div:hover {
  background-color: #e56600;
  color: #fff;
}
.sj {
  width: 16px;
  height: 16px;
  background-color: #fff;
  position: absolute;
  top: 50px;
  transform: rotate(45deg);
  display: none;
}
.shop_sj {
  width: 16px;
  height: 16px;
  background-color: #fff;
  position: absolute;
  top: 50px;
  left: 20px;
  transform: rotate(45deg);
  display: none;
}
.shop_list_title {
  color: #8890a7;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
}
.shop_list_cell {
  height: 80px;
  padding: 10px 0;
  display: flex;
  line-height: 26px;
}
.shop_line {
  border-bottom: #f4f7fc 2px solid;
}
.shop_line:nth-last-child(2) {
  border-bottom: 0;
}
.shop_img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}
.shop_footer {
  width: 100%;
  height: 50px;
  text-align: right;
  padding: 15px 0;
  line-height: 30px;
}
.shop_settlement {
  background-color: #e56600;
  color: #fcefd6;
}
.shop_cell_msgs {
  width: calc(100% - 80px);
  margin-left: 10px;
}
.shop_cell_name {
  color: #2d3867;
  font-size: 14px;
  line-height: 24px;
}
.shop_cell_name:hover {
  color: #0d0807;
}
.shop_cell_msg {
  color: #8890a7;
  font-size: 12px;
  line-height: 18px;
}
.over_one {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.width_num {
  display: inline-block;
  vertical-align: middle;
  min-width: 30px;
  background-color: #e56600;
  font-size: 10px;
  line-height: 16px;
  color: #fff;
  padding: 0 8px;
  margin-left: 5px;
  box-sizing: border-box;
  border-radius: 8px;
  text-align: center;
  overflow: hidden;
}
.user_menu div:hover .width_num {
  background-color: #fcefd6;
  color: #e56600;
}
.has_msg {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e56600;
  position: absolute;
  top: 15px;
  left: 18px;
}
</style>
<style>
.number .el-badge__content {
  background-color: #e56600;
  border: 0;
  line-height: 18px;
  padding: 0 7px;
}
</style>
