<template>
  <div>
    <layout-table :data="catalogueList" :show-pagination="false">
      <el-table-column show-overflow-tooltip prop="NAME" label="目录" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" text link @click="fnGoEdit(row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </layout-table>
    <component
      v-if="data.current"
      :is="data.current.component"
      v-model:current="data.current"
      :title="data.current.NAME"
      :year="year"
      :type="data.current.TYPE"
      :study-task-id="studyTaskId"
    />
  </div>
</template>
<script setup>
import LayoutTable from "@/components/table/index.vue";
import ArchivesPdf from "./components/archives_pdf.vue";
import Capital from "./components/capital.vue";
import Edumanager from "./components/edumanager.vue";
import Eduplan from "./components/eduplan.vue";
import Postman from "./components/postman.vue";
import Teacher from "./components/teacher.vue";
import ArchivesZip from "../semester/components/archives_zip.vue";
import Handout from "../semester/components/handout.vue";
import Paper from "../semester/components/paper.vue";
import Report from "../semester/components/report.vue";
import Result from "../semester/components/result.vue";
import Sign from "../semester/components/sign.vue";
import TrainingSchedule from "../semester/components/training_schedule.vue";
import { computed, markRaw, reactive } from "vue";
import { useVModels } from "@vueuse/core";
import { useRoute } from "vue-router";

const props = defineProps({
  source: {
    type: String,
    required: false,
    default: "", // 来源: corp=一企一档, semester=一期一档 如果不传会从路由中获取一次
  },
  year: {
    // 年份, 来源为corp=一企一档
    type: String,
    required: false,
    default: "",
  },
});
const { source, year } = useVModels(props);

const route = useRoute();
const { source: sourceFromRoute, studyTaskId } = route.query;

const data = reactive({
  current: undefined,
  editVisible: false,
  semesterList: [
    { NAME: "安全培训教材会审表", TYPE: 5, component: markRaw(ArchivesPdf) },
    {
      NAME: "培训日程安排通知/也可称为培训计划",
      TYPE: 101,
      component: markRaw(TrainingSchedule),
    },
    { NAME: "安全培训教材或课程讲义", TYPE: 106, component: markRaw(Handout) },
    { NAME: "安全培训教育记录及签字表", TYPE: 102, component: markRaw(Sign) },
    { NAME: "培训影像资料", TYPE: 7, component: markRaw(ArchivesZip) },
    { NAME: "培训考核试卷", TYPE: 103, component: markRaw(Paper) },
    { NAME: "学员考核成绩统计表", TYPE: 104, component: markRaw(Result) },
    { NAME: "本期综合考评报告", TYPE: 105, component: markRaw(Report) },
    {
      NAME: "与培训机构签订的服务合同或者协议复印件",
      TYPE: 6,
      component: markRaw(ArchivesZip),
    },
  ],
  corpList: [
    { NAME: "安全培训教育制度", TYPE: 1, component: markRaw(ArchivesPdf) },
    {
      NAME: "关于任命安全教育主管部门和人员的文件",
      TYPE: 2,
      component: markRaw(ArchivesPdf),
    },
    { NAME: "三岗人员管理台账", TYPE: 101, component: markRaw(Postman) },
    { NAME: "培训需求调查表", TYPE: 3, component: markRaw(ArchivesPdf) },
    { NAME: "本单位师资管理台账", TYPE: 102, component: markRaw(Teacher) },
    { NAME: "年度安全培训教育计划", TYPE: 103, component: markRaw(Eduplan) },
    {
      NAME: "年度安全培训教育管理台账",
      TYPE: 104,
      component: markRaw(Edumanager),
    },
    {
      NAME: "年度培训资金提取和使用情况管理台账",
      TYPE: 105,
      component: markRaw(Capital),
    },
    { NAME: "培训条件证明材料", TYPE: 4, component: markRaw(ArchivesPdf) },
  ],
});

const catalogueList = computed(() => {
  let sourceTemp;
  if (!source.value || source.value.length < 1) {
    sourceTemp = sourceFromRoute;
  } else {
    sourceTemp = source.value;
  }
  if (sourceTemp === "corp") {
    return data.corpList;
  } else if (sourceTemp === "semester") {
    return data.semesterList;
  }
  return [];
});

const fnGoEdit = (row) => {
  data.current = undefined;
  if (row) {
    data.current = row;
  }
};
</script>

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