<template>
    <div>
      <p style="margin-bottom: 10px;">该组合录取人数为：{{roundGroup.number}}</p>
      <el-table
        :data="formatSetting"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="sortIndex"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="组合"
          width="180"
        >
          <template>
            {{roundGroup.groupName}}
          </template>
        </el-table-column>
        <el-table-column
          prop="className"
          label="班级名称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="人数"
        >
          <template slot-scope="scope">
              <el-input-number :min="1" :max="roundGroup.number?setPubMax(scope.$index):Infinity" v-model="scope.row.expectedCount" @change="countEdit(scope.row,scope.$index)" ></el-input-number>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          label="操作"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <el-popover-->
<!--              placement="bottom"-->
<!--              title="标题"-->
<!--              width="200"-->
<!--              trigger="click"-->
<!--              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">-->
<!--              <el-switch-->
<!--                v-model="scope.row.active"-->
<!--                active-color=""-->
<!--                active-text="按排名"-->
<!--                inactive-text="随机"-->
<!--                inactive-color="#ff4949"-->
<!--                slot="reference">-->
<!--              </el-switch>-->
<!--            </el-popover>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <el-radio-group class="mt10" v-model="mode">
        <el-popover
          placement="bottom-start"
          width="200"
          trigger="hover"
          content="默认分配方式,按成绩平均分配">
          <el-radio-button class="radio-btn" label="RankBalance" slot="reference">均衡</el-radio-button>
        </el-popover>
        <el-popover
          placement="bottom-start"
          width="200"
          trigger="hover"
          content="按成绩优先分配">
          <el-radio-button class="radio-btn" label="RankPriority" slot="reference">排名</el-radio-button>
        </el-popover>
        <el-popover
          placement="bottom-start"
          width="200"
          trigger="hover"
          content="随机分配">
          <el-radio-button class="radio-btn" label="random" slot="reference">随机</el-radio-button>
        </el-popover>
      </el-radio-group>
    </div>
</template>

<script>
import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
import { saveSettings, applySettings } from '@/api/webApi/elective/dispatch'
export default {
  name: 'set-classcount',
  mixins: [MxClassTreeTranslateMixin],
  data() {
    return {
      setShow: false,
      roundId: '',
      roundGroup: {},
      mode: 'RankBalance',
      // RankBalance, // 按成绩平均分配，默认按这种分配方式，可保证各个班成绩都差不多
      // RankPriority, // 按成绩优先，会导致成绩好的集中到一起
      // Random // 随机
      settingContainer: []
    }
  },
  computed: {
    // input-number设置公用max
    setPubMax() {
      return (data) => {
        let allSelect = 0
        let maxQuantit = this.roundGroup.number
        this.settingContainer.forEach((item, index) => {
          if (index !== data) {
            allSelect += item.expectedCount
          }
        })
        return maxQuantit-allSelect
      }
    },
    formatSetting() {
      return this.settingContainer.map((item,index) => {
        return {
          sortIndex: index + 1,
          expectedCount: item.expectedCount,
          classId: item.classId,
          className: this.getClassName(item.classId),
        }
      })
    },
  },
  inject: ['refreshData'],
  methods: {
    countEdit(newVal,index){
      this.settingContainer[index].expectedCount = newVal.expectedCount
    },
    init(roundGroup,settingContainer) {
      this.roundGroup = roundGroup
      this.roundId = roundGroup.roundId
      if( settingContainer.length > 0) {
        this.settingContainer = settingContainer.filter(item => item.groupId == roundGroup.groupId)
        console.log(this.settingContainer)
        return
      }
      // 没有setting就初始化人数
      const remainder = roundGroup.number % roundGroup.classCount // 余数
      const divide = Math.floor(roundGroup.number / roundGroup.classCount) // 向下取整的除数
      this.settingContainer = settingContainer.filter(item => item.groupId == roundGroup.groupId).map((item,index)  => {
        if (index + 1 <= remainder) {
          // 余数平分给前面
          item.expectedCount = divide + 1
        }else {
          // 余数分完
          item.expectedCount = divide
        }
        return item
        console.log(item)
      })
    },
    valid() {
      // 验证
      // 累计人数
      const count =this.formatSetting.reduce((pre, cur) => {
          return pre + cur.expectedCount
      }, 0)
      if(count != this.roundGroup.number) {
        this.$message.warning('还有学生未分班')
        return
      }
      // 校验通过 保存
      this.confirm()
      return true
    },
    saveSettings() {
      saveSettings(
        {roundId: this.roundId }, this.settingContainer ).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
        }
      }).finally(res => {
        this.refreshData()
      })
    },
    confirm() {
      console.log(this.settingContainer)
      // 应用分班配置
      applySettings({
        roundId:this.roundId,
        mode:this.mode,
        groupId:this.roundGroup.groupId,
      }).then(res => {})
      // 保存settings
      this.$nextTick(_ => {
        this.saveSettings()
      })
    }
  }
}
</script>

<style scoped>
.radio-btn{
  margin-right: 20px;
}
</style>
