<template>
  <div class="fx-column">
    <el-tabs v-model="activeTab" type="card" @tab-click="handleQuery">
      <el-tab-pane name="groupQuery" label="按组合查询">
        <mx-condition :query-params="queryParams" :require-fields="requireFields" :local-data="groupSource"
                      @query="handleGroupQuery" class="mb10"></mx-condition>
      </el-tab-pane>
      <el-tab-pane name="nameQuery" label="按学生查询">
        <el-form :model="nameQuery" inline label-width="60px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="nameQuery.name" clearable size="small" @keyup.enter="handleQuery"></el-input>
          </el-form-item>
          <el-form-item label="学号" prop="no">
            <el-input v-model="nameQuery.no" clearable size="small" @keyup.enter="handleQuery"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <mx-table :prop-defines="queryTableDefines" :rows="pagedDataList">
      <template #index="{$index}">
        {{ (localQuery.pageNum - 1) * localQuery.pageSize + $index + 1 }}
      </template>
      <template #subjects="{row}">
        {{ row.subjects.map(s => `${s.subjectName}:${s.score}`).join(' ') }}
      </template>
    </mx-table>
    <pagination v-show="dataList.length>localQuery.pageSize" :total="dataList.length" :page.sync="localQuery.pageNum"
                :limit.sync="localQuery.pageSize"></pagination>
  </div>
</template>

<script>
import MxCondition from '@/components/MxCondition/mx-condition'
import RoundModelConvert from './round-model-convert'
import { queryScoreImportDetails } from '@/api/webApi/selection'

export default {
  mixins: [RoundModelConvert],
  name: 'round-score-query',
  components: { MxCondition },
  props: {
    settingModel: {
      type: Object,
      default: _ => ({})
    },
    groupModelIndex: {
      type: Number,
      default: 0
    },
    groupModel: {
      type: Object,
      default: () => ({})
    },
    defaultGroupId: {
      type: Number | String,
      default: ''
    }
  },
  data() {
    return {
      activeTab: 'groupQuery',
      requireFields: ['localGroupId'],
      queryParams: {
        localGroupId: this.defaultGroupId
      },
      nameQuery: {
        name: '',
        no: ''
      },
      dataList: [],
      queryTableDefines: {
        index: {
          label: '序号',
          slot: 'index'
        },
        customerName: {
          label: '姓名'
        },
        customerNo: {
          label: '学号'
        },
        groupName: {
          label: '组合'
        },
        groupRank: {
          label: '组合排名'
        },
        totalScore: {
          label: '总分'
        },
        subjects: {
          label: '明细',
          slot: 'subjects'
        }
      },
      localQuery: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  computed: {
    groupSource() {
      return { groups: this.groupModel.roundGroups }
    },
    groupQuery() {
      return {
        groupId: this.queryParams.localGroupId
      }
    },
    pagedDataList() {
      if (!this.dataList.length) return []
      const startIdx = (this.localQuery.pageNum - 1) * this.localQuery.pageSize
      return this.dataList.slice(startIdx, startIdx + this.localQuery.pageSize)
    }
  },
  methods: {
    handleGroupQuery(model) {
      this.queryParams = model
      this.handleQuery()
    },
    resetQuery() {
      this.nameQuery.name = ''
      this.nameQuery.no = ''
      this.handleQuery()
    },
    handleQuery() {
      this.localQuery.pageNum = 1
      const params = this[this.activeTab]
      const round = this.toApiModel(this.settingModel)
      round.activeGroupModelIndex = this.groupModelIndex // NOTE: 这里重用了activeGroupModelIndex，少定义了一个参数字段
      const query = {
        ...params,
        round
      }
      queryScoreImportDetails(query).then(res => {
        this.dataList = res['rows']
      })
    }
  }
}
</script>

<style scoped>

</style>
