<template>
  <div class="openPages">
    <div
      v-for="(value, index) in openList"
      :key="index"
      style="position: relative"
    >
      <router-link
        :to="value.href"
        class="openItems"
        :style="{ background: value.active ? '#f5f7fa' : '' }"
      >
        <div
          :style="{
            color: value.active
              ? 'rgba(64, 158, 255, 1)'
              : 'rgba(135, 139, 146, 1)',
          }"
        >
          {{ value.pagename }}
        </div>
      </router-link>
      <div class="close" @click.stop="closePage(value)">
        <img src="../assets/images/openPages/close.png" />
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "OpenPages",
  setup() {
    const store = useStore();
    const $router = useRouter();
    const state = reactive({
      openList: store.state.openpages,
    });

    const closePage = (value) => {
      console.log("点击关闭页面", value, state.openList);
      state.openList.map((item, key) => {
        if (item.href === value.href) {
          if (state.openList.length === 1) {
            if (state.openList[0].href !== "/learningpath") {
              state.openList.splice(key, 1);
            }
            $router.push({ path: "/learningpath" });
          } else {
            if (value.active) {
              if (key === state.openList.length - 1) {
                $router.push({ path: state.openList[key - 1].href });
              } else {
                $router.push({ path: state.openList[key + 1].href });
              }
            }
            state.openList.splice(key, 1);
          }
        }
      });
      store.commit("chengeOpenpages", state.openList);
    };
    return {
      ...toRefs(state),
      closePage,
    };
  },
};
</script>
<style scoped lang="scss">
.openPages {
  width: 100%;
  // height: 50px;
  display: flex;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
  overflow-x: auto;
  .openItems {
    width: 272px;
    // min-width: 250px;
    height: 50px;
    border: 1px solid #edf2fa;
    border-left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 36px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .close {
    width: 16px;
    height: 16px;
    border-radius: 8px;

    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 17px;
    right: 27px;
  }
  .close:hover {
    background: rgba(220, 220, 220, 1);
  }
}
</style>
