<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router';
//首先在setup中定义
const router = useRouter();
const state = reactive({
  options: [
    {
      title: '省控线', img: 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/icons/menu/shengkongxian.png',
      linkUrl: '/scoreControlLine'
    },
    {
      title: '测文化', img: 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/icons/menu/cewenhua.png',
      linkUrl: '/school/search'
    },
    {
      title: '查位次', img: 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/icons/menu/chaweici.png',
      linkUrl: '/checkRanking'
    },
    {
      title: '算投档', img: 'https://mp-7a4eecb1-2a04-4d36-b050-1c4a78cc31a4.cdn.bspapp.com/images/icons/menu/suantoudang.png',
      linkUrl: '/calculateInvestment'
    },

  ]
})
const flag = ref(false);
let flagStr = window.localStorage.getItem('leftNavFlag')
if (flagStr == null || flagStr == undefined || flagStr == 'true') {
  flag.value = true
  window.localStorage.setItem('leftNavFlag', 'true')
} else {
  flag.value = false
}
const close = () => {
  flag.value = false
  //window.localStorage.setItem('leftNavFlag', 'false')
}
const open = () => {
  flag.value = true
  //window.localStorage.setItem('leftNavFlag', 'false')
}
const openPage = (e: string) => {
  if(!window.location.href.includes(e)){
    window.open(e, '_self')
  }
}
</script>

<template>
  <div class="left-nav-wrapper flexWrap" :class="flag ? '' : 'close'">
    <div class="position-box">
      <div class="item" @click="openPage(item.linkUrl)" v-for="(item, index) in state.options" :key="index">
        <img :src="item.img" class="icon64" :alt="item.title" />
        <div>{{ item.title }}</div>
      </div>
      <div class="open" v-show="!flag" @click="open">
        <el-icon><Expand /></el-icon>
      </div>
      <div class="close" v-show="flag" @click="close">
        <el-icon><Fold /></el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.left-nav-wrapper {
  position: fixed;
  width: 65px;
  top: 25%;
  left: 15px;
  z-index: 999;
  padding: 20px 0;
  color: #595553;
  line-height: 15px;
  text-align: center;
  border-radius: 50px;
  background: $color-blue-10;
  border: 1px solid $color-blue-40;
  transition: all 0.3s;
  .item {
    cursor: pointer;
    margin: 10px 0;
  }
}
.open{
  color: #595553;
  text-align: right;
  line-height: 15px;
  padding: 10px 0;
  border-radius: 50px;
  background: $color-blue-10;
  border: 1px solid $color-blue-40;
  cursor: pointer;
  z-index: 100;
  position: relative;
  left: 20px;
}

.close {
  left: -67px;
  cursor: pointer;
  border-radius: 100%;
  width: 50px;
  height: 10px;
  margin: 20px auto 0 auto;
}
</style>