<template>
  <n-form
    inline
    :label-width="100"
    label-placement="left"
    size="medium"
    ref="queryFormRef"
    class="form"
    :model="queryForm"
  >
    <n-form-item label="开始时间：" path="datetime">
      <n-date-picker
        v-model:value="queryForm.timeStart"
        type="datetime"
        clearable
      />
    </n-form-item>
    <n-form-item label="结束时间：" path="">
      <n-date-picker
        v-model:value="queryForm.timeEnd"
        type="datetime"
        clearable
      />
    </n-form-item>
    <n-form-item label="培训讲师：" path="lecturer">
      <n-select
        v-model:value="queryForm.lecturer"
        filterable
        :options="options1"
        style="width: 200px"
      />
    </n-form-item>
    <!-- <n-form-item label="参训人：" path="participants">
      <n-select
        v-model:value="queryForm.participants"
        filterable
        :options="options2"
        style="width: 200px"
      />
    </n-form-item> -->
    <n-form-item label="泵站：" path="pumpgate">
      <n-select
        v-model:value="queryForm.pumpgate"
        filterable
        :options="options3"
        style="width: 200px"
      />
    </n-form-item>
  </n-form>
  <div class="tableBox">
    <n-data-table
      ref="tableRef"
      :bordered="false"
      :max-height="1000"
      striped
      :columns="columns"
      :data="data"
      :pagination="pagination"
    ></n-data-table>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, h } from "vue";
import { NButton } from "naive-ui";
import { useRouter, useRoute } from "vue-router";

export default {
  namr: "trainingCourse",
  setup() {
    const router = useRouter();
    const state = reactive({
      queryForm: {
        timeStart: [],
        timeEnd: [],
        lecturer: "",
        participants: "",
        pumpgate: "",
      },
      options1: [
        { label: "讲师1", value: "0" },
        { label: "讲师2", value: "1" },
        { label: "讲师3", value: "2" },
      ],
      options2: [
        { label: "参训人1", value: "0" },
        { label: "参训人2", value: "1" },
        { label: "参训人3", value: "2" },
      ],
      options3: [{ label: "荣军泵站", value: "0" }],
      //表格相关
      columns: [
        {
          title: "序号",
          key: "id",
          width: "60",
          align: "center",
        },
        {
          title: "日期",
          key: "date",
          align: "center",
          width: "160",
        },
        {
          title: "培训讲师",
          key: "lecturer",
          align: "center",
        },
        {
          title: "培训地点",
          key: "place",
          align: "center",
          width: "230",
        },
        {
          title: "综合评分",
          key: "score",
          align: "center",
        },
        {
          title: "培训内容",
          key: "constent",
          align: "center",
          width: "200",
        },
        {
          title: "培训时长",
          key: "times",
          align: "center",
        },
        {
          title: "参训人数",
          key: "number",
          align: "center",
        },
        {
          title: "参训部门",
          key: "department",
          align: "center",
        },
        {
          title: "查询培训明细",
          key: "actions",
          align: "center",
          width: "240",
          render(row) {
            const btn = state.actionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: "10px",
                  },
                  type: item.btnType,
                  onClick: () => handleClick(row, item.type),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      data: [],
      actionColumn: [
        {
          size: "small",
          btnType: "primary",
          type: "details",
          default: "查看培训明细",
        },
        {
          size: "small",
          btnType: "primary",
          type: "score",
          default: "查看培训评分",
        },
      ],
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 30],
      showQuickJumper: true,
      onChange: (page) => {
        paginationReactive.page = page;
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
      },
    });
    // 获取表格数据
    const getTableData = () => {
      state.data = Array.apply(null, { length: 56 }).map((_, index) => ({
        id: index,
        date: "2022.01.26 10:05:46",
        lecturer: `张三${index+1}`,
        place: "龙王嘴泵站2号楼301会议室",
        score: "90",
        constent: "泵站日常管理",
        times: 1,
        number: 10,
        department: "信息中心及运营中心",
      }));
    };
    const handleClick = (row, type) => {
      switch (type) {
        case "details":
            router.push({
                path: "/trainingDetails",
                query:{
                    id:row.id,

                }
            })
      }
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      getTableData,
      pagination: paginationReactive,
    };
  },
};
</script>

<style>
</style>