<template>
  <div class="app-container">
    <el-card>
      <template #header>班级管理</template>
      <el-button type="primary" size="mini" icon="el-icon-plus" plain @click="handleNew">新增</el-button>
      <mx-table class="mt5" :prop-defines="tableDefines" :rows="dataList">
        <template #type="{value}">{{ translateClassTypeName(value) }}</template>
        <template #subject="{value}">{{ translateSubjectName(value) }}</template>
        <template #actions="{row}">
          <el-button type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
          <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
        </template>
      </mx-table>
    </el-card>
    <el-dialog v-if="formVisible" :visible.sync="formVisible" ref="popupForm" width="550px" v-loading="submitting">
      <el-form ref="form" :model="form" :rules="rules" labelPosition="right" labelWidth="60px">
        <div class="fx-row fx-bet-cen">
          <el-form-item label="年级" prop="gradeId">
            <el-select v-model="form.gradeId" @change="handleGradeChanged" placeholder="请选择年级">
              <el-option v-for="(item,idx) in standardClassTree" :key="idx" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学年" prop="year">
            <el-input v-model="form.year" placeholder="请先选择年级" disabled></el-input>
          </el-form-item>
        </div>
        <el-form-item label="类型" prop="type">
          <el-select v-model="form.type" @change="handleTypeChanged" placeholder="请选择类型">
            <el-option v-for="(item,idx) in classTypeList" :key="idx" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科目" prop="subjectId">
          <el-checkbox-group v-model="form.subjectId" @change="handleSubjectChanged">
            <el-checkbox v-for="(item,idx) in userSubjectList" :key="idx" :label="item.subjectid">
              {{ item.subjectname }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称"></el-input>
        </el-form-item>
      </el-form>
      <div class="fx-row fx-end-cen mt20">
        <el-button @click="handleFormClose">取消</el-button>
        <el-button type="primary" @click="handleFormSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as busiClass from '@/api/webApi/busi-classes.js'
import config from '@/common/mx-config.js'
import classTreeMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
import subjectTranslate from '@/components/Cache/modules/mx-subject-translate-mixin.js'
import classTypeTranslate from '@/components/Cache/modules/mx-class-type-translate-mixin.js'

export default {
  mixins: [subjectTranslate, classTypeTranslate, classTreeMixin],
  props: {
    btnColorPrimary: {
      type: String,
      default: config.color.primary_up
    },
    btnColorWarn: {
      type: String,
      default: config.color.error
    }
  },
  data() {
    return {
      submitting: false,
      formVisible: false,
      dataList: [],
      tableDefines: {
        schoolName: { label: '学校' },
        gradeName: { label: '年级' },
        name: { label: '班级' },
        year: { label: '学年' },
        headteacherName: { label: '班主任' },
        studentCount: { label: '学生数量' },
        type: { label: '类型', slot: 'type' },
        subjectId: { label: '科目', slot: 'subject' },
        actions: { label: '操作', slot: 'actions' }
      },
      form: {
        gradeId: '',
        year: '',
        type: '',
        subjectId: [],
        name: ''
      },
      rules: {
        gradeId: [{
          required: true,
          message: '年级必填'
        }],
        year: [{
          required: true,
          message: '请先选择年级'
        }],
        type: [{
          required: true,
          message: '类型必填'
        }],
        subjectId: [{
          required: true,
          message: '至少选择1个科目'
        }],
        name: [{
          required: true,
          message: '名称必填'
        }]
      }
    }
  },
  methods: {
    translateSubjectReady() {
      // 列表显示强制依赖科目与类型
      if (this.classTypeListReady) this.handleQuery()
    },
    translateClassTypeReady() {
      // 列表显示强制依赖科目与类型
      if (this.userSubjectListReady) this.handleQuery()
    },
    handleQuery() {
      busiClass.getClasses().then(res => {
        this.dataList = res.data
      })
    },
    handleNew() {
      this.form = {
        gradeId: '',
        year: '',
        type: '',
        subjectId: [],
        name: ''
      }
      this.formVisible = true
    },
    handleDelete(item) {
      this.form = item
      this.$confirm('确认删除？').then(() => this.handleDeleteSubmit())
    },
    handleEdit(item) {
      this.form = this.deepClone(item)
      if (this.form.subjectId) {
        this.form.subjectId = this.form.subjectId.split(',').map(id => id * 1)
      } else {
        this.form.subjectId = []
      }
      this.formVisible = true
    },
    handleDeleteSubmit() {
      busiClass.deletes(this.form.id).then(res => {
        this.msgSuccess('删除成功')
        this.handleQuery()
        this.$store.dispatch('GetInfo') // 借机清除了用户缓存
      })
    },
    handleFormClose() {
      this.formVisible = false
    },
    handleGradeChanged() {
      const grade = this.classTree.find(g => g.grade == this.form.gradeId)
      this.form.year = grade?.year || ''
      this.recalculateName()
    },
    handleTypeChanged() {
      this.recalculateName()
    },
    handleSubjectChanged() {
      this.recalculateName()
    },
    recalculateName() {
      // class type
      const typeName = this.translateClassTypeName(this.form.type) || ''
      // subject
      const subjectName = this.translateSubjectName(this.form.subjectId) || ''
      //
      const year = this.form.year
      this.form.name = subjectName + typeName + year
    },
    handleFormSubmit() {
      this.$refs.form.validate().then(result => {
        const saveClass = this.form.id ? busiClass.update : busiClass.add
        this.form.subjectId = this.form.subjectId.toString()
        this.submitting = true
        saveClass(this.form).then(res => {
          this.handleFormClose()
          this.msgSuccess('保存成功')
          this.handleQuery()
          this.$store.dispatch('GetInfo') // 借机清除了用户缓存
        }).finally(() => this.submitting = false)
      })
    }
  }
}
</script>

<style>
page {
  background-color: #EEEEEE;
}
</style>
<style lang="scss" scoped>
.list-label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: normal;
  color: #999999;
}

.list-value {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: normal;
  color: #666666;
}

.list-important {
  font-family: PingFangSC-Medium, PingFang SC;
}

</style>
