<template>
  <el-dialog title="信息修改" :visible.sync="show" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="学校" prop="schoolId">
            <el-select v-model="form.schoolId" placeholder="请选择学校" filterable clearable size="small" style="width:100%">
              <el-option v-for="item in schoolList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自定义校名" prop="customSchoolName">
            <el-input v-model="form.customSchoolName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="班级" prop="customClassName">
            <el-input v-model="form.customClassName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高考年份" prop="endYear">
            <el-input v-model.number="form.endYear" placeholder="请输入高考年份" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="form.mobile" placeholder="请输入手机" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="选科组合" prop="groupId">
            <el-select v-model="form.groupId" placeholder="请选择科目组合" clearable size="small">
              <el-option v-for="item in groupList" :key="item.groupId" :label="item.name" :value="item.groupId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分数" prop="score">
            <el-input v-model="form.score" placeholder="请输入分数" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getAllBusiSchools } from "@/api/voluntary/busiSchools";
import { listBusiClasses } from "@/api/voluntary/busiClasses";
import { locationList } from "@/api/voluntary/sysLocations";
import { updateBusiCards } from "@/api/voluntary/busiCards";
import { listAllSelectedGroup } from "@/api/voluntary/selectedGroup";
export default {
  name: 'card-edit',
  data() {
    return {
      proList: [],
      cityList: [],
      areaList: [],
      schoolList: [],
      classList: [],
      groupList: [],
      show: false,
      form: {
        schoolId: null,
        classId: null,
        groupId: null,
        customSchoolName: '',
        customClassName: ''
      },
      rules: {}
    }
  },
  created() {
    // 获取省
    //this.getAreaList(1, 'proList');
    let vm = this;
    getAllBusiSchools().then(res => {
      vm.schoolList = res.data;

    });
    listAllSelectedGroup().then(res => {
      vm.groupList = res.rows || [];
    })
  },
  methods: {
    async open(data) {
      this.form = { ...data };
      // 先加载学校列表
      await this.changeSchool();
      this.show = true;
    },
    changePro(event) {
      this.form.city = '';
      this.form.area = '';
      this.cityList = [];
      this.areaList = [];
      this.getAreaList(event, "cityList");
    },
    changeCity(event) {
      this.form.area = '';
      this.areaList = [];
      this.getAreaList(event, "areaList");
    },
    /** 查询省市区 */
    getAreaList(parentId, obj) {
      let vm = this;
      locationList({ parentId: parentId }).then(response => {
        vm[obj] = response.data;
      });
    },
    async changeSchool() {
      let res = await listBusiClasses({ pageSize: 100, schoolId: this.form.schoolId });
      this.classList = res.rows;
    },
    submitForm() {
      let vm = this;
      let { cardId, schoolId, classId, endYear, name, mobile, groupId, score } = this.form;
      let data = { cardId, schoolId, classId, endYear, name, mobile, groupId, score };
      updateBusiCards(data).then(res => {
        vm.$modal.msgSuccess("修改成功");
        vm.$emit('refresh');
        vm.show = false;
      })
    },
    cancel() {
      this.show = false;
    }
  },
}
</script>
