<template>
  <el-dialog
    title="班级调整"
    :visible.sync="show"
    :close-on-click-modal="false"
    width="70%"
  >
    <el-form ref="form" :model="form" label-width="50px" label-position="right">
      <el-row>
        <el-row>

          <el-col class="flex-center-column" :span="12">
            <el-form-item>
              <mx-select @change="getStudents('from',$event)" :span="12" :list="display" v-model="fromClassId"
                         placeholder="请选择" item-label="className" item-value="classId"
              ></mx-select>
            </el-form-item>
            <el-form-item>
              <class-table :list="studentsTableLeft" @confirm="studentSelected($event,'from')"></class-table>
            </el-form-item>
          </el-col>
          <el-col class="flex-center-column" :span="12">
            <el-form-item>
              <mx-select @change="getStudents('to',$event)" :span="12" :list="display" v-model="toClassId"
                         placeholder="请选择" item-label="className" item-value="classId"
              ></mx-select>
            </el-form-item>
            <el-form-item>
              <class-table :list="studentsTableRight" @confirm="studentSelected($event,'to')"></class-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24" class="flex-center" v-if="fromClassId && toClassId" style="margin-top: 20px">
          <el-transfer
            v-model="tranRight"
            :titles="[fromClassId ? `${getClassName(fromClassId)}(添加)` : '未选择', toClassId ? `${getClassName(toClassId)}(添加)`: '未选择']"
            :data="parentFrame"
            @change="transferChange"
          >
          </el-transfer>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import { classesResult, resultDispatch } from '@/api/webApi/elective/dispatch'
import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
import MxSelect from '@/components/mx-select/mx-select'
import ClassTable from './class-table'

export default {
  name: 'class-adjust',
  components: {
    MxSelect,
    ClassTable
  },
  inject: ['refreshData'],
  mixins: [MxClassTreeTranslateMixin],
  data() {
    return {
      form: {},
      studentsTableLeft: [],
      studentsTableRight: [],
      fromClassId: '',
      toClassId: '',
      group: '',
      settings: [],
      selectedLeft: [],
      selectedRight: [],
      show: false,
    }
  },
  created() {
  },
  computed: {
    tranRight() {
      if (!this.selectedLeft.length) return []
      return this.selectedLeft.map(s => { return s.studentId })
    },
    parentFrame() {
      const selected = this.selectedRight.concat(this.selectedLeft)
      console.log(selected)
      return selected.map(item => {
        return {
          key: item.studentId,
          label: item.name,
          disabled: true
        }
      })
    },
    display() {
      return this.settings.map(item => {
        return {
          classId: item.classId,
          className: this.getClassName(item.classId),
          disabled: this.getDisable(item.classId)
        }
      })
    }
  },
  methods: {
    close() {
      this.show =false,
        this.format()
    },
    format(){
      this.form = {}
      this.studentsTableLeft =[]
      this.studentsTableRight =[]
      this.fromClassId = ''
      this.toClassId = ''
      this.group = ''
      this.settings = []
      this.selectedLeft = []
      this.selectedRight = []
      this.show =false
    },
    getTranLeft() {
      // 获取左tran实际的数据
      // 母框去重右框
      return this.parentFrame.filter(item => {
        if (this.tranRight.findIndex(r => r == item.key) == -1) {
          return item
        }
      })
    },
    getTranRight() {
      // 获取左tran实际的数据
      // 母框去重右框
      return this.parentFrame.filter(item => {
        if (this.tranRight.findIndex(r => r == item.key) != -1) return item
      })
    },
    saveResultDispatch(clazzId,students) {
      // 分派转移
      resultDispatch({
        roundId: this.group.roundId,
        students: students,
        toClazzId: clazzId
      }).then(res => {
        if(res.code == 200) this.$message.success(res.msg)
        console.log(res)
      })
    },
    confirm() {
      if( !this.fromClassId || !this.toClassId) {
        this.$message.warning('请先选择需要调整的两个班级')
        return
      }
      // 左tran 是包含 右边的  （只是不显示右tran的数据）要先去重
      // 左tran 去掉跟左table重复的数据就是 右tran 需要调换的
      // 同理右tran 去掉跟右table重复的数据就是 左tran 需要调换的
      // 1.去重
      // 左tran实际勾选去除左边table
      const left = this.getTranLeft().filter(item => {
        return this.studentsTableLeft.findIndex(s => s.studentId == item.key) == -1
      }).map(item => item.key)
      //  右tran实际勾选去除右边table
      const right = this.getTranRight().filter(item => {
        return this.studentsTableRight.findIndex(s => s.studentId == item.key) == -1
      }).map(item => item.key)
      console.log(left) // 左边的学生放入左边表格
      if( !left.length && !right.length) {
        this.$message.warning('调整人数不可为0')
        return
      }
      // 2.分别调用调换接口
      if (left.length) this.saveResultDispatch(this.fromClassId,left)
      console.log(left)// 左边的学生放入左边表格
      console.log(right)// 右边的学生放入右边表格
      if (right.length) this.saveResultDispatch(this.toClassId,right)
      this.$nextTick(()=> {
        this.show = false
        // 注销数据
        this.format()
        this.refreshData()
      })

      // 2.分别调用调换接口

    },
    studentSelected(list, type) {
      // 1 添加至母框
      if (type == 'from') this.selectedLeft = list
      if (type == 'to') this.selectedRight = list

    },
    getStudents(type, classId) {
      console.log(type)
      console.log(classId)
      classesResult({
        groupId: this.group.groupId,
        roundId: this.group.roundId,
        classId: classId
      }).then(res => {
        if( type == 'from') {
          this.studentsTableLeft = res.rows
        }else if( type == 'to') {
          this.studentsTableRight = res.rows
        }
      })
    },
    // 判断是否有这个元素
    getDisable(itemId) {
      return this.fromClassId == itemId || this.toClassId == itemId
    },
    transferChange(currentVal, direction, array) {
      if (!this.fromClassId || !this.toClassId) {
        this.$message.warning('需要选择两个班级')
        return
      }
    },
    open(row, settings) {
      console.log(row)
      console.log(settings)
      this.group = row
      this.settings = settings
      this.show = true
    }
  }
}
</script>

<style scoped>
.flex-center-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
