<!-- eslint-disable vue/no-deprecated-v-bind-sync -->
<template>
  <div class="v-page classify_page">
    <div class="v-ctx" v-loading="paper_list_loading">
      <FormLayout
        ref="formLayoutRef"
        :items="formItems"
        :model="form"
        :rules="rules"
        label-width="70px"
        label-position="right"
        :inline="true"
      >
      <template v-slot:title>
        <!-- <el-input placeholder="请输入查询内容" v-model="form.title" class="input-with-select" clearable>
          <el-button slot="append" @click="pagingFindList">查询</el-button>
        </el-input> -->
        <QueryInput v-model="form.title" @query="pagingFindList"></QueryInput>
      </template>
      <template v-slot:btns>
      </template>
      </FormLayout>
      <TableLayout :column="column" :data="table_data" :pageInfo="page_info"
        @current-change="(e) => pagingChange({ currentPage: e })" @size-change="(e) => pagingChange({ pageSize: e })">
        <template v-slot:action="props">
          <el-button type="text" icon="el-icon-check" @click="onSelect($event,props.row)" >选择</el-button>
        </template>
      </TableLayout>
    </div>

  </div>
</template>

<script>
import { TableLayout, FormLayout } from '@/components/layout'

import { pagingFindPaperApi } from '@/api/assessment-evaluation/paper'
import QueryInput from '@/components/widget/QueryInput.vue'
export default {
  components: {
    TableLayout, FormLayout, QueryInput
  },

  data: () => ({
    table_data: [],
    page_info: { currentPage: 1, pageSize: 10, total: 0 },
    current_classify_id: null,
    // 试题分类树是否加载中
    paper_list_loading: false,
    form: { title: '', status: 1 }
  }),
  props: {
    mountedLoad: {
      default: false
    }
  },
  created () {
    this.formItems = [
      { prop: 'title' },
      { prop: 'btns', model: { class: 'gy-btns' } }
    ]
    this.rules = {
      // name: { required: true, message: '请输入角色名称', trigger: 'blur' }
    }
    this.column = [
      { prop: 'title', label: '试卷名', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'classify', label: '试卷分类', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'totalScore', label: '总分', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'questionCount', label: '试题总数', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'creator', label: '创建人', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'createTime', label: '创建时间', width: 150, align: 'center', 'show-overflow-tooltip': true },
      {
        prop: 'action',
        label: '操作',
        //  width: 350,
        width: 80,
        align: 'center',
        'show-overflow-tooltip': true
      }
    ]
  },
  mounted () {
    if (this.mountedLoad) this.pagingFindList()
  },
  activated () {
    this.pagingFindList()
  },
  methods: {
    // 组件发出的自定义事件。
    onSelect (_, row) {
      this.$emit('onSelect', row)
    },
    // 页面更改时调用的方法。
    pagingChange (event) {
      if ((typeof event.currentPage !== 'number') && (typeof event.pageSize !== 'number')) return

      this.page_info = { ...this.page_info, ...event }
      this.pagingFindList()
    },
    // 将 page_info 设置为默认值。
    initPageInfo () {
      this.page_info = { currentPage: 1, pageSize: this.page_info.pageSize, total: 0 }
    },
    // 当用户单击搜索按钮时调用的方法。
    pagingFindList (e) {
      if (e instanceof PointerEvent) {
        this.initPageInfo()
      }
      let classifyId = this.current_classify_id
      if (classifyId === 'system') classifyId = null
      this.paper_list_loading = true
      pagingFindPaperApi({ ...this.page_info, classifyId, ...this.form }).then(res => {
        const { currentPage, pageSize, total } = res.data
        this.table_data = res.data.data
        // eslint-disable-next-line eqeqeq
        if (this.table_data.length === 0 && this.page_info.currentPage != 1) {
          this.initPageInfo()
          this.pagingFindList()
        }
        this.page_info = { currentPage, pageSize, total }
      }).finally(_ => {
        this.paper_list_loading = false
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .form_layout{
    margin-top: 16px;
     .el-form-item:last-child{
      float:right;
    }
  }
</style>
