<template>
  <div class="searchBox">
    <!-- <n-button  type="primary" @click="goBack" class="goBack">返回</n-button> -->
    <n-space>
      <n-select
        v-model:value="lecturerValue"
        filterable
        :options="lecturerOptions"
        placeholder="请选择培训讲师"
        style="width: 250px"
      />
      <n-select
        v-model:value="TrainerValue"
        :options="TrainerOptions"
        placeholder="请选择参训人"
        style="width: 250px"
      />
      <n-radio-group v-model:value="selectedValue3">
        <n-radio-button
          v-for="time in times"
          :key="time.value"
          :value="time.value"
        >
          {{ time.label }}
        </n-radio-button>
      </n-radio-group>
    </n-space>
  </div>
  <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, ref, toRefs, onMounted } from "vue";
import { useRouter, onBeforeRouteLeave } from "vue-router";

export default {
  name: "trainingDetails",
  setup() {
    const router = useRouter();

    const state = reactive({
      lecturerOptions: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "张三",
          value: "1",
        },
        {
          label: "李四",
          value: "2",
        },
        {
          label: "王五",
          value: "3",
        },
      ],
      TrainerOptions: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "张三",
          value: "1",
        },
        {
          label: "李四",
          value: "2",
        },
        {
          label: "王五",
          value: "3",
        },
      ],
      times: [
        {
          value: "0",
          label: "今天",
        },
        {
          value: "1",
          label: "近30天",
        },
        {
          value: "2",
          label: "近6个月",
        },
        {
          value: "3",
          label: "近一年",
        },
        {
          value: "4",
          label: "近三年",
        },
      ],
      //表格相关
      columns: [
        {
          type: "selection",
          width: "30",
        },
        {
          type: "序号",
          key: "id",
          width: "50",
        },
        {
          title: "日期",
          key: "date",
          align: "center",
        },
        {
          title: "培训讲师",
          key: "lecturer",
          align: "center",
        },
        {
          title: "培训地点",
          key: "place",
          align: "center",
        },
        {
          title: "评分",
          key: "score",
          align: "center",
        },
        {
          title: "培训时长",
          key: "times",
          align: "center",
        },
        {
          title: "培训内容",
          key: "constent",
          align: "center",
        },
        {
          title: "培训反馈",
          key: "feedback",
          align: "center",
        },
        {
          title: "参训人数",
          key: "number",
          align: "center",
        },
        {
          title: "参训部门",
          key: "department",
          align: "center",
        },
      ],
      data: [],
    });
    //分页

    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      onChange: (page) => {
        paginationReactive.page = page;
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
      },
    });
    //获取数据
    async function getTabelist() {
      const res = reactive(
      {"code":200,"message":"获取人员管理-人员培训详情","data":{"totalCount":14,"pageSize":10,"totalPage":1,"currPage":1,"list":[{"key":0,"id":0,"date":"2012-04-11 02:24:53","lecturer":"Mark Perez","place":"率资才月接己分需低值论重示交日。","score":5,"times":15,"constent":" 论改们接向带总确反路算更。","feedback":"拉世话白状素会应列什口给自先按能。","number":2,"department":"般飞音车样何江己年收传深她里部率具。"},{"key":1,"id":1,"date":"1992-11-06 00:27:07","lecturer":"Donald Anderson","place":"世南样半光设比起员因段形特风满在成。","score":8,"times":15,"constent":" 便治论别现第清住民交外院角。","feedback":"其品反层便光米响角也至这半级出采。","number":0,"department":"响运采去统铁所统属任共速自太委门七列。"},{"key":2,"id":2,"date":"1997-02-18 15:55:39","lecturer":"Betty Thomas","place":"京得动世心路压切常三江劳些运样。","score":8,"times":15,"constent":" 真传年米下过称南验真置山实北。","feedback":"法直采小示铁成音区前这没集约酸眼。","number":2,"department":"马第表三院细装先色体任全结集由月们。"},{"key":3,"id":3,"date":"2002-01-06 17:31:43","lecturer":"Laura Perez","place":"习极达位想众与总年但运特约科等。","score":3,"times":15,"constent":" 需外重按会头数采进省色活流学。","feedback":"增里称里山根与式很美今身法划头。","number":1,"department":"此等厂近争小养位个电构再议。"},{"key":4,"id":4,"date":"2011-01-08 15:27:10","lecturer":"Michael Robinson","place":"线越组江取持东形应究发什采。","score":0,"times":15,"constent":" 值却加张从里复完置之周布究全影组。","feedback":"却处应相收内满因级林装构反书。","number":2,"department":"命东时家料原放打之部列按流。"},{"key":5,"id":5,"date":"2021-12-23 11:52:55","lecturer":"George Williams","place":"效资来通把少再业引次置太头存党场。","score":3,"times":15,"constent":" 业条国市保算子复方包把部养。","feedback":"效式速片他发型许者保然得青严常专图定。","number":0,"department":"青边界目至求导际东连状运正选。"},{"key":6,"id":6,"date":"1971-10-21 01:33:17","lecturer":"Sandra Jones","place":"定权出东任后重片场容主世除界。","score":1,"times":15,"constent":" 或铁必温按支加近族们油圆意以。","feedback":"做两各由比将处带低联素期见。","number":1,"department":"当已子话响育她千及家活度主。"},{"key":7,"id":7,"date":"1998-07-25 14:28:55","lecturer":"Cynthia Thomas","place":"须全口养指按方组装由论济层因。","score":5,"times":15,"constent":" 按于几保温过边列义制六低政省写人大。","feedback":"基听根义院区易精场后影定政。","number":2,"department":"起门议流采求命才小参样记须育美边六。"},{"key":8,"id":8,"date":"1992-10-26 03:50:38","lecturer":"Charles Jones","place":"两适议建期那变称千亲准题就与。","score":8,"times":15,"constent":" 计效与按广很保使万商设人必年。","feedback":"节较老所资九之导代争见正土我那计部。","number":1,"department":"决联结究中容都易间件立根光着产。"},{"key":9,"id":9,"date":"2016-12-05 18:04:16","lecturer":"Sarah Smith","place":"并断白备非定理头并事农南易目。","score":2,"times":15,"constent":" 新青见总片结分亲天通历克学。","feedback":"条包资半要单快打且用又感反家素件。","number":1,"department":"与县常团且必又变采装观快代能几道然。"},{"key":10,"id":10,"date":"1970-02-22 05:35:15","lecturer":"Brenda Lopez","place":"华北拉建共提国高志受才而知后界也力。","score":2,"times":15,"constent":" 但法南六我反些始第议商者酸点西深历而。","feedback":"分加根则族又传每明但商酸市术示生区。","number":0,"department":"半效组素史全交从响完料龙政采如。"},{"key":11,"id":11,"date":"1989-09-18 04:29:20","lecturer":"George Hall","place":"型能标应派保名值工集情需族米严。","score":1,"times":15,"constent":" 热育养其阶通商转龙改机美些影志。","feedback":"太高感与习于置信产没去社着已写证。","number":0,"department":"统龙养然广规领设员权布什看要。"},{"key":12,"id":12,"date":"1976-01-07 14:56:45","lecturer":"Jennifer Hall","place":"土究照参对据保军海好照率。","score":4,"times":15,"constent":" 装细间被增江万群边料些通元第料转。","feedback":"所看采由三起进安见书看部石世不子发。","number":0,"department":"儿主温油精际战己题史于领当。"},{"key":13,"id":13,"date":"2014-12-19 19:20:51","lecturer":"Angela Gonzalez","place":"心道回基方些划任道增千事产才北按及。","score":1,"times":15,"constent":" 置出及军离也教命采音查元。","feedback":"解向达实专断组工划道段争第区。","number":1,"department":"发先段效流路水区着程世么阶可前农里品。"}]}}

      )
      if (res.code == 200) {
        state.data = res.data.list;
      }
      console.log(state.data);
    }
    // 返回
    const goBack = () => {
      router.back();
    };
    onMounted(() => {
      getTabelist();
    });
    return {
      lecturerValue: ref("0"),
      TrainerValue: ref("0"),
      selectedValue3: ref("0"),
      ...toRefs(state),
      pagination: paginationReactive,
      getTabelist,
      goBack,
    };
  },
};
</script>

<style lang='less' scoped>
.searchBox {
  margin-bottom: 20px;
  .goBack{
    margin-bottom: 10px;
  }
}
</style>