<template>
  <layout-card>
    <el-tabs v-model="name" @tab-change="fnTabChange">
      <el-tab-pane :label="labelName[pathName]" name="self_administered" lazy>
        <list-view
          tab-name="self_administered"
          :path-name="pathName"
          :label-name="labelName[pathName] + '名称'"
        />
      </el-tab-pane>
    </el-tabs>
  </layout-card>
</template>

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

const props = defineProps({
  pathName: {
    type: String,
    default: "safety_production_responsibility_system",
  },
});
const labelName = {
  safety_production_responsibility_system: "安全生产责任制",
  safety_production_management_system: "安全生产管理制度",
  safety_operating_procedures: "安全操作规程",
};
const router = useRouter();
const route = useRoute();
const defaultName = "self_administered";
const name = ref(route.query.name || defaultName);
onBeforeRouteUpdate(async (to, from, next) => {
  name.value = to.query.name || defaultName;
  next();
});
const fnTabChange = (name) => {
  router.replace({
    path: `/three_institutional_libraries/${props.pathName}`,
    query: {
      name,
    },
  });
};
</script>

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