<template>
  <!-- 分班完成的详情 -->
  <div class="app-container">
    <evaluation-title
      navBackButton
      :title="`${title}(分班完成名单)`"
      :navAction="closeDetail"
    ></evaluation-title>

    <el-card class="box-card" style="margin-bottom: 10px;">
      <mx-condition :query-params="queryParams" :require-fields="requireFields" :local-data="groupSource"
                    @query="handleGroupQuery" class="mb10"
      ></mx-condition>
    </el-card>
    <class-table type="2" :list="studentList"></class-table>
  </div>
</template>
<!--:setting-model="settingModel" :group-model-index="groupModelIndex"-->
<!--:group-model="groupModel" :default-group-id="scoreQueryGroupId"-->
<script>
import MxSelectTranslateMixin from '@/components/Cache/modules/mx-select-translate-mixin.js'
import MxCondition from '@/components/MxCondition/mx-condition'
import MxTransferMixin from '@/components/mx-transfer-mixin.js'
import ClassTable from '@/views/elective/dispatch/components/class-table'
import { classesResult } from '@/api/webApi/elective/dispatch'
import { mapGetters } from 'vuex'

export default {
  mixins: [MxTransferMixin, MxSelectTranslateMixin],
  components: { ClassTable, MxCondition },
  name: 'dispatch-detail',
  data() {
    return {
      requireFields: ['localGroupId'],
      studentList: [],
      queryParams: null
    }
  },
  computed: {
    ...mapGetters(['school']),
    groupSource() {
      if (!this.listGroupsOptions.length) return {}
      if (!this.prevData.groupIds?.length) return {}
      console.log('computed groupSource exec')
      const source = {
        groups: this.prevData.groupIds.map(groupId => {
          return {
            groupName: this.translateGroup(groupId),
            groupId: groupId
          }
        })
      }
      this.$nextTick(_ => this.queryParams = {
        localGroupId: this.prevData.group.groupId,
        dispatchClassId: this.prevData.classId || '',
        dispatchGender: '',
        dispatchRoundId: this.prevData.group.roundId
      })
      return source
    },
    title() {
      const school = this.school.schoolName
      // const round = this.prevData.parentQuery.round  暂时只能取到Id
      const year = this.prevData.parentQuery.year + '届'
      return `${school}${year}选科分班`
    }
  },
  methods: {
    closeDetail()  {
      this.$router.go(-1)
    },
    handleGroupQuery() {
       this.getDispatchResult()
    },
    getDispatchResult() {
      classesResult({
        classId: this.queryParams.dispatchClassId,
        groupId: this.queryParams.localGroupId,
        roundId: this.queryParams.dispatchRoundId,
        sex: this.queryParams.dispatchGender || null,
      }).then(res => {
        console.log(res)
        this.studentList = res.rows.map(item => {
          item.groupName = this.translateGroup(this.queryParams.localGroupId)
          return item
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
