<template>
  <layout-card>
    <el-tabs v-model="name" @tab-change="fnTabChange">
      <el-tab-pane label="风险管控清单" name="risk" lazy>
        <list name="risk" />
      </el-tab-pane>
      <el-tab-pane label="隐患排查清单" name="checkStandard" lazy>
        <list name="checkStandard" />
      </el-tab-pane>
    </el-tabs>
  </layout-card>
</template>

<script setup>
import { ref } from "vue";
import List from "./components/list.vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";

const router = useRouter();
const route = useRoute();
const defaultName = "risk";
const name = ref(route.query.name || defaultName);
onBeforeRouteUpdate((to, from, next) => {
  name.value = to.query.name || defaultName;
  next();
});
const fnTabChange = (name) => {
  router.replace({
    path: "/hazard_investigation/delete_inventory_management",
    query: {
      name,
    },
  });
};
</script>

<style scoped lang="scss"></style>
