<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 ? 'user_pic': 'user_default'"
        :src="
          userInfo.picture_path || require('../assets/imgs/home_ic_user.png')
        "
      />
      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="user_menu">
        <div
          v-for="(item, index) in user_arr"
          :key="index + 700"
          @click="gotopage(item.path)"
        >{{ item.name }}</div>
      </div>
      <div v-if="userInfo.user_name && userInfo.user_name !=''" class="sj"></div>
    </div>
    <div
      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.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
              : item.service.sectors_name
              }}
            </p>
            <p class="shop_cell_msg over_one">
              {{
              item.service_id == 0
              ? item.application.org
              : 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(index, item.visit_url)"
        :style="{ color: now_menu == index ? '#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"
            @click.stop="gotoChildPage(v, index)"
          >{{ v.menu_name }}</div>
        </div>
        <div class="sj" v-if="item.Child && item.Child.length" style="left: 60px;"></div>
        <div class="bottom_show" v-if="now_menu == index"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu_arr: [],
      now_menu: 2,
      user_arr: [
        { name: "个人档案", path: "/user/user_info" },
        { name: "消息通知", path: "/user/message" },
        { name: "收银中心", path: "" },
        { name: "关于BD-aPaaS", path: "" },
        { name: "退出登录", path: "logout" }
      ],
      shopping_list: [],
      menuCartNum: 0
    };
  },
  mounted() {
    this.getNowMenu();
    this.getList();
  },
  computed: {
    getMenuCartState() {
      return this.$store.state.menuCartState;
    },
    userInfo() {
      return this.$store.state.userInfo || {};
    }
  },
  watch: {
    getMenuCartState(newVal) {
      this.getList();
    }
  },
  methods: {
    gotopage(n) {
      if (n == "logout") {
        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 => {
        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(index, path) {
      this.$router.push(path);
      this.now_menu = index;
      window.sessionStorage.setItem("menuIndex", index);
    },
    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 == 2) {
          this.$router.push(v.visit_url);
          this.$store.commit("serviceShopMenuAct", v.visit_url);
        } else {
          this.$router.push(v.visit_url);
        }
        this.now_menu = parent;
        window.sessionStorage.setItem("menuIndex", 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() {
      let index = window.sessionStorage.getItem("menuIndex");
      console.log(index);
      this.now_menu = index ? index : 2;
    },
    getNowMenu() {
      this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => {
        if (response.data.success == 1) {
          this.menu_arr = response.data.data[0].Child;
          this.getMenuIndex();
        }
      });
    }
  }
};
</script>

<style scoped>
.menu {
  width: 100%;
  height: 84px;
  background-color: #0f2683;
  color: #8390ee;
  line-height: 84px;
}
.logo {
  float: left;
  margin: 30px 0 0 40px;
}
.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: 30px;
}
.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: 38px;
  top: 26px;
  z-index: 2;
}
.car_img {
  position: relative;
  top: 7px;
}
.menu_box {
  float: right;
  width: 185px;
  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: 0px;
  left: calc(50% - 12px);
}
.user_menu {
  width: 135px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 8px;
  position: absolute;
  top: 80px;
  left: -20px;
  overflow: hidden;
  display: none;
  z-index: 1;
}
.shop_menu {
  width: 280px;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 8px;
  position: absolute;
  top: 80px;
  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: 50px;
}
.shop_hover:hover .shop_menu {
  display: block;
}
.shop_hover:hover .shop_sj {
  display: block;
}
.user_menu div {
  width: 135px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #0d1847;
}
.user_menu div:hover {
  background-color: #e56600;
  color: #fff;
}
.sj {
  width: 16px;
  height: 16px;
  background-color: #e56600;
  position: absolute;
  top: 72px;
  transform: rotate(45deg);
  display: none;
}
.shop_sj {
  width: 16px;
  height: 16px;
  background-color: #fff;
  position: absolute;
  top: 72px;
  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;
}
</style>
<style>
.number .el-badge__content {
  background-color: #e56600;
  border: 0;
  line-height: 18px;
  padding: 0 7px;
}
</style>