<template>
  <div class="body-box">
    <SidevarItem></SidevarItem>
    <div class="content">
      <Navbar></Navbar>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted, watch } from "vue";
import Navbar from "./sidebar/Navbar.vue";
import SidevarItem from "./sidebar/SidevarItem.vue";
import { useStore } from "vuex";
import axios from "axios";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
const api = ref("");
watch(
  () => router.currentRoute.value.fullPath,
  (newValue, oldValue) => {
    // console.log(newValue);
    if (newValue == "/schoolBus/statement") {
      store.commit("indexUp", 1);
      sessionStorage.setItem("sidevarItem", 1);
    }
    if (newValue == "/schoolBus/staff") {
      store.commit("indexUp", 2);
      sessionStorage.setItem("sidevarItem", 2);
    }
    if (newValue == "/schoolBus/account") {
      store.commit("indexUp", 3);
      sessionStorage.setItem("sidevarItem", 3);
    }
    if (newValue == "/schoolBus/bus") {
      store.commit("indexUp", 4);
      sessionStorage.setItem("sidevarItem", 4);
    }
    if (newValue == "/schoolBus/classes") {
      store.commit("indexUp", 6);
      sessionStorage.setItem("sidevarItem", 6);
    }
    if (newValue == "/schoolBus/buspath") {
      store.commit("indexUp", 5);
      sessionStorage.setItem("sidevarItem", 5);
    }

    if (newValue == "/schoolBus/waiting") {
      store.commit("indexUp", 8);
      sessionStorage.setItem("sidevarItem", 8);
    }
    if (newValue == "/schoolBus/blacklist") {
      store.commit("indexUp", 7);
      sessionStorage.setItem("sidevarItem", 7);
    }
    if (newValue == "/schoolBus/news") {
      store.commit("indexUp", 0);
      sessionStorage.setItem("sidevarItem", 0);
    }
  }
);
const tableData = reactive({
  list: [],
});
onBeforeMount(async () => {
  api.value = store.state.user.api;

  {
    let data = new FormData();
    data.set("page", 1);
    data.set("rows", 100);
    let res = await axios({
      method: "post",
      url: store.state.user.api + "/carBook/routelist.action",
      headers: {
        token: sessionStorage.getItem("token"),
      },
      data: data,
    });
    console.log(res, "路线管理");
    if (res.status == 200) {
      tableData.list = res.data.rows;
      tableData.list.forEach((item) => {
        // item.route2 = item.route;
        // item.route_end2 = item.route_end;
        item.path_start = item.route.split("-")[0];
        item.path_end = item.route.split("-")[1];
        if (item.is_repair == "" || item.is_repair == 0) {
          item.state = false;
        } else if (item.is_repair == 1) {
          item.state = true;
        }
      });
      let obj = {};
      var reduce = tableData.list.reduce((curr, next) => {
        /*判断对象中是否已经有该属性  没有的话 push 到 curr数组*/
        obj[next.route_end] ? "" : (obj[next.route_end] = curr.push(next));
        return curr;
      }, []);
      sessionStorage.setItem("route_endSelect", JSON.stringify(reduce));
      let obj2 = {};
      var reduce2 = tableData.list.reduce((curr, next) => {
        /*判断对象中是否已经有该属性  没有的话 push 到 curr数组*/
        obj2[next.route] ? "" : (obj2[next.route] = curr.push(next));
        return curr;
      }, []);
      sessionStorage.setItem("pathSelect", JSON.stringify(reduce2));
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
  {
    let data = new FormData();
    data.set("page", 1);
    data.set("rows", 100); //前面的key记得对应！
    // let res = await adminApi.adminLogin(data);
    let res = await axios({
      method: "post",
      url: store.state.user.api + "/carBook/cinfolist.action",
      headers: {
        token: sessionStorage.getItem("token"),
      },
      data: data,
    });
    console.log(res, "车辆管理");
    if (res.status == 200) {
      sessionStorage.setItem("busSelect", JSON.stringify(res.data.rows));
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
      if (res.data.message == "token错误") {
        router.push({
          path: `/login`,
        });
      }
    }
  }
});
</script>

<style scoped lang="scss">
.body-box {
  display: flex;
  .content {
    // min-width: 1740px;
    max-width: calc(100vw - 200px);
    width: 100%;
    height: calc(100vh);
    background-color: rgba(238, 238, 238, 1);
    :deep(.el-dialog__header .el-dialog__headerbtn) {
      outline: none;
    }
  }
}
</style>
<style lang="scss">
.is-message-box {
  .el-message-box__header {
    .el-message-box__headerbtn {
      outline: none;
    }
  }
  .el-message-box__btns {
    .el-button--primary {
      background-color: rgba(61, 81, 232, 1);
      border: 0.5px solid rgba(61, 81, 232, 1);
    }
    .el-button--primary:hover {
      background-color: rgb(119, 133, 239);
      border: 0.5px solid rgb(119, 133, 239);
    }
  }
}
.el-dialog__body {
  .el-input {
    .el-input__suffix-inner {
      color: rgba(61, 81, 232, 1);
    }
  }
}
.pw {
  .el-dialog__body {
    .el-form {
      .el-form-item {
        .queding {
          background-color: rgba(61, 81, 232, 1);
          border: 0.5px solid rgba(61, 81, 232, 1);
        }
        .queding:hover {
          background-color: rgb(119, 133, 239);
          border: 0.5px solid rgb(119, 133, 239);
        }
      }
    }
  }
}
#notification_1 {
  .el-notification__group {
    .el-notification__title {
      color: red;
    }
    .el-notification__content {
      p {
        // color: red;
      }
    }
  }
}
</style>
