<style lang="less" scoped>
  @import './AddStudent.less';
</style>
<style lang="less">
  .add-student .ivu-modal-content{
    background-color:#404040 !important;
  }
  .add-student .ivu-modal-header {
    border:none;
  }
  .add-student .ivu-modal-footer {
    border:none;
  }
  .add-student .ivu-modal-mask {
    background-color:rgba(20,20,20,.7);
  }
  .add-student .ivu-input {
    background:none;
    border:none;
    border-bottom:1px solid #828282;
    border-radius:0px;
    color:white;
    font-size:16px;
  }
  .add-student .ivu-form-item-label {
    color:#929292;
  }
  .add-student .ivu-form-item-required .ivu-form-item-label:before{
    color:#6DE2C4;
  }
  .add-student .ivu-form-item-error .ivu-input:focus {
    border:none;
  }
  .add-student .ivu-input-group-prepend{
    border:none;
    background:none;
    color:white;
    font-size:14px;
  }
  .add-student .ivu-checkbox-wrapper {
    float:right;
    color:#929292;
  }
  .add-student .ivu-checkbox-inner {
    background:none;
    border-color:#6DE2C4;
  }
  .add-student .ivu-checkbox-checked .ivu-checkbox-inner:after {
    border-color:#6DE2C4;
  }
  .account-form .ivu-select-selection {
    border-color: #828282;
  }
  .account-form .ivu-select-selection:hover {
    border-color: #57a3f3;
  }
  .account-form .ivu-select-input {
    color:white;
    font-size:16px;
  }
  .add-student .ivu-modal-close .ivu-icon-ios-close:hover {
    color:white !important;
  }

</style>
<template>
  <Modal v-model="show" width="520" class="add-student" :mask-closable="false" @on-cancel="cancel">
    <div slot="header"></div>
    <div class="account-form">
      <!--新增学生表单-->
      <Form ref="studentInfoForm" :model="studentInfo" label-position="top" :rules="ruleValidate" :show-message="showError" v-if="bizType == 1">
        <FormItem :label="$t('stuAccount.accountInfo')" prop="account">
          <Input v-model="studentInfo.account" :placeholder="$t('stuAccount.accountHolder')" @on-change="setPassword(same)">
          <span slot="prepend">{{schoolCode}}#</span>
          </Input>
        </FormItem>
        <FormItem :label="$t('stuAccount.passwordInfo')" prop="password">
          <Input v-model="studentInfo.password" :placeholder="$t('stuAccount.passwordHolder')"></Input>
          <Checkbox v-model="same" @on-change="setPassword">{{$t('stuAccount.isSame')}}</Checkbox>
        </FormItem>
        <FormItem :label="$t('stuAccount.stuName')" prop="name">
          <Input v-model="studentInfo.name" :placeholder="$t('stuAccount.stuNameHolder')"></Input>
        </FormItem>
        <FormItem :label="$t('stuAccount.stuSeatNo')" prop="seatNo">
          <Input type="number" number v-model="studentInfo.seatNo" :min="1" :placeholder="$t('stuAccount.stuSeatNoHolder')"></Input>
        </FormItem>
        <FormItem :label="$t('stuAccount.classroomInfo')" prop="classroomName">
          <Select filterable v-model="studentInfo.classroomName" style="width:100%" :placeholder="$t('stuAccount.classroomInfoHolder')">
            <Option v-for="(item,index) in classroomList" :value="item.name" :key="item.id" @click.native="getCurrentClassroom(index)">{{ item.name }}</Option>
          </Select>
          <span style="float:right;color:#6DE2C4;cursor:pointer;text-decoration:underline;" @click="createClassroom">{{$t('stuAccount.newClassroom')}}</span>
        </FormItem>
        <FormItem :label="$t('stuAccount.periodInfo')" prop="period">
          <span style="color:white;margin-left:15px;">{{studentInfo.period == "" ? "— —" : studentInfo.period}}</span>
        </FormItem>
        <FormItem :label="$t('stuAccount.gradeInfo')" prop="grade">
          <span style="color:white;margin-left:15px;">{{studentInfo.grade == "" ? "— —" : studentInfo.grade}}</span>
        </FormItem>
      </Form>
      <!--修改信息表单-->
      <Form ref="updateForm" :model="editStudentInfo[0]" label-position="top" :rules="ruleValidate" :show-message="showError" v-if="bizType == 2">
        <FormItem :label="$t('stuAccount.chooseInfo')" v-if="editStudentInfo.length > 1">
          <span class="account-item" v-for="(item,index) in editStudentInfo">{{item.account}}{{index < editStudentInfo.length - 1 ? "， ":""}}</span>
        </FormItem>
        <FormItem :label="$t('stuAccount.chooseNum') + editStudentInfo.length + $t('stuAccount.numUnit')" v-if="editStudentInfo.length > 1">
        </FormItem>
        <FormItem :label="$t('stuAccount.accountInfo')" prop="account" v-if="editStudentInfo.length == 1">
          <Input v-model="editStudentInfo[0].account" :placeholder="$t('stuAccount.accountHolder')" @on-change="setPassword(same)">
          <span slot="prepend">{{schoolCode}}#</span>
          </Input>
        </FormItem>
        <FormItem :label="$t('stuAccount.passwordInfo')" prop="password" v-if="editStudentInfo.length == 1">
          <Input v-model="editStudentInfo[0].password" :placeholder="$t('stuAccount.passwordHolder')"></Input>
          <Checkbox v-model="same" @on-change="setPassword">{{$t('stuAccount.isSame')}}</Checkbox>
        </FormItem>
        <FormItem :label="$t('stuAccount.stuName')" prop="name" v-if="editStudentInfo.length == 1">
          <Input v-model="editStudentInfo[0].name" :placeholder="$t('stuAccount.stuNameHolder')"></Input>
        </FormItem>
        <FormItem :label="$t('stuAccount.stuSeatNo')" prop="seatNo" v-if="editStudentInfo.length == 1">
          <Input type="number" number v-model="editStudentInfo[0].seatNo" :min="1" :placeholder="$t('stuAccount.stuSeatNoHolder')"></Input>
        </FormItem>
        <FormItem :label="$t('stuAccount.classroomInfo')" prop="classroom">
          <Select filterable v-model="editStudentInfo[0].classroom" style="width:100%" :placeholder="$t('stuAccount.classroomInfoHolder')">
            <Option v-for="(item,index) in classroomList" :value="item.id" :key="item.id" @click.native="getCurrentClassroom(index)">{{ item.name }}</Option>
          </Select>
          <span style="float:right;color:#6DE2C4;cursor:pointer;text-decoration:underline;" @click="createClassroom">{{$t('stuAccount.newClassroom')}}</span>
        </FormItem>
        <FormItem :label="$t('stuAccount.periodInfo')" prop="period">
          <span style="color:white;margin-left:15px;">{{editStudentInfo[0].period == "" ? "— —" : editStudentInfo[0].period}}</span>
        </FormItem>
        <FormItem :label="$t('stuAccount.gradeInfo')" prop="grade">
          <span style="color:white;margin-left:15px;">{{editStudentInfo[0].grade == "" ? "— —" : editStudentInfo[0].grade}}</span>
        </FormItem>
      </Form>
      <div class="confirm-btn" @click="confirm()" :class="isFull?'confirm-btn-active':''">
        {{isFull? $t('stuAccount.submitActive'):$t('stuAccount.submitAccount')}}
      </div>
    </div>
    <div slot="footer">

    </div>
  </Modal>
</template>
<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      schoolCode: {
        type: String,
        default: ""
      },
      editStudentInfo: {
        type: Array,
        default: []
      },
      bizType: {
        type: Number,
        default:0
      }
    },
    data() {
      return {
        showError: false,
        isFull:false,
        classroomList:[],
        same:'',
        list:[],
        studentInfo: {
          account: "",
          password: "",
          name:"",
          classroomName: "",
          classroomCode: "",
          period: "",
          grade: "",
          seatNo: null
        },
        ruleValidate: {
          account: [
            { required: true, message: '账号不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          classroomName: [
            { required: true, message: '教室资讯不能为空', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '学生姓名不能为空', trigger: 'blur' }
          ],
          seatNo: [
            { required: true, type:'number', message: '学生座位号不能为空', trigger: 'blur' }
          ],
          period: [
            { required: true, message: '学制不能为空', trigger: 'blur' }
          ],
          grade: [
            { required: true, message: '学级不能为空', trigger: 'blur' }
          ]
        },
        modal_loading: false
      }
    },
    computed: {
      show: {
        get() {
          if (this.bizType == 2 && this.isShow == true) {
            if (this.editStudentInfo.length == 1) {
              let arr = this.editStudentInfo[0].account.split("#");
              if (arr.length > 1) {
                this.editStudentInfo[0].account = arr[1];
              }
            }
          }
          return this.isShow;
        },
        set(value){
        }
      },
    },
    methods: {
      cancel() {
        this.same = false;
        this.$emit("saveStudentInfo", {
              action: 0
            });
      },
      setPassword(data) {
        if (this.bizType == 2) {
          if (data) {
            //this.editStudentInfo[0].password = this.editStudentInfo[0].account;
            this.$set(this.editStudentInfo[0], 'password', this.editStudentInfo[0].account);
          } else {
            //this.editStudentInfo[0].password = "";
            this.$set(this.editStudentInfo[0], 'password', "");
          }
        } else {
          if (data) {
            this.studentInfo.password = this.studentInfo.account;
          } else {
            this.studentInfo.password = "";
          }
        }
      },
      getCurrentClassroom(index) {
        if (this.bizType == 1) {
          this.studentInfo.period = this.classroomList[index].period;
          this.studentInfo.grade = this.classroomList[index].grade;
          this.studentInfo.classroomCode = this.classroomList[index].classroomCode;
        } else {
          for (let i = 0; i < this.editStudentInfo.length; i++) {
            this.editStudentInfo[i].period = this.classroomList[index].period;
            this.editStudentInfo[i].grade = this.classroomList[index].grade;
          }
        }
        this.$forceUpdate();
      },
      getClassroom() {
        this.$api.schoolSetting.findClassInfo({
          SchoolCode: this.schoolCode
        }).then(res => {
          if (res.error == null) {
            if (res.result.data.length > 0) {
              this.classroomList = res.result.data;
            }
          }
        });

      },
      confirm() {
        this.showError = true;
        console.log(this.editStudentInfo);
        console.log(this.studentInfo);
        if (this.isFull) {
          this.same = false;
          if (this.bizType == 2) {
            this.$emit("saveStudentInfo", {
              action: 2,//批量修改数据
              studentInfo: this.editStudentInfo
            });
            this.$refs.updateForm.resetFields();
          } else {
            this.$emit("saveStudentInfo", {
              action: 1,//修改一条数据
              studentInfo: this.studentInfo
            });
            this.$refs.studentInfoForm.resetFields();
          }
          
        } else {
          this.$Message.error('请完善信息!');
        }
      },
      createClassroom() {
        this.$router.push({
          path:"/school/classroom"
        });
      }
    },
    created(){
      this.getClassroom();
    },
    mounted() {

    },
    watch: {
      studentInfo: {
        handler(newValue, oldValue) {
          if (this.bizType == 1) {
            this.showError = false;
            this.$refs.studentInfoForm.validate((valid) => {
              if (valid) {
                this.isFull = true;
              } else {
                this.isFull = false;
              }
            });
          }
        },
        deep: true
      },
      editStudentInfo: {
        handler(newValue, oldValue) {
          this.showError = false;
          setTimeout(() => {
            if (this.bizType == 2) {
              this.$refs.updateForm.validate((valid) => {
                if (valid) {
                  this.isFull = true;
                } else {
                  this.isFull = false;
                }
              });
            }
          },1000);
        },
        deep: true
      }
    }
  }
</script>
