<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 class="user">用户</span>
      <img src="../assets/imgs/home_ic_user.png" alt class="user_pic" />
      <div class="user_menu">
        <div
          v-for="(item, index) in user_arr"
          :key="index + 700"
          @click="gotopage(index)"
        >
          {{ item }}
        </div>
      </div>
      <div class="sj"></div>
    </div>
    <div
      style="float:right;cursor: pointer;position:relative;"
      class="shop_hover"
    >
      <div class="number">99+</div>
      <img src="../assets/imgs/home_ic_shop.png" alt class="car" />
      <div 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="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            class="shop_img"
          />
          <div class="shop_cell_msgs">
            <p @click="getDetail(item.id)" class="shop_cell_name over_one">
              {{ item.name }}
            </p>
            <p class="shop_cell_msg bover_one">{{ item.type }}</p>
            <p class="shop_cell_msg over_one">{{ item.creator }}</p>
          </div>
          <div>
            <img
              @click="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 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.path)"
        :style="{ color: now_menu == index ? '#fff' : '' }"
      >
        {{ item.name }}
        <div
          class="user_menu"
          v-if="item.children && item.children.length"
          style="left: 30px;"
        >
          <div
            v-for="(v, index) in item.children"
            :key="index + 700"
            @click="gotoChildPage(v)"
          >
            {{ v.name }}
          </div>
        </div>
        <div
          class="sj"
          v-if="item.children && item.children.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: [
        {
          name: "工作台",
          path: "/workplace",
        },
        {
          name: "技术支持",
          path: "/xxx",
        },
        {
          name: "服务超市",
          path: "/services_shop",
          children: [
            {
              name: "数据服务",
              path: "/shop/data_service_list",
            },
            {
              name: "时空服务",
              path: "/shop/space_time_service_list",
            },
            {
              name: "视频服务",
              path: "/shop/video_service_list",
            },
            {
              name: "感知服务",
              path: "/shop/perception_service_list",
            },
            {
              name: "综合应用",
              path: "/shop/comprehensive_app_list",
            },
            {
              name: "云资源服务",
              path: "/shop/cloud",
            },
            {
              name: "应用商店",
              path: "/shop/app_store_list",
            },
          ],
        },
      ],
      now_menu: 2,
      user_arr: [
        "个人档案",
        "消息通知",
        "收银中心",
        "关于BD-aPaaS",
        "退出登录",
      ],
      shopping_list: [
        {
          id: 0,
          name: "水路货物周转量情况",
          type: "基础数据服务",
          creator: "贵州省交通运输厅0",
          state: 1,
          mapService: 1,
          num: 2,
          checkedSubscription: false,
          specification: 1,
          specificationApplication: 2,
        },
        {
          id: 1,
          name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
          type: "基础数据服务",
          creator: "贵州省交通运输厅1",
          state: 1,
          num: 2,
          checkedSubscription: false,
          specification: 1,
          specificationApplication: 2,
        },
        {
          id: 2,
          name: "水路货物周转量情况水路货物周转量情况",
          type: "基础数据服务",
          creator: "贵州省交通运输厅2",
          state: 1,
          mapService: 1,
          num: 2,
          checkedSubscription: true,
          specification: 1,
          specificationApplication: 2,
        },
      ],
    };
  },
  methods: {
    gotopage(n) {
      console.log(n);
    },
    settlement() {
      this.$router.push({ name: "shoppingCart" });
    },
    deleteItem() {},
    getDetail() {
      // if you want goto detail page, you should give me the type at first
    },
    navAction(index, path) {
      this.$router.push(path);
      this.now_menu = index;
    },
    gotoChildPage(v) {
      if (v.path) {
        this.$router.push(v.path);
      }
    },
  },
};
</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;
  margin-right: 113px;
  font-size: 16px;
}
.user_pic {
  float: right;
  margin-right: 15px;
  margin-top: 30px;
}
.number {
  float: right;
  margin-right: 43px;
  margin-top: 30px;
  width: 40px;
  height: 22px;
  background-color: #e56600;
  border-radius: 11px;
  color: #fcefd6;
  line-height: 22px;
  text-align: center;
}
.car {
  float: right;
  margin-right: 15px;
  margin-top: 30px;
}
.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%;
}
.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;
  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>
